[vue] Vue监测数据改变的原理 对象,数组

Vue监测对象数据改变的原理

<div id="root">
	<h2>学校名称：{{name}}</h2>
	<h2>学校地址：{{address}}</h2>
</div>

const vm = new Vue({
	el:'#root',
	data:{
		name:'尚硅谷',
		address:'北京',
		student:{
			name:'tom',
			age:{
				rAge:40,
				sAge:29,
			},
			friends:[
				{name:'jerry',age:35}
			]
		}
	}
})

在Vue的设计中对对象的数据进行了一个递归，查找对象中的每一个属性，并且对其进行数据代理，给每一个属性设有get和set方法，这样子当对象中的数据发生改变，那么Vue就会察觉并修改页面中的数据

如需给后添加的属性做响应式，请使用如下API:

vm为Vue对象

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

Vue监测数组数据改变的原理

通过包裹数组更新元素的方式实现，本质就是做了两件事：

• 调整原生对应的方法对数组进行更新
• 重新解构模型，进而更新页面

在修改数组的时候，我们只有通过数组的修改方法才能，修改方法有push、pop、shift、unshift、splice、sort、reverse

注意：Vue.set()和vm.set() 不能给vm或者vm的根数据对象添加属性

<div id="root">

	<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
	<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
	<button @click="addHobby">添加一个爱好</button> <br/>
	
	<h3>爱好：</h3>
	<ul>
		<li v-for="(h,index) in student.hobby" :key="index">
			{{h}}
		</li>
	</ul>
	<h3>朋友们：</h3>
	<ul>
		<li v-for="(f,index) in student.friends" :key="index">
			{{f.name}}--{{f.age}}
		</li>
	</ul>
</div>

const vm = new Vue({
	el:'#root',
	data:{
		student:{
			hobby:['抽烟','喝酒','烫头'],
			friends:[
				{name:'jerry',age:35},
				{name:'tony',age:36}
			]
		}
	},
	methods: {
		
		addFriend(){
			this.student.friends.unshift({name:'jack',age:70})
		},
		updateFirstFriendName(){
			this.student.friends[0].name = '张三'
		},
		addHobby(){
			this.student.hobby.push('学习')
		},
		
	}
})

---

参考：
Vue 监测数据改变的原理