vue 响应式原理(1)--Object.defineProperty()

Object.defineProperty()是实现响应式的核心，Object.defineproperty()提供对object更多的自定义属性。

基础语法:

/* Object.defineproperty() 基础语法
 * @param {object} obj 要修改的对象
 * @param {string} prop 当前需要定义的属性名
 * @param {object} descriport 对当前属性的描述
 */
Object.defineProperty((obj, prop, descriport);

对object的赋值操作

let obj = {};
Object.defineProperty(obj, "name", {
	value:"小明"
});
console.log(obj); // {name:"小明"}

Object.defineProperty() 提供了更多的属性定义 ：

1. writable 是否可以更改属性的值，默认为false 当为true时才可以更改

let obj = {}, editableObj = {};
Object.defineProperty(obj, "name", {
	value:"小明",
        writable:false
});
obj.name = "小红";
console.log(obj); // {name:"小明"};

Object.defineProperty(editableObj, "name", {
	value:"小明",
        writable:true
});
editableObj.name = "小红";
console.log(editableObj); // {name:"小红"};

2. enumerable 该属性是否可以被枚举,只有enumerable为true时属性才可以被枚举 默认值为false

let obj = {}, arr = [];
Object.defineProperty(obj, "name", {
	value:"小明",
        enumerable:false
});
Object.defineProperty(obj, "age", {
	value:"21",
        enumerable:true
});
for(let key in obj){
   arr.push(obj[key])
};
console.log(arr); // ["21"]

3. configurable 该属性的描述是否能被改变，当为true时可以改变 默认值为false

let obj = {}, editableObj = {};
Object.defineProperty(obj, "name", {
	value:"小明",
        configurable:false
});
Object.defineProperty(obj, "name", {
	value:"小红"
});
// 报错Cannot redefine property: name at Function.defineProperty


Object.defineProperty(editableObj, "name", {
	value:"小明",
       configurable:true
});
Object.defineProperty(editableObj, "name", {
	value:"小红",
});
console.log(editableObj); // {name:"小红"};

4. 响应式核心原理 get， 属性的 getter 函数 当访问该属性时，会调用此函数。该函数的返回值会被用作属性的值。get 和value 只能存在一个

let obj = {};
// get 和 value 不能共存
Object.defineProperty(obj, "name", {
	value:"小明",
        get(){
            return "小明"
        }
});
// 报错

// get 的返回值会被当做该属性的值 当你访问该属性时会触发 get 方法
Object.defineProperty(obj, "name", {
        get(){
            console.log("你访问了 name 属性")
            return "小明"
        }
});
console.log(obj); // {name:"小明"};
console.log(obj.name) // 触发get 输出 你访问了 name 属性   然后输出 小明

5. 响应式核心原理 set，属性的 setter 函数 当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值）

let obj = {};
Object.defineProperty(obj, "name", {
        /* 当name 属性被设置时触发set
        *@param {*} newValue 设置的新值
        */
        set(newValue){
            console.log("你设置了name属性："+newValue)
        }
});：
obj.name = "小红" // 触发set 打印 你设置了name属性：小红

object.defineProperty() 是vue 能够实现响应式的基础，本篇详解了object.defineProperty() 方法的属性。