响应式数据的说明
响应式数据: 把data中的数据挂到vm身上，vm身上的这个数据其实就是响应式的
一旦数据发生了改变，页面中的内容也会跟着改变
动态添加的数据是无效的以及$set的使用
- data中的数据一定要先声明，再使用，动态给对象添加的属性不是响应式的
<div id="app">
<p>{{person.name}}---{{person.age}}---{{person.gender}}</p>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
person: {
name: 'zs',
age: 18
}
}
})
</script>
// 动态给data中添加的数据是无效的
// 在vue实例创建的时候，会把data中的数据绑定到vm上，所以data中的数据是响应的
// 但是动态绑定的数据不是响应是的。
vm.person.gender = '男'
- 如果想要动态绑定数据，并且是响应式的,需要使用
vm.$set方法
this.$set(this.person, 'gender', '男')
结论：
- 如果是对象，动态给对象添加或者删除一个属性，vue是检测不到的，所以不是响应的，如果想用动态添加的数据是响应式，需要使用
Vue.set(obj, key, value)vm.$set(obj, key ,value) - 如果是数组，通过数组的下标或者是数组的长度，vue也是检测不到，所以操作也不是响应式的
- 使用
Vue.set方法 - 数组的变异的方法，这个方法会改变原数组，能够触发vue的更新。
- 使用
异步DOM更新以及$nextTick的说明
在vue中数据发生了改变，DOM中的数据也会跟着发生改变，但是这个过程是异步的
vue的数据发生改变之后，DOM不会立即更新，会等到下一次渲染工作执行的时候才会更新DOM
目的：为了提高渲染的性能
clickFn () {
// 数据变化了， view中的内容也要跟着变
this.msg = '你好啊，vue1'
this.msg = '你好啊，vue2'
this.msg = '你好啊，vue3'
this.msg = '你好啊，vue4'
this.msg = '你好啊，vue5'
// 为什么：DOM操作是非常消耗性能的，简单DOM的操作能够提升我们的性能，如果每次操作数据，都立即更新DOM，无疑性能会非常的低，所以vue中会等待数据都修改完成
let result = document.querySelector('p').innerHTML
console.log(result) // hello
}
-
$nextTick方法会在DOM更新之后执行
// 在实际开发中，有可能需要在数据改变之后，获取到更新之后的DOM数据
// 这个时候可以使用 $nextTick函数
// 当vue更新完DOM后，会自动调用$nextTick函数，确保在这个函数中可以获取到DOM结构是最新的
this.$nextTick(function() {
let result = document.querySelector('p').innerHTML
console.log(result) // 你好啊，vue5
})