前言

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:"comelong"}}
}
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:"comelong"
    }
}

答：

每个组件都需要有自己独立的数据，所有组件的数据都是当前组件被创建时挂载到 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.$ref $el