vue数据拦截原理

预览

视频地址

<div id="a"></div>

var obj={};
var box=document.querySelector("#a");
Object.defineProperty(obj,"myname",{
	get(){
    	console.log("get");
    	return box.innerHTML;
    },
    set(value){
        console.log("set");
        box.innerHTML=value;
    }
})

代码预览地址

知识储备

1.有两种类型的对象属性。
第一种是 数据属性。我们已经知道如何使用它们了。到目前为止，我们使用过的所有属性都是数据属性。
第二种类型的属性是新东西。它是 访问器属性（accessor properties）。它们本质上是用于获取和设置值的函数，但从外部代码来看就像常规属性。

一个属性要么是访问器（具有 get/set 方法），要么是数据属性（具有 value），但不能两者都是。

2.访问器属性由 “getter” 和 “setter” 方法表示。在对象字面量中，它们用 get 和 set 表示：

let obj = {
  get propName() {
    // 当读取 obj.propName 时，getter 起作用
  },

  set propName(value) {
    // 当执行 obj.propName = value 操作时，setter 起作用
  }
}

当读取 obj.propName 时，getter 起作用，当 obj.propName 被赋值时，setter 起作用。

3.访问器属性的描述符与数据属性的不同。

对于访问器属性，没有 value 和 writable，但是有 get 和 set 函数。具体区别如下表：

	configurable	enumerable	value	writable	get	set
数据属性描述符	可以	可以	可以	可以	不可以	不可以
访问器属性描述符	可以	可以	不可以	不可以	可以	可以

4.描述符默认值汇总

• 拥有布尔值的键 configurable、enumerable 和 writable 的默认值都是 false。
• 属性值和函数的键 value、get 和 set 字段的默认值为 undefined。

5.Object.defineProperty() 详细用法