前言

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实例

使用场景：

1. 在create生命周期中获取dom
2. 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 里面的方法
}