如何用3分钟掌握Vue数据劫持原理及实现？

本文共计862个文字，预计阅读时间需要4分钟。

目标：了解Object.defineProperty如何实现数据绑定及原理原理概述：定义一个监听函数，对对象的每个属性进行监听，通过Object.defineProperty为每个属性设置get和set方法。

目的: 了解Object.defineProperty如何实现数据劫持

大致原理是这样的：

1. 定义一个监听函数，对对象的每一个属性进行监听
2. 通过Object.defineProperty对监听的每一个属性设置get 和 set 方法。
3. 对对象实行监听
4. 对对象内嵌对象进行处理
5. 对数组对象进行处理

1. 先定义一个对象

let obj = { name: 'jw' }

2. 定义一个监听函数

/** * 判断监听的是否是对象 * 如果是对象，就遍历，并且对每个属性进行定义get 和 set */ function observer(obj) { if(typeof obj === 'object') { for (let key in obj) { // defineReactive 方法设置get和set，见第三步 defineReactive(obj, key, obj[key]); } } }

3.定义一个函数，处理每个属性

function defineReactive(obj, key, value) { Object.defineProperty(obj, key, { get() { return value; }, set(val) { console.log('数据更新了') value = val; } }) }

ok. 到这里初版已经实现了。