三门峡网站建设公司,免费虚拟主机免费空间,为什么要做营销型网站,潍坊seo按天收费目录 前言
响应式
Vue的响应式是如何实现的
数据劫持
Vue中的data属性都具有响应式
Vue后期添加的属性如何使其具有响应式
数组的响应式处理
如何使用数组下标去修改可以具有响应式呢 前言
什么是响应式#xff1f;数据劫持是什么#xff1f;Vue响应式是如何实现的数据劫持是什么Vue响应式是如何实现的
响应式 什么是响应式呢在修改data后页面自动改变/刷新。这就是响应式 div classapph1{{msg}}/h1ainput typetext v-modelnum1binput typetext v-modelnum2结果{{results()}}/divscriptconst vm new Vue({el:.app,data:{msg:响应式与数据劫持,num1:,num2:},methods:{results(){return this.num1*this.num2}}})/script
当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.email123456163.com 可以看出追加的属性是不具有响应式的
那如何使其具有响应式 Vue.set(目标对象属性名值) vm.$set(目标对象属性名值) 修改上述代码 Vue.set(vm.a,email,123456163.com)vm.$set(vm.a,address,654321163.com) 数组的响应式处理
div classapph1{{msg}}/h1{{arr1[0].name}}br{{arr1[1].name}}br{{arr1[2].name}}brbr{{arr2[0]}}brbr{{arr2[1]}}brbr{{arr2[2]}}brbr/divscriptconst vm new Vue({el:.app,data:{msg:响应式与数据劫持,arr1:[{id:1,name:lisi,age:20},{id:2,name:wangwu,age:22},{id:3,name:zhangsan,age:23},],arr2:[1,2,3]},})/script 使用数组下标修改属性值 可知直接使用数组下标去修改属性值是没有响应式的
如何使用数组下标去修改可以具有响应式呢
1. Vue.set(数组对象index,值) vm.$set(数组对象index,值) 2.调用Vue提供的7个API push()pop()reverse()splice()shift()unshift()sort()
