vue 双向数据绑定的原理

vue 实现双向数据绑定的原理就是利用Object.defineProperty()方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

#简单实现

var obj = {};

var name; 

// 参数一： 定义属性的对象

// 参数二： 要定义或修改的属性名称

// 参数三： 将被定义或修改的属性描述符

Object.defineProperty(obj, "data", {

    // 获取值

    get: function() { 

        return name;

    },

    // 设置值

    set: function(val) {

        name = val;

        console.log(val);

    }

});

//赋值调用set

obj.data = "hello";

 

//取值调用get

console.log(obj.data);