vue监视数据的原理

vue监视数据的原理

1. 实例

注意：Vue 不允许在已经创建的实例上动态添加新的响应式属性。

const app = new Vue({
			el:'#app',
			data:{
				student:{
					name:'dandan',
					age:12
				}
			},
			methods:{
				addProperty(){
					this.student.sex = '女'  // 为student添加新属性
					console.log(this.student)  
				}
			}
		})

运行结果：


发现结果不及预期，数据虽然更新了（console打印出了新属性），但页面并没有更新。这是因为一开始student的name,age属性被设成了响应式数据，而sex是后面新增的属性，并没有通过Object.defineProperty设置成响应式数据

2. vue监视数据的原理

2.1 vue会监视data中所有层次的数据

data:{
				student:{
					name:'dandan',
					age:12
				},
				class:'vue',
				list:[
					{title:'a',num:100},
					{title:'b',num:101},
					{title:'c',num:102}
				]
			},

运行结果：

2.2 如何监测对象中的数据？

通过setter实现监视，且要在new vue时传入要监视的数据。
对象中后追加的属性，vue默认不做响应式处理。
如需给后追加的属性做响应式，则使用如下方法。
Vue.set(target,properrtyName/index,value)或vm.$set(target,properrtyName/index,value)

// this.student.sex = '女'  // 为student添加新属性
// Vue.set(this.student,'sex','女')	
			this.$set(this.student,'sex','女') 
// this指向vue实例对象app
console.log(this.student) 

运行结果：

2.3 如何监视数组中的数据？

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

1. 调用原生对应的方法对数组进行更新；
2. 重新解析模板，进而更新页面。

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

1. 使用这些API：push(),pop(),shift(),unshift(),splice(),sort(),reverse()
2. Vue.set()或者vm.$set()

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

另外还有两种方法可以实现上述问题：
Object.assign()
$forcecUpdated()
这里就不多介绍了噢，请自行学习噢(o゜▽゜)o☆