vue中双向数据绑定(v-model)的原理

vue中实现双向数据绑定其实用的就是Object.defineProperty方法

Object.defineProperty这个方法在js高程上面有详细的讲解

通常我们如何给对象添加一个属性呢？

let obj = {name: ""}

obj.age = 18;

obj["gender"] = "male";

Object.defineProperty可以用来给对象添加属性，也可以用来修改现有的属性

在添加属性的时候，可以设置属性以下的特性：

1. 是否为只读属性

2. 是否可以删除

3. 是否可以遍历

4. 可以为属性注册像改变事件一样的函数

写法：Object.defineProperty(要添加或者修改属性的对象, 要添加或者修改的属性名, 特征对象)

例如：

let obj = {};
Object.defineProperty(obj, "name", {
      // 1. 默认的，该属性是只读的，不能被赋值 默认是false
      writable: true,
      // 2. 默认的，该属性不能被for in循环遍历 默认是false
      enumerable: true,
      // 3. 默认的，该属性不能被delete删除 默认是false
      configurable: true,
      // value属性用来设置属性的默认值
      value: "123"
    })

还可以这样写（vue中用的就是这种方法）：

let nameValue = "";
let obj = {};

    Object.defineProperty(obj, "name", {
      // set和get不能和上面的writable，value同时出现
      set(value){
        // 这个函数就像是属性的改变事件，我们在给属性赋值的时候
        // JS内部会自动调用这个函数
        console.log("属性被赋值了");

        // 在set函数中，需要接收用户所赋值的内容，也就是等号右边的内容 可以通过value形参接收
        // 将其存储起来

        nameValue = value;
      },
      get(){
        // 这个函数就像是属性的被获取的事件，只要有人用到这个属性了，那这个函数就会被调用
        console.log("属性被获取值了");

        // 这个函数会在用户获取值得时候调用，用户获取到的值，就是当前函数的返回值
        return nameValue;
      }
    })

注意：set和get不能和writable，value同时出现

 

vue中双向数据绑定的简单实现：