Vue-原理01-双向数据绑定原理

理解defineProperty

//1,使用defineProperty进行绑定 let obj = { // name: '小小香' } //为属性值改变属性 let oldValue = 'hyx'; Object.defineProperty(obj, 'name', { // writable: true, configurable: true, enumerable: true, //默认情况下,通过defineProperty新增的属性值是不能更改的,不能遍历,不能删除 //设置get set访问值 set(newValue) { if (newValue !== oldValue) { oldValue = newValue; console.log("set方法被执行了"); } }, get() { console.log("get方法被执行了"); return oldValue; } }) //添加get set // obj.name = '汪苏泷'; // delete obj.name; // for (const key in obj) { // if (obj.hasOwnProperty(key)) { // const element = obj[key]; // console.log(element); // } // }

实现监听所有属性的变化,事实监听

//快速监听所有属性的变化 class Observer { constructor(obj) { this.observe(obj); //监听数据的变化 } observe(obj) { //给对象的所有属性添加get,set方法 if (obj && typeof obj == 'object') { for (let key in obj) { this.defineRecative(obj, key, obj[key]) } } } //obj对象 key需要get/set设置的属性名 value通过get/set的值 defineRecative(obj, key, value) { //如果属性的取值也是一个对象,那么给这个对象也添加get/set this.observe(value); Object.defineProperty( obj, key, { configurable: true, enumerable: true, //默认情况下,通过defineProperty新增的属性值是不能更改的,不能遍历,不能删除 //设置get set访问值 set: (newValue) => { if (value !== newValue) { //如果属性的赋值也是一个对象,那么给这个对象也添加get/set this.observe(newValue); value = newValue; console.log("监听到数据变化 set"); } }, get() { return value; } } ) } } let obj2 = { name: '汪苏泷' } new Observer(obj2) console.log(obj2);

注意里面递归调用了this.observe 测试 添加name的值为一个对象,则修改对象里面的属性的时候,set监听到数据的变化