Vue双向数据绑定简易实现

Posted llcdxh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue双向数据绑定简易实现相关的知识,希望对你有一定的参考价值。

一、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

 

 

以上是关于Vue双向数据绑定简易实现的主要内容,如果未能解决你的问题,请参考以下文章

vue双向数据绑定简易demo

JS源码分析│简易mvvm库的设计实现

VUE 简易版双向绑定渲染界面

Vue2从入门到精通详解Vue数据双向绑定原理及手动实现双向绑定

vue双向绑定原理源码解析

vue双向绑定原理