【Vue】响应式与数据劫持

class="app">
        <h1>{{msg}}h1>
        a"text" v-model="num1">
        b"text" v-model="num2">
        结果：{{results()}}
    

当data中的num1和num2改变时，页面也会自动刷新改变

Vue的响应式是如何实现的

想知道Vue的响应式是如何实现的，我们先要了解一下数据劫持

数据劫持

在前面的文章中我们提到过数据代理机制，其中是使用了Object.defineProperty,其中配置了getter方法和setter方法，其中getter方法为数据代理，而我们这里要介绍的是setter方法，数据劫持。由前面可知，getter方法是当我们查看数据时触发的，而setter方法是我们修改数据时就会触发，而响应式是当data中的数据发生改变是，页面自动发生改变，所以说当我们修改属性值时，setter方法被自动调用，而setter方法不仅修改了属性值，而且还重新渲染了页面，setter方法就像半路劫持一样，所以称为数据劫持

Vue中的data属性都具有响应式

在原有的代码基础上，在data中增加一个属性a,属性a是对象，里面有属性b

 data:{
                msg:'响应式与数据劫持',
                num1:'',
                num2:'',
                a:{
                    b:''
                }
            },

查看Vue实例可得

Vue会给data中的所有属性，以及属性中的属性，都会添加响应式

Vue后期添加的属性如何使其具有响应式

我们给属性a追加一个属性email

 vm.a.email="123456@163.com"

可以看出追加的属性是不具有响应式的

那如何使其具有响应式

Vue.set(目标对象，'属性名'，值)

vm.$set(目标对象，'属性名'，值)

修改上述代码

 Vue.set(vm.a,'email','123456@163.com')
 vm.$set(vm.a,'address','654321@163.com')

数组的响应式处理

class="app">
        <h1>{{msg}}h1>
        {{arr1[0].name}}
        {{arr1[1].name}}
        {{arr1[2].name}}

        {{arr2[0]}}

        {{arr2[1]}}

        {{arr2[2]}}