【Vue】监测数据改变的原理

Vue监视数据的原理：

Vue会监视data中所有层次的数据。
如何监测对象中的数据？

通过setter实现监视，且要在 new Vue时就传入要监测的数据。
（1）对象中后追加的属性，Vue默认不做响应式处理。
（2）如需给后追加的属性做响应式，请使用如下API：

Vue.set(target,propertyName/index,value) 或

vm.$set(target,propertyName/index,value)

例如:

Vue.set(this.student,'sex','男');
vm.$set(this.student,'sex','男');

如何监测数组中的数据?

通过包裹数组更新元素的方法实现,本质就是做了两件事:
（1）调用原生对应的方法对数组进行更新。
（2）重新解析模板，进而更新页面。

在Vue中修改数组中的某个元素一定要用如下方法:

（1）七个数组API: push(),pop(),shift(),unshift(),splice(),sort(),reverse()
（2）Vue.set()或vm.$set()

特别注意:Vue.set()和vm.$set()不能给vm或vm的根数据对象（._data）添加属性。

实例:

<div id="app"><button @click="addMarry">点击添加婚姻状态</button><button @click=" student.marry='已婚' ">点击修改婚姻状态</button><button @click="addPosition">点击添加职位</button><button @click="updateFriendName">修改第一个朋友名字</button><button @click="addHobby">添加爱好</button><button @click="updateHobby">修改第一个爱好</button><h3>姓名:{{student.name}}</h3><h3>年龄:{{student.age}}</h3><h3>性别:{{student.sex}}</h3><h3 v-if="student.marry">婚姻状态:{{student.marry}}</h3><h3 v-if="student.position">职位:{{student.position}}</h3><ul><li v-for="(item,index) in student.hobby" :key="index">{{item}}</li></ul><div v-for="(f,index) in student.friends" :key="index">朋友: 姓名:{{f.name}} 年龄:{{f.age}} 性别:{{f.sex}}<ul><li v-for="(h,index) in student.friends[index].hobby" :key="index">{{h}}</li></ul></div></div>

 <script src="./vue.js"></script><script>Vue.config.productionTip = false;let vm = new Vue({el: '#app',data() {return {student: {name: '马冬梅',age: 28,sex: '女',hobby: ['踢球', '打球', '看球'],friends: [{name: '赵铁蛋',age: 28,sex: '男',hobby: ['买球', '卖球', '拍球'],},{name: '王老五',age: 58,sex: '男',hobby: ['唱', '跳', '拍球'],},],},};},methods: {addMarry() {Vue.set(this.student, 'marry', '未婚');},addPosition() {this.$set(this.student, 'position', '前端开发'); //vm和this用$set效果相同,Vue用set},updateFriendName() {this.student.friends[0].name = '张三';},addHobby() {this.student.hobby.push('学习');},updateHobby() {// this.$set(this.student.hobby, 0, '开车');this.student.hobby.splice(0, 1, '买车'); //从索引0开始,删除到索引1},},});</script>```

【Vue】监测数据改变的原理相关推荐

前端之vue监测数据改变的原理
vue监测数据改变的原理 Vue监测数据改变的原理 Vue实例中的_data原理(对象) Vue.set() Vue实例中的_data原理(数组) 修改Vue数组替换数组 Vue监测数据改变的原理 ...
VUE | key的内部原理、Vue监测数据的原理、Vue.set()和vm.$set()的使用
目录目录一.react.vue中的key有什么作用?(key的内部原理) 1.虚拟DOM中key的作用: 2.对比规则: 3.用index作为key可能会引发的问题: 4.开发中如何选择key? ...
【重学Vue】数据响应原理真的是双向绑定吗？
最近 Ant Design Vue 作者 - 唐金州,在某平台开课了,在整个课程中系统的讲述了Vue的开发实战.在第八讲中介绍了Vue双向绑定的问题,这里我整理一些资料客观的分析一下 Vue数据响应原 ...
vue created 调用方法_深入解析 Vue 的热更新原理，偷学尤大的秘籍？
大家都用过 Vue-CLI 创建 vue 应用,在开发的时候我们修改了 vue 文件,保存了文件,浏览器上就自动更新出我们写的组件内容,非常的顺滑流畅,大大提高了开发效率.想知道这背后是怎么实现的吗, ...
vue指令写在html中的原理,详解Vue中的MVVM原理和实现方法
对Vue中的MVVM原理解析和实现首先你对Vue需要有一定的了解,知道MVVM.这样才能更有助于你顺利的完成下面原理的阅读学习和编写下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家 ...
西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
vue双向数据绑定的原理
有关双向数据绑定的原理最近两次面试的时候,被问到了vue中双向数据绑定的原理,因为初学不精,只是使用而没有深入研究,所以答不出来.之后就在网上查找了别人写的博客,学习一下. 下面是博客园一篇博客,以 ...
vue的双向绑定原理及实现
前言使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
Vue学习笔记--Vue双向绑定实现原理
我们知道Vue可以实现数据双向绑定,Angular和Vue都是采用的MVVM 模式,意思就是当M(模型层)层数据进行修改时,VM层会监测到变化,并且通知V(视图层)层进行相应的修改,反之修改V层则会通 ...

【Vue】监测数据改变的原理

Vue监视数据的原理：

实例:

【Vue】监测数据改变的原理相关推荐

最新文章

热门文章