一、Devtools与Vscode开发配置（了解）
Vue-Devtools是vue在做项目开发时常用的浏览器插件。
1、安装方式
点击浏览器右上角的 三个点 ，在 更多工具 中，选择 扩展程序
将 Vue.js Devtools_5.3.3.crx 这个插件直接拽入当前界面，即可完成安装
2、打开控制台测试devtools
随意写一个点击事件，并查看点击效果
3、VsCode用户片段
{
"demo": {
"prefix": "vue",
"body": [
"<template>",
" <div class=\"$1\">",
" ",
" </div>",
"</template>",
" ",
"<script>",
"export default {",
" data () {",
" return {\n",
" }",
" }",
"}",
"</script>",
" ",
"<style lang = \"less\" scoped>",
" ",
"</style>"
],
"description": "自定义的一个vue代码段"
}
}
4、@路径指向
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
}
在项目package.json所在同级目录下创建文件jsconfig.json：
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": [
"node_modules"
]
}
二、Watch（熟悉）
watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。
简单点说，就是实时监听某个数据的变化。
1、普通监听
<template>
<div class="home">
<input type="text" v-model="msg">
<h3>{{msg}}</h3>
</div>
</template>
<script>
export default {
name: 'Home',
data(){
return {
msg: "你好，世界"
}
},
watch: {
msg(val, oldVal){
console.log(val, oldVal)
}
}
}
</script>
2、立即监听
如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
<template>
<div class="home">
<input type="text" v-model="msg">
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
msg: "你好"
};
},
watch: {
msg: {
handler(val, oldVal) {
console.log(123) // 在最初绑定时直接打印123
// console.log(val, oldVal);
},
immediate: true
}
}
};
</script>
immediate需要搭配handler一起使用，其在最初绑定时，调用的函数也就是这个handler函数。
3、深度监听
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。
<template>
<div class="home">
<h3>{{obj.age}}</h3>
<button @click="btnClick">按钮</button>
</div>
</template>
<script>
export default {
name: 'Home',
data(){
return {
obj: {
name: "Lucy",
age: 13
}
}
},
methods: {
btnClick(){
this.obj.age = 33;
}
},
watch: {
obj: {
handler(val, oldVal){
console.log(val.age, oldVal.age) // 33 33
},
deep: true
}
}
}
</script>
注意：
1、如果监听的数据是一个对象，那么 immediate: true 失效；
2、一般使用于对引用类型的监听，深度监听，如监听一个Object，只要Object里面的任何一个字段发生变化都会被监听，但是比较消耗性能，根据需求使用，能不用则不用。
4、deep优化
<template>
<div class="home">
<h3>{{obj.age}}</h3>
<button @click="btnClick">按钮</button>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
obj: {
name: "Lucy",
age: 13
}
};
},
methods: {
btnClick() {
this.obj.age = 33;
}
},
watch: {
// 通过点语法获取对象中的属性，然后转为字符串，即是对深度监听的优化
"obj.age": {
handler(val, oldVal) {
console.log(val, oldVal);
},
deep: true,
immediate: true, // 此时监听的数据不是一个对象，可以使用immediate
}
}
};
</script>
5、Watch与Computed的区别
watch中的函数是不需要调用的，computed内部的函数调用的时候不需要加()
watch(属性监听)，监听的是属性的变化，而computed(计算属性)，是通过计算而得来的数据
watch需要在数据变化时执行异步或开销较大的操作时使用，而对于任何复杂逻辑或一个数据属性，在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性computed。
computed 属性的结果会被缓存，且computed中的函数必须用return返回最终的结果
watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；
6、Watch与Computed的使用场景
computed
当一个属性受多个属性影响的时候就需要用到computed
三、Mixins混入（熟悉）
mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改。同一个生命周期，混入对象会比组件的先执行。
1、导出mixins
在src下创建 mixins/index.js，写入：
export const MixinsFn = {
created() {
console.log("这是mixins触发的created")
}
}
2、引用mixins
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<script>
import { MixinsFn } from '@/mixins/index.js'
export default {
created(){
console.log("这是about触发的created")
},
mixins: [MixinsFn]
}
</script>
我们会发现，mixins中的created 比 about中的created 优先执行。
四、ref与$refs（掌握）
vue中获取页面里的某个元素（标签或组件），可以给它绑定ref属性，有点类似于给它添加id名。
1、简单使用
<template>
<div class="">
<h3 ref="title">{{msg}}</h3>
<button @click="btnclick">按钮</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "你好"
};
},
methods: {
btnclick() {
console.log(this.$refs.title); // 得到h3标签
console.log(this.$refs.title.innerHTML); // 得到h3标签的文本
}
}
};
</script>
<style lang = "less" scoped>
</style>
2、子组件中的数据获取及方法调用
子组件：
<template>
<div class="">
<h4>{{num}}</h4>
</div>
</template>
<script>
export default {
data() {
return {
num: 100
};
},
methods: {
subFn(){
console.log('子组件中的方法')
}
}
};
</script>
<style lang = "less" scoped>
</style>
父组件：
<template>
<div class="">
<Sub ref="sub" />
<button @click="btnclick">按钮</button>
</div>
</template>
<script>
import Sub from '../components/Sub'
export default {
methods: {
btnclick() {
console.log(this.$refs.sub.num); // 100
this.$refs.sub.subFn(); // '子组件中的方法'
}
},
components: {
Sub
}
};
</script>
<style lang = "less" scoped>
</style>
五、动态组件
类似于Tab栏这种效果，有时我们往往不会去使用v-show或v-if来动态切换，而会使用动态组件搭配 :is 属性来完成，效果如下：
在学习动态组件之前，需要记住这点：
具体操作：
1、写好三个子组件的内容
<template>
<div>Home子组件</div>
</template>
<template>
<div>List子组件</div>
</template>
<template>
<div>User子组件</div>
</template>
2、在父组件中引入并注册
<template>
<div class="">
<button @click="btnClick(1)" :style="{background: num==1 ? 'pink' : ''}">Home</button>
<button @click="btnClick(2)" :style="{background: num==2 ? 'pink' : ''}">List</button>
<button @click="btnClick(3)" :style="{background: num==3 ? 'pink' : ''}">User</button>
<component :is="componentId"></component>
</div>
</template>
<script>
import Home from "@/components/Home";
import List from "@/components/List";
import User from "@/components/User";
export default {
data() {
return {
componentId: "Home",
num: 1
};
},
components: {
Home,
List,
User
},
methods: {
btnClick(arg) {
this.num = arg;
switch (arg) {
case 1:
this.componentId = "Home";
break;
case 2:
this.componentId = "List";
break;
default:
this.componentId = "User";
break;
}
}
}
};
</script>
3、动态组件其他应用场景
例如table、select这种外层HTML标签，他们内部的标签（如：tr、option等），是不能被单独拿出来作为组件放在他们内部的，否则会被作为无效的内容提升到外部，并导致最终渲染结果出错。而使用动态组件的 :is 属性，就可以解决这个问题。
需要注意的是如果我们从以下来源使用模板的话，这条限制是*不存在*的：
<script type="text/x-template">
六、KeepAlive
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
KeepAlive用于处理组件缓存。有什么用呢？想象一个业务场景：
在Login页面填写完手机号，发现未注册，需要跳去Register页面完成注册，再返回Login页面填写密码，进行登录，此时如果在Login页面没有保存好手机号，那么跳回来时，用户又得重新输入手机号。为了解决这样的需求，我们需要借助keep-alive。
1、keep-alive结合component
首先，创建 a.vue、b.vue 和 c.vue 三个组件，内容大致如下：
<template>
<li>a组件 <input type="text"></li>
</template>
在某个页面（如：about.vue）中引入：
<template>
<div class="about">
<button @click="mycom='acom'">a组件</button>
<button @click="mycom='bcom'">b组件</button>
<button @click="mycom='ccom'">c组件</button>
<ul>
<component :is="mycom"></component>
</ul>
</div>
</template>
<script>
import acom from '../components/a'
import bcom from '../components/b'
import ccom from '../components/c'
export default {
data(){
return {
mycom: "acom"
}
},
components: {
acom, bcom, ccom
}
}
</script>
到目前为止，我们可以切换组件，但是在切换时却无法缓存组件内容，因此我们给 component 组件套一个 keep-alive：
<keep-alive>
<component :is="mycom"></component>
</keep-alive>
这样我们在三个组件的 input 中输入的东西就会被缓存。
2、include与exclude
如果我们想缓存指定的组件，可以使用include：
<keep-alive :include="['acom', 'bcom']">
<component :is="mycom"></component>
</keep-alive>
如果我们想排出部分组件的缓存，可以使用exclude：
<keep-alive :exclude="['ccom']">
<component :is="mycom"></component>
</keep-alive>
3、keep-alive生命周期
Keep-alive 生命周期包含：actived 和 deactivated
找到 a.vue，写入：
<script>
export default {
created(){
console.log('a组件的created')
},
mounted(){
console.log('a组件的mounted')
},
activated(){
console.log('actived: 进入当前组件时触发')
},
deactivated(){
console.log('deactivated：离开当前组件时触发')
}
}
</script>
我们可以观察到两个现象：
actived在created和mounted之后调用
deactivated在离开组件时会触发，无论第几次进入组件，actived都会触发，但created和mounted只会触发一次
七、NextTick
1、数据更新延迟的问题
我们先来思考一个数据更新问题：
当我修改一个数据时，这个数据会立刻渲染到页面中吗？
<template>
<div class="">
<h2 ref="title">{{num}}</h2>
<button @click="btnClick">按钮</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 1
};
},
methods: {
btnClick() {
this.num++;
console.log(this.$refs.title.innerHTML); // 1
}
}
};
</script>
很显然，这里打印出来的是视图更新前的数据，所以我们得出结论：
当侦听到你的数据发生变化时， Vue将开启一个队列（该队列被Vue官方称为异步更新队列）。视图需要等队列中所有数据变化完成之后，再统一进行更新。
2、NextTick使用方法
那么，如果我们想提前获取更新后的数据，就需要借助NextTick。来看看官方对NextTick的定义：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
NextTick有两种基本使用方法：
// 1、CallBack形式
this.$nextTick(()=>{
console.log(this.$refs.title.innerHTML);
})
// 2、Promise形式
this.$nextTick().then(()=>{
console.log(this.$refs.title.innerHTML);
})
我们来尝试修改刚刚的案例：
<template>
<div class="">
<h2 ref="title">{{num}}</h2>
<button @click="btnClick">按钮</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 1
};
},
methods: {
btnClick() {
this.num++;
console.log(this.$refs.title.innerHTML); // 1
// this.$nextTick(()=>{
// console.log(this.$refs.title.innerHTML); // 2
// })
this.$nextTick().then(()=>{
console.log(this.$refs.title.innerHTML); // 2
})
}
}
};
</script>
3、应用场景
1、如果要在created()钩子函数中进行的DOM操作，由于created()钩子函数中还未对DOM进行任何渲染，所以无法直接操作dom，需要通过$nextTick()来完成。
created () {
this.$nextTick(()=>{
this.$refs.ptag.innerText = "一个p标签"
})
}
注：在created()钩子函数中进行的DOM操作，不使用$nextTick()会报错：
// Error in created hook: "TypeError: Cannot set property 'innerText' of undefined"
created(){
this.$refs.ptag.innerText = "一个p标签"
}
八、Transition
Css中有个transition属性，我们称为过渡属性。Vue中也有个transition，我们将它做为标签。
<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。
我们来看看怎么写：
<button @click="flag = !flag">切换h3显示</button>
<transition name="fade">
<h3 v-show="flag">你好，标题</h3>
</transition>
<style lang="less" scoped>
.fade-enter, .fade-leave-to{
opacity: 0;
}
.fade-enter-active, .fade-leave-active{
transition: opacity 1s;
}
</style>
我们来看看这个图：
一个完整的transiton组件的class类，有6个，通过指定不同的class来添加样式来达到过渡的CSS效果。
v-enter-active：定义进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-leave-active：定义离开过渡生效时的状态。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
默认类名是以上6个，如果在transition标签中指定了name=’xxx’,那么6个类名将会变成xxx开头的，例如xxx-enter-active。
