vue2监测数据

年前辞职回家相亲 回深之后发现大清都亡了 深圳的前端环境一言难尽
失业在家 就撸一撸代码吧
之前一直使用vue2进行项目的开发 整理一下vue2响应式的原理

vue2的响应式 用到的是Object实例上的defineProperty这个api来实现的数据代理
此时延伸一个概念: 什么是数据代理呢?

1. 数据代理

- 通过一个对象 代理对另外一个对象中属性的操作(读/写)

那Object.defineProperty是怎么使用的呢?
直接上手撸
首先声明 defindeProperty接收三个参数
代码实例:

let number = 20
let person = {
   name: 'yp',
   sex: '男'
}

Object.defineProperty(person,'age', {
	value: 18, // 给person对象中添加一个key,key的值是18 (此时age是不可枚举,且不可修改),
	enumerable: true, // 控制属性是否可枚举, 默认为false 不可被枚举, 此时在控制台为灰色,
	writable: true, // 控制属性是否可以被修改, 默认为false 不可修改
	configurable: true, // 控制属性是否可以被删除, 默认为false 不可删除
	// 当有人读取person中的age属性时 get函数(getter)会被调用 get返回的值就是age的值
	get(){
		return num
	},
	// 当有人修改age的值的时候 set函数(setter)就会被调用 set函数默认接收一个入参 入参就是修改的age的值
	set(val){
		number = val
	}
})

2. 实现一个简单的Vue2的数据监测

对象的检测

let data = {
	name: 'yp',
	age: 18
}

const obs = new Observer(data)

let vm = {}

vm._data = data = obs

function Observer(obj) {
	const keys =  Object.keys(obj)
	keys.forEach(i => {
		Object.defineProperty(this,i,{
			get(){
				return obj[i]
			},
			set(val){
				obj[i] = val
			}
		})
	})
}

此时就实现了简单的 vue2对象的数据监测

vue中数组的监测

vue2中 重写了数组更新的方法 从而在改变时 重新渲染模板 进而更新页面
官网示例如下: