1. 技术文章
  2. Vue双向数据绑定简易实现

Vue双向数据绑定简易实现

由 ☆樱花仙子☆ 提交于 2020-03-12 07:13:24

一、vue中的双向数据绑定主要使用到了Object.defineProperty（新版的使用Proxy实现的）对Model层的数据进行getter和setter进行劫持，修改Model层数据的时候，在setter中可以知道对那个属性进行修改了，然后修改View的数据。

二、简易版双向数据绑定

<!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>Proxy双向数据绑定大概原理</title>
</head>
<body>
  <div id="app">
    <input type="text" id="inpt"/>
    <span id="txt"></span>
  </div>
  <script>
    var inputDom = document.getElementById("inpt"),
        spanDom = document.getElementById("txt"),
        data = {}
    
    // 更新DOM
    function notifyToUpdateDOM (newVal) {
      inputDom.value = newVal
      spanDom.innerHTML = newVal
    }

    var proxyHandler = {
      get: function(target, property){
        return target[property]
      },
      set: function(target, property, value){
        target[property] = value
        notifyToUpdateDOM(value)
      }
    }
    
    // 创建代理
    var dataProxy = new Proxy(data, proxyHandler)

    // 监听input的input事件
    inputDom.addEventListener("input", function(e){
      // 设置data中的inputModel属性，会触发set方法的调用
      dataProxy.inputModel = e.target.value
    })
  </script>
</body>
</html>

以上简易代码比较适合Model层没有默认数据的时候，如果Model层的inputModel默认有值为：“双向数绑定”；那么如何在页面初始化完成的时候就把Model层的数据显示到View上呢？因此在进行数据绑定之前，需要把View模板进行编译，和Model层的数据进行关联。

三、实现View数据变化映射到Model数据上，初始化的Model数据映射到View上

<!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>Proxy双向数据绑定大概原理</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="text"/>{{text}}
  </div>

  <!-- 此次完成了UI到Model的数据绑定，还没有实现Model到UI的绑定（{{xxx}}处理没有实现） -->
  <script>

    // 参数el：最外层的dom元素，此处案例是app
    // 参数vm：表示Vue的实例
    // 主要处理v-model指令和{{xxx}}，把里面的变量和Vue中的进行映射
    function CompileTemplate(el, vm){
      this.$ele = el
      this.$vm = vm
      this.$fragment = null // 保存重新编译之后的dom结构
    }

    CompileTemplate.prototype = {
      // 修正构造函数的指向
      constructor: CompileTemplate,
      // 返回fragment
      getDocumentFragment: function(){
        if (this.$fragment) {
          return this.$fragment
        } else {
          this.$fragment = this.nodeToFragment()
          return this.$fragment
        }
      },
      nodeToFragment: function(){
        var node = document.getElementById(this.$ele),
            fragment = document.createDocumentFragment(),
            child = null
        
        while(child = node.firstChild){
          this.compileElement(child)
          /*如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,
          然后再插入到新的位置;如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode
          方法复制出一个节点的副本,然后在插入到新位置.
          */
          fragment.appendChild(child)
        }
        return fragment
      },
      // 处理节点信息以及绑定事件
      compileElement: function(node){
        // 匹配{{}}
        var reg = /\{\{(.*)\}\}/g,
            _this = this

        // 元素
        if (node.nodeType === 1) {
          var attributes = node.attributes
          for (var len = attributes.length - 1; len > 0; len--) {
            // 获取v-model绑定的变量
            if (attributes[len].nodeName === 'v-model') {
              // 获取v-model="txt"中的txt
              var name = attributes[len].nodeValue
              // 为input元素绑定input事件，当事件发生时，设置Vue对象中的$data的值
              node.addEventListener("input", function(e){
                // 设置vue对象中data的text中值
                _this.$vm.$data[name] = e.target.value
              })
              // 初始化的时候，需要把Vue对象中的数据赋值给input元素的value
              node.value = _this.$vm.$data[name];
              node.removeAttribute('v-model')
            }
          }
        }
        
        // text
        if (node.nodeType === 3) {
          if(reg.test(node.nodeValue)) {// 获取v-model绑定的属性名 {{text}}
            var name = RegExp.$1.trim(); // 获取匹配到的字符串
            // 初始化的时候，把vue对象data的数据赋值给{{text}}
            node.nodeValue = _this.$vm.$data[name];
          }
        }
      }
    }

    function Vue(options){
      this.$el = options.el
      this.$data = options.data
      // 解析DOM模板，如v-model指令改为input事件，{{xxx}}改为对象中的数据
      var fragmentDOM = new CompileTemplate(this.$el, this).getDocumentFragment()
      // 更新DOM
      document.getElementById(this.$el).appendChild(fragmentDOM)
    }

    var vm = new Vue({
      el: "app",
      data: {
        text: '双向数据绑定'
      }
    })
  </script>

</body>
</html>

四、在案例三的基础上，使用订阅发布模式实现{{xxx}}

<!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>Proxy双向数据绑定大概原理(最终版)</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="text"/>{{text}}
  </div>

  <!-- 此次实现Model到UI的绑定 -->
  <script>

    // 参数el：最外层的dom元素，此处案例是app
    // 参数vm：表示Vue的实例
    // 主要处理v-model指令和{{xxx}}，把里面的变量和Vue中的进行映射
    function CompileTemplate(el, vm){
      this.$ele = el
      this.$vm = vm
      this.$fragment = null // 保存重新编译之后的dom结构
    }

    CompileTemplate.prototype = {
      // 修正构造函数的指向
      constructor: CompileTemplate,
      // 返回fragment
      getDocumentFragment: function(){
        if (this.$fragment) {
          return this.$fragment
        } else {
          this.$fragment = this.nodeToFragment()
          return this.$fragment
        }
      },
      nodeToFragment: function(){
        var node = document.getElementById(this.$ele),
            fragment = document.createDocumentFragment(),
            child = null
        
        while(child = node.firstChild){
          this.compileElement(child)
          /*如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,
          然后再插入到新的位置;如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode
          方法复制出一个节点的副本,然后在插入到新位置.
          */
          fragment.appendChild(child)
        }
        return fragment
      },
      // 处理节点信息以及绑定事件
      compileElement: function(node){
        // 匹配{{}}
        var reg = /\{\{(.*)\}\}/g,
            _this = this

        // 元素
        if (node.nodeType === 1) {
          var attributes = node.attributes
          for (var len = attributes.length - 1; len > 0; len--) {
            // 获取v-model绑定的变量
            if (attributes[len].nodeName === 'v-model') {
              // 获取v-model="txt"中的txt
              var name = attributes[len].nodeValue
              // 为input元素绑定input事件，当事件发生时，设置Vue对象中的$data的值
              node.addEventListener("input", function(e){
                // 设置vue对象中data的text中值
                _this.$vm.$data[name] = e.target.value
              })
              // 初始化的时候，需要把Vue对象中的数据赋值给input元素的value
              // node.value = _this.$vm.$data[name];
              new Watcher(_this.$vm, node, name, "value")
              node.removeAttribute('v-model')
            }
          }
        }
        
        // text
        if (node.nodeType === 3) {
          if(reg.test(node.nodeValue)) {// 获取v-model绑定的属性名 {{text}}
            var name = RegExp.$1.trim(); // 获取匹配到的字符串
            // 初始化的时候，把vue对象data的数据赋值给{{text}}
            // node.nodeValue = _this.$vm.$data[name];
            new Watcher(_this.$vm, node, name, "nodeValue")
          }
        }
      }
    }

    /* 对model层的数据进行劫持，model改变时，需要通知修改UI的数据，此处使用Proxy处理（兼容性不好），
    也可以使用Object.defineProperty处理；Proxy虽然可以动态对被代理的对象进行属性劫持，但是对Model到
    UI这条路径还是无法进行双向数据绑定，因为模板先编译了；所以在真正的Vue.js中需要通过this.$set()设置
    动态属性，这样才能做到响应式
    */
    function observe (obj) {
      var publish = new Publish()
      var dataProxy = new Proxy(obj, {
        // 在首次编译模板的时候，创建观察者时，触发vm.$data中属性的get方法
        get: function(target, property){
          // 把观察者放入发布者中，Publish类的属性
          if (Publish.target) {
            publish.addSubscribe(Publish.target)
          }
          return target[property]
        },
        set: function(target, property, value){
          if (target[property] === value) {
            return
          }
          target[property] = value
          // 通知更新UI
          publish.notify()
        }
      })
      return dataProxy;
    }
    
    // 发布者
    function Publish () {
      // 保存观察者
      this.subscribes = []
    }
    Publish.prototype = {
      constructor: Publish,
      // 保存观察者
      addSubscribe: function (sub){
        // 不存在
        if (this.subscribes.indexOf(sub) === -1) {
          this.subscribes.push(sub)
        }
      },
      // Model改变了需要更新UI
      notify: function () {
        this.subscribes.forEach(function(sub) {
          sub.update()
        })
      }
    }
    
    // 观察者：绑定Model的数据到UI中对应的DOM节点属性中
    // 参数vm：Vue对象的实例
    // 参数node：需要进行数据绑定的DOM对象
    // 参数name：Vue对象$data的属性名称
    // 参数type：DOM元素需要设置数据的属性。如：value（input元素），nodeValue（text元素的内容）
    function Watcher (vm, node, name, type) {
      // 在发布者身上绑定一个当前唯一的观察者对象(类似class中的static，属于类属性)
      Publish.target = this
      this.vm = vm
      this.node = node
      this.name = name
      this.type = type
      this.update() // 关键点
      Publish.target = null
    }

    Watcher.prototype = {
      constructor:  Watcher,
      // 把Model中的数据绑定到UI中
      update: function(){
        // 此处会触发vm对象中的get方法
        this.node[this.type] = this.vm.$data[this.name]
      }
    }

    function Vue(options){
      this.$el = options.el
      this.$data = observe(options.data)
      // 解析DOM模板，如v-model指令改为input事件，{{xxx}}改为对象中的数据
      var fragmentDOM = new CompileTemplate(this.$el, this).getDocumentFragment()
      // 更新DOM
      document.getElementById(this.$el).appendChild(fragmentDOM)
    }

    var vm = new Vue({
      el: "app",
      data: {
        text: '双向数据绑定'
      }
    })
  </script>

</body>
</html>

 五、参考的文章：https://blog.csdn.net/tangxiujiang/article/details/79594860

　

 

标签
input
vue
fragment
dom对象
dom
虚拟机
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!