浅谈Vue之双向绑定

Posted 2021-02-13 gitbylegend

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浅谈Vue之双向绑定相关的知识，希望对你有一定的参考价值。

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

<!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 v = ‘‘;//存值
    Object.defineProperty(model, ‘txt‘, {
      // 设置属性值
      set: function(val) {
        v = val;
        txtShow.innerHTML = this.txt;
      },
      // 获取属性值
      get: function () {
        return v;
      }
    })

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

    txt.onkeyup = function() {
      if (event.keyCode == 13) {
        model.txt = txt.value;
      }
    }


  </script>
</body>
</html>

　　大家应该都见过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。

enumerable

当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。

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

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。

以上是关于浅谈Vue之双向绑定的主要内容，如果未能解决你的问题，请参考以下文章

VUE底层原理之数据双向绑定

vue之v-model表单输入双向绑定

vue 之表单输入绑定

vue.js源码学习-双向绑定之Array

vue Object.freeze之打破双向绑定让对象不响应式更新

vue数据双向绑定原理-observer