浅谈Vue之双向绑定

　　VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。那么Object.defineProperty究竟是该如何使用的呢？先看个例子

 

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h5 id="txtShow"></h5>
    <input type="text" id="txt">
  </div>
  <script>
    // mvvm 分为model(模型) view(视图) viewModel(视图模型)
    //  model 用来存储数据
    //  view  用来展示数据
    //  ViewModel 关联数据,和model实现双向绑定。

    // 通过Object.defineProperty 定义一个属性
    //  通过此方法为对象设置属性的时候 对象的属性值会包含一个get和set方法
    //  当修改对象值得时候回触发相应的函数调用
    //  参数一 需要定义属性的对象
    //  参数二 属性名字
    //  参数三 对象属性的修饰内容 
    //    在set方法中做一些处理，执行页面的刷新和回调
    var model = {}; //创建一个新对象
    var vm = '';
    Object.defineProperty(model, 'txt', {
      set: function (val) {
        console.log('设置属性值');
        console.log(val);
        vm = val;
        txtShow.innerHTML = this.txt;
      },
      get: function () {
        console.log('获取属性值');
        console.log(this);
        return vm;
      },
      enumerable: true, //可枚举，默认false
      configurable: true //该属性描述符能够被改变，同时该属性也能从对应的对象上被删除。默认false
    })

    var txtShow = document.getElementById('txtShow'),
      txt = document.getElementById('txt');

    txt.onkeyup = function () {
      if (event.keyCode == 13) {
        model.txt = txt.value;
      }
    }
  </script>
</body>

</html>
复制代码

 

　　通过上面的代码我们可以看到，在控制台，无论是改变vm的值还是model.txt的值，所对应的的，对方的值也会相应的改变，由此，这里我们就实现了双向绑定。

　　对于Object.defineProperty() ,大家应该都见过，只是认知的程度有所不同。

　　根据MDN web docs 中解释说： Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

语法

Object.defineProperty(obj, prop, descriptor)

参数

obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符。

返回值

    被传递给函数的对象。

　　该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，能够在属性枚举期间呈现出来（for...in 或 Object.keys 方法）， 这些属性的值可以被改变，也可以被删除。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的。

　　

　　对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一；不能同时是两者。

　　数据描述符和存取描述符均具有以下可选键值：

configurable
当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。configurable特性表示对象的属性是否可以被删除，以及除value和writable特性外的其他特性是否可以被修改。
enumerable
当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。enumerable定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举。

数据描述符同时具有以下可选键值：

value
该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
writable
当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false。

存取描述符同时具有以下可选键值：

get
一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。
默认为 undefined。
set
一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。
默认为 undefined。
 描述符可同时具有的键值
   configurable  enumerable  value writable  get   set
数据描述符  YES  YES  YES  YES  NO  NO
存取描述符  YES  YES  NO  NO  YES  YES

　　如果一个描述符不具有value,writable,get 和 set 任意一个关键字，那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字，将会产生一个异常。

　　记住，这些选项不一定是自身属性，如果是继承来的也要考虑。为了确认保留这些默认值，你可能要在这之前冻结 Object.prototype，明确指定所有的选项，或者通过 Object.create(null)将__proto__属性指向null。

　　在日常运用中，那你需要明白：

复制代码
var o = {};

o.a = 1;
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : true,
  configurable : true,
  enumerable : true
});


// 另一方面，
Object.defineProperty(o, "a", { value : 1 });
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : false,
  configurable : false,
  enumerable : false
});
复制代码

　　

下面的例子展示了如何实现一个自存档对象。 当设置temperature 属性时，archive 数组会获取日志条目。

复制代码
function Archiver() {
  var temperature = null;
  var archive = [];

  Object.defineProperty(this, 'temperature', {
    get: function() {
      console.log('get!');
      return temperature;
    },
    set: function(value) {
      temperature = value;
      archive.push({ val: temperature });
    }
  });

  this.getArchive = function() { return archive; };
}

var arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]
复制代码
?
1
看到这个例子，你心中是不是有了些许想法？

　　后面还有很多知识点，有需要的可以去MDN进行更加深入的了解，谢谢！

　　

posted @   gitByLegend  阅读(207)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
· 对象命名为何需要避免'-er'和'-or'后缀
阅读排行：
· “你见过凌晨四点的洛杉矶吗？”--《我们为什么要睡觉》
· 编程神器Trae：当我用上后，才知道自己的创造力被低估了多少
· C# 从零开始使用Layui.Wpf库开发WPF客户端
· C#/.NET/.NET Core技术前沿周刊 | 第 31 期（2025年3.17-3.23）
· 接口重试的7种常用方案！
点击右上角即可分享
微信分享提示