Object.defineProperty 和 Proxy 响应式原理 vue2 vue3

一、VUE2 响应式原理 Object.defineProperty

Object.defineProperty 方法允许精确添加一个属性到对象上，或者修改对象的现有属性，并返回这个对象。它可以用来定义或修改属性的特性，如 value, writable, enumerable, 和 configurable。

1) Object.defineProperty 这个方法接收三个参数:

1.属性所在的对象
2.属性的名字
3.一个描述符对象

描述对象：

1.configurable:表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。

2.enumerable：表示能否通过for in循环访问属性，默认值为false

3.writable：表示能否修改属性的值。默认值为false。

4.value：包含这个属性的数据值。默认值为undefined。

 // 理解属性var p1 = {name: "lisi",};Object.defineProperty(p1, "name", {configurable: false, // not deleteenumerable: false, // 能否通过for in循环访问属性，默认值为false});// delete删除属性console.log(p1); //{ name: 'lisi' }delete p1.name;console.log(p1); //{ name: 'lisi' }// 能否通过for in循环访问属性，默认值为falsefor (var i in p1) {console.log(p1[i]);} // lisi

2) 响应式原理实践：

var book = {_year: 2004,edition: 1,};Object.defineProperty(book, "year", {get: function () {return this._year;},set: function (newYear) {if (newYear > 2004) {this._year = newYear;this.edition += newYear - 2004;}},});book.year = 2005;console.log(book.edition); // 2console.log(book._year); //2005

参考别人写的demo：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>#myInput {width: 400px;height: 50px;font-size: 40px;color: red;}#contain {margin-top: 20px;width: 400px;height: 200px;border: 1px solid salmon;}</style></head><body><input id="myInput" type="text" /><div id="contain"></div><script>var text;window.data = {};var oIn = document.getElementById("myInput");var oDiv = document.getElementById("contain");oIn.addEventListener("input", function (e) {text = e.target.value;console.log(text);window.data.value = text;});Object.defineProperty(window.data, "value", {get() {return "";},set(v) {oDiv.innerHTML = v;},});</script></body>
</html>

二、VUE3响应式原理 Proxy

Proxy 对象用于创建一个对象的代理，从而可以拦截和自定义对象的基本操作（如属性查找、赋值、枚举、函数调用等）。Proxy 提供了一种更灵活的方式来定义或修改对象的行为。

1）语法

// target ：需要封装的目标对象 // handler ：一些属性方法的集成（占位符对象） const proxy = new Proxy(target, handler);

常用的语法
拦截对属性的读取操作
get(target, property, receiver)

拦截对属性的写入操作
set(target, property, value, receiver)

拦截函数的调用
apply(target, thisArg, argumentsList)

判断对象是否拥有某个属性
has(target, property)

拦截删除属性的操作
deleteProperty(target, property)

2）响应式原理代码

 const handler = {// 拦截目标对象的属性读取操作get(target, prop, receiver) {console.log(`访问了${prop}属性`);// 使用Reflect.get执行目标对象的属性读取操作return Reflect.get(target, prop, receiver);},// 拦截目标对象的属性设置操作set(target, prop, value, receiver) {console.log(`设置了${prop}属性`);// 使用Reflect.set执行目标对象的属性设置操作return Reflect.set(target, prop, value, receiver);},};// 创建一个目标对象const target = {name: "Alice",age: 20,};// 创建一个代理对象const proxy = new Proxy(target, handler);// 使用代理对象执行各种操作console.log(proxy.name); // 访问了name属性，输出Aliceproxy.age = 21; // 设置了age属性console.log(proxy.age); // 访问了age属性，输出21

三、object.definePropery 和 Proxy的区别
1） Object.defineProperty()语法
重点：vue为什么对数组对象的深层监听无法实现，因为组件每次渲染都是将data里的数据通过defineProperty进行响应式或者双向绑定上，之前没有后加的属性是不会被绑定上，也就不会触发更新渲。

Object.defineProperty( Obj, 'name', {enumerable: true, //可枚举configurable: true, //可配置// writable:true, //跟可配置不能同时存在// value:'name',  //可写死直get: function () {return def},set: function ( val ) {def = val}
} )

2） Proxy的语法

//两个参数，对象，13个配置项
const handler = {get: function(obj, prop) {return prop in obj ? obj[prop] : 37;},set:function(){ },...13个配置项
};
const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;
console.log(p.a, p.b);      // 1, undefined
console.log('c' in p, p.c); // false, 37

对比了上面两种语法是不是就懂了，defineProperty只能响应首次渲染时候的属性，Proxy需要的是整体，不需要关心里面有什么属性，而且Proxy的配置项有13种，可以做更细致的事情，这是之前的defineProperty无法达到的