前言
vue 进阶更多的知识点是在日常开发之上扩展的知识点，可以对vuejs更深一步的了解，避免在vue项目开发的过程中踩坑。
1.$set 重新挟持 - 解决数组 对象赋值
1问：通过索引赋值 更改了数组的值，但是页面不更新的原因？如何解决？
this.list[0] = 'xxxx'; //页面不渲染答：
因为vue 使用了 Object.defineProperty挟持对象数据的改变，重写observe方法，对于数组的部分操作监听不到数据的变化。
变更方法操作的数组都可以监听到数据改变： push pop shift unshift splice sort reverse 【可以简单理解为操作原数组的方法】
非变更方法的操作都监听不到数据改变： filter concat silce ；索引赋值 ；更改数组长度等等。
//解决方案： $set 重新挟持
this.$set(this.list,0,'xxxxx') //页面更新2问：给已经存在data中的对象 新增属性并赋值，页面不会更新的原因？如何解决？
data(){
return { user:{name:"cometang"}}
}
methods:{
changeData(){
this.user.age = 20; //页面不更新
}
}答：
因为vue 使用了 Object.defineProperty 挟持对象数据的改变，挟持的是定义时已经存在的对象属性，新增的属性 vue的defineProperty方法并没有挟持上去。
//解决方案： $set 重新挟持
changeData(){
this.$set(this.user,'age',20); //页面更新 注意：属性名必须是字符串
}2.data定义数据
问：data 为什么是一个函数返回一个对象，而不直接写一个对象？
data(){
return {
name:"cometang"
}
}答：
每个组件都需要有自己独立的数据，所有组件的数据都是当前组件被创建时挂载到 VueComponent 实例上 。
如果直接写一个对象的弊端： 对象是引用数据类型，直接创建一个对象会导致 所有的组件 共享同一个地址空间的数据。
如果写一个函数 返回一个数据：确保每次返回的对象引用地址都是独立的，不会影响其他组件。
3.$nextTick 异步更新
问：$nextTick 是什么？什么时候会用到？
答：
$nextTick 本质上就是一个异步函数Promise 状态机， 等待vue的实体dom加载完成之后触发$nextTick 的回调函数
$nextTick 可以实现的效果 setTimeout实例
使用场景：
在create生命周期中获取dom
dom更新之后获取dom 都需要用异步更新获取dom的新数据
- 在create生命周期中获取dom
<div class="box"></box>
data() {
return {
msg: "我是老的提示信息",
};
},
created() {
console.log(document.querySelector(".box")); //null
this.$nextTick(() => {
console.log(document.querySelector(".box")); //获取到dom
});
}- dom更新之后获取dom 都需要用异步更新获取dom的新数据
changeData() {
this.msg = "我是新的提示信息";
console.log(document.querySelector(".box").innerHTML); // 我是老的提示信息
this.$nextTick(() => {
console.log(document.querySelector(".box").innerHTML); //我是新的提示信息
});
},4.深度监听 watch
watch 如果监听的是一个对象 或者是数组，对象中的属性 或者数组元素的值发生改变，watch并不能成功的监听到改变，这是vue封装的defineProperty 的问题，引用数据类型 因为地址未发生改变，所以监听不到最新数据。
错误案例：
data() {
return {
list: [{ name: "张三", age: 40 }],
};
},
methods: {
changeData() {
this.list[0].name = "李四";
},
},
watch: {
list(newVal ){
console.log('有新的数据变更'); //changeData 方法调用了 并没有触发watch
console.log(newVal);
}
}深度监听
watch: {
list:{
deep:true, //启动深度监听
handler:(newVal,oldVal)=>{
console.log('有新的数据变更'); //changeData 方法调用了 触发watch
console.log(newVal);
}
}
}5.全局自定义指令 directive
可以实现自定义的指令，一般用于实现快速便捷的操作dom
main.js 中在Vue类上面直接写入全局自定义指令
Vue.directive('指令名', {
//dom生命周期钩子函数
bind: function () {}, //初始化触发
inserted: function () {}, //插入dom节点触发
update: function () {}, //dom更新触发
componentUpdated: function () {},//等待组件的所有dom 更新结束后触发
unbind: function () {} //指令与dom解除绑定触发
})//定义全局指令
Vue.directive('focus',{
//el 获取的dom
//data.value 获取指令的数据
inserted: function (el,data) {
el.focus(); //绑定了这个指令的dom 在dom插入页面时 自动获得焦点
},
})<input type="text" v-focus="xxxx">6.Mixins 混入
将组件中的变量和方法提取到 mixins中存起来，多个组件可以同时使用该变量和方法【空间独立】
组件中获取mixins 中的数据和方法 会自动和 组件内的data 对象 methods对象进行合并。
创建src/mixins/index.js
export const minxinData = {
data(){
return {
name:'张麻子'
}
},
methods:{
getData(){
return '你好啊'
}
}
}组件中使用 mixins
<script>
import {minxinData} from '@/mixins/index.js'
export default {
mixins:[minxinData],
created(){
console.log(this.name);
}
}
</script>7.$refs ref 获取vue的dom节点
<div ref="box"></div>//获取到vue中的dom对象
this.$refs.box
this.$refs['box']8.$children $parent
$children 获取当前组件下的所有子组件的实例列表 ，可以用来获取子组件的数据和方法，且可以对该数据进行修改，对方法进行调用
$parent 获取当前组件的父组件实例对象，可以直接使用父组件的数据和调用父组件的方法。
//子组件获取父组件的数据和方法
this.$parent.name #获取数据
this.$parent.getData() #调用父组件 methods中的 getData 方法//父组件获取子组件中的数据和方法【注意：必须在父组件的mounted 生命周期到了才可以拿】
mounted(){
this.$children[0].name; #获取第0个子组件的data 里面的数据
this.$children[0].num =1000000; #修改第0个子组件的data 里面的数据
this.$children[0].sum() #调用第0个子组件的methods 里面的方法
}