Vue数组和对象的响应式

七彩冰淇淋与藕汤

已于 2022-07-11 17:58:59 修改

阅读量700

点赞数 1

文章标签： vue.js 前端 javascript

于 2021-11-05 13:03:20 首次发布

本文链接：https://blog.csdn.net/qq_36582776/article/details/121160643

版权

Vue监视数据的原理:
1. vue会监视data中所有层次的数据。

2．如何监测对象中的数据?
通过setter实现监视，且要在new Vue时就传入要监测的数据。

        (1).对象中后追加的属性，Vue默认不做响应式处理（对对象的已有属性的读取(get)和修改(set)进行拦截）
        (2).如需给后添加的属性做响应式,请使用如下API:
                Vue.set(target，propertyName/index,value)

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

3．如何监测数组中的数据?
        通过包裹数组更新元素的方法实现，本质就是做了两件事:
                (1).调用原生对应的方法对数组进行更新。
                (2).重新解析模板,进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法:
        1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()，这些API能直接修改原数组。如果不使用直接修改原数组的，需要用另一个数组承接。

2.Vue.set()或vm.$set()

不能直接通过找下标的方式修改数组中的值，这样不是响应式。
特别注意:Vue.set()和vm.$set(）不能给vm或 vm的根数据（vm._data）对象添加属性!!!例如想在data下直接添加张三的ID是实现不了的。

<body>
	<div id="div1" class="dd">
		<button @click="addId">添加张三id ，默认000</button>
		<button @click="updataID">修改张三id为004</button>
		<button @click="addHobby">增加爱好：弹狗</button>
		<button @click="updataDrinkToSing">修改爱好喝酒为唱歌</button>
		<button @click="addFri">添加一位盆友</button>
		<button @click="updataFirstFriName">修改第一位朋友名字为tom</button>
		<li>姓名：{{student.name}}</li>
		<li>年龄：{{student.age}}</li>
		<li v-if="student.id">ID :{{student.id}}</li>
		爱好：
		<li v-for="(ho,i) in student.hobby " :key=i >
			{{ho}}
		</li>
		朋友：
		<li v-for="per in student.friends " :key=per.id>
			{{per.name}}--{{per.age}}
		</li>
	</div>
</body>
<script>
	Vue.config.productionTip=false
	var vm=new Vue({
		el:"#div1",
		data() {
			return {
				student:{
					name:"张三",
					age:13,
					hobby:["抽烟","喝酒","烫头"],
					friends:[
						{id:"001",name:"lisa",age:10},
						{id:"002",name:"jack",age:13},
						{id:"003",name:"marry",age:12},
					]
				}
			}
		},
		methods: {
			addId(){
				Vue.set(this.student,"id","000")
                //或者 this.$set(this.student,"id","000")
			},
			updataID(){
				this.student.id="004"
			},
			addHobby(){
				this.student.hobby.push("弹狗")
			},
			updataDrinkToSing(){
				this.student.hobby.splice(0,1,"唱歌")
				//或者  this.$set(this.student.hobby,0,"唱歌")
			},
			addFri(){
				this.student.friends.push({id:"006",name:"guch",age:18})
				//错误做法：（不是响应式的,从控制台看已经改了，但是页面还是现实原数据）this.student.friends[0]={id:"006",name:"guch",age:18}
			},
			updataFirstFriName(){
				// this.student.friends[0].name="网二"    //或者
				Vue.set(this.student.friends[0],"name","网0")
			}
		},
	})

</script>

总结：

添加：对象用set、数组用push/unshift/splice

修改：对象直接修改或 $set 、数组splice

vm.$set 的实现原理

如果目标是数组，直接使用数组的 splice 方法触发响应式；
如果目标是对象，会先判断属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

七彩冰淇淋与藕汤

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Vue数组和对象的响应式

Vue监视数据的原理:1. vue会监视data中所有层次的数据。2．如何监测对象中的数据?通过setter实现监视，且要在new Vue时就传入要监测的数据。(1).对象中后追加的属性，Vue默认不做响应式处理(2).如需给后添加的属性做响应式,请使用如下API:Vue.set(target.propertyName/index,value)或vm.$set(target，prop............
复制链接

扫一扫