vue的响应式

核心逻辑

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

怎么改变数据？

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

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

vm.msg = "hello vue"

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

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

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

可以使用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实例对象

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

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

<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;