响应式数据（$set、$nextTick）

响应式数据的说明

响应式数据: 把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
})

来源：CSDN

作者：Jason秀啊

链接：https://blog.csdn.net/qq_44704740/article/details/104131202