vue的响应式

核心逻辑

数据变化，页面就会重新渲染

怎么改变数据？

<div id="app">
{{ msg }}
</div>

const vm = new Vue({
    el: '#app',
    data: {
      msg: '你好vue'
    }
});

这时候我们在页面的控制台里面修改数据

vm.msg = "hello vue"

这时候我们发现，页面改变了。
为什么data里面的数据会直接出现在vue实例对象中？
当创建vue实例时，vue会将data中的数据代理给vue实例，目的是为了实现响应式，监控数据变化，执行监听函数。
更改的数据必须是存在的数据，否则不能重新渲染页面，也必须是页面上渲染过的数据，否则也不能重新渲染

更改数据后，页面会立刻重新渲染吗？

vue更新DOM的操作是异步执行的，只要侦听到数据变化，将开启一个异步队列，如果一个数据被多次变更，那么只会被推入到队列中一次，这样可以避免不必要的计算和DOM操作。

const vm = new Vue({
    el: '#app',
    data: {
      msg: '你好vue'
    }
});
vm.msg = "hello vue";
console.log(vm.msg);
console.log(vm.$el.innerHtml);

可以证明，更改数据后，vue开启了一个异步队列。vm.$el是vue挂载的元素。

如果我想在更改数据后，拿到渲染后的值怎么办？

可以使用vm.$nextTick或者Vue.nextTick。在页面重新渲染后，会立刻执行
这两个函数。这两个函数也可以当做promise使用

const vm = new Vue({
    el: '#app',
    data: {
      msg: '你好vue'
    }
});
vm.msg = "hello vue";
console.log(vm.msg);
vm.$nextTick(() => {
  console.log(vm.$el.innerHTML); //hello vue
});
Vue.nextTick(() => {
  console.log(vm.$el.innerHTML); //hello vue
})

vm.$nextTick和Vue.nextTick的区别是什么？

Vue.nextTick内部函数的this指向window
vm.$nextTick内部函数的this指向Vue实例对象

改变数组和对象时，正确的做法

1. 利用数组的变异方法：push、pop、shift、unshift、splice、sort、reverse。这些方法不是原生js的方法，而是Vue重写过后的方法
2. 利用vm.$set或者Vue.set方法
   • vm.$set(object, propertyName, value)
3. 利用vm.$delete或者Vue.delete
   • vm.$delete(object, target)

利用索引直接设置数组项，修改数组长度，添加或删除对象都不是响应式的

<div id="app">
     {{ people }}
     {{ obj }}
</div>

const vm = new Vue({
      el: '#app',
      data: {
      	people:['小红','小明','coffee'],
      	obj:{
			name:'coffee',
			age:18
		}
      }
});

如果我们通过下面的方式改变数组或对象，那么页面不会重新渲染。

vm.people[3] = "小白";
vm.people.length = 0;
vm.obj.wife = "小红";
delete vm.obj.age;