vue进阶测试——数据双向绑定原理探究

朴灿烈づ我的快乐病毒、 2021-09-15 22:04 260阅读 0赞

本课题研究承接浏览器的渲染机制一文，写文章前感谢一下趣链大佬的面试点播，虽然不知道听来了什么，哈哈~

依旧是放上详细的[参考链接][Link 1]

用了vue几个月后，写前端的思维方式逐渐从操作dom的方式中解脱出来，现在思考问题的时候，几乎都是带着如何以数据驱动模板的方式思考，因此，了解一下数据是如何驱动模板是一件十分必要的事情。

关于双向绑定一词(mvvm)，可以分开来解读，即：如何监听数据改变，和如何监听dom事件。监听dom事件，如input的输入事件，你可以用原生的addEventListener，或者在dom节点上绑定oninput事件。那么如何监听数据的变化呢？如果从代码的角度出发，大概可以有这样一种猜想：

第一步：记录每一个数据的旧值

第二步：用一个定时器不断地监听这个值的新值（不管数据有没有更新），并和旧值进行比较。

第三步：当值发生改变，操作对应的dom节点。

这三步实现起来并不复杂，就是有点蠢。

扯淡到此为止，进入正题，vue中是如何实现数据双向绑定的 —— defineProperty

Object.defineProperty(obj, prop, descriptor)

obj:要在其上定义属性的对象。

prop:要定义或修改的属性的名称。

descriptor:将被定义或修改的属性描述符。

没有用过的程序猿到这里已经是一脸懵逼了，下面我举个例子分别解释下这三个参数

首先是obj，顾名思义，这个参数是个对象，可以是： 身份信息 = \{ 性别:'女'，姓名:'晓甜甜'，住址:‘XXX公寓‘ \}

然后是prop，这是你要关注的属性，可以是 '性别'

最后这个descriptor比较复杂，你可以理解为，你关注这个对象的某个属性后，要对这个属性做什么事情，最常见的有，你要获取这个对象的属性的值（get），或者你想要修改这个对象的属性的值（set），来看一段代码

let person = {
        'sex':'girl',
        'name':'晓甜甜',
        'address':'XXX公寓'
      }
      function observe(obj,prop,val){
        Object.defineProperty(obj,prop,{
          enumerable: true,
          configurable: true,
          get:function(){
            return '此人住在'+val
          },
          set:function(newVal){
            val = newVal
            console.log('此人换新家了，现在在' + newVal)
          }
        })
      }
      observe(person,'address',person['address'])
      console.log(person.address)
      person.address = 'YYY小区'
     
     //控制台打印
     //此人住在XXX公寓
     //此人换新家了，现在在YYY小区

结果如上面说的，当你想要监听person的address属性，并且重写了他的get和set方法后，控制台会打印和理论上不同的结果，你这种方法称为数据劫持，这是数据驱动模板的核心部分，也就是你已经可以成功监听到数据的变化了，并且在数据变化触发了set后，你可以重写里面的方法，干一些你想干的事情，比如更新dom。

注意，这里我用了observe封装了这部分代码，来看如果不用observe会发生什么事情（写代码，尽量不要偷懒，除非你很熟）

let person = {
        'sex':'girl',
        'name':'晓甜甜',
        'address':'XXX公寓'
      }
      Object.defineProperty(person,'address',{
        enumerable: true,
        configurable: true,
        get:function(){
          return '此人住在'+ this.address
        },
        set:function(newVal){
          val = newVal
          console.log('此人换新家了，现在在' + newVal)
        }
      })
    
      observe(person,'address',person['address'])
      console.log(person.address)
      person.address = 'YYY小区'
      
     //控制台直接报错了！！！！

这里我偷了个懒，没错我一开始为了做演示就是这样写的，我利用了get回调中的this指向person，想要通过this.address去访问person的address，这里就造成了一个死循环，你在访问当前属性的时候的访问回调里又访问了当前属性，就卡死了，当然浏览器比较厉害，他会帮你发现这个错误，直接给你报错，同时这个错误也验证了，一旦你要访问该对象的某个属性，不管什么情况下他都会触发get回调，同理，当你要改变这个值的时候，他就会触发set，你可以在set回调里去改变这个属性的值，同样会发生死循环。

最后输出一下person对象，可以看到，address的get和set已经被劫持了。

![70][]

数据双向绑定的数据监听已经搞定了，下面来了解一下如何实现一个简单的双向绑定。先上一张图，看一下整体设计思路。

![70 1][]

先来解释一下上面这张图，理一下整体设计思路。

第一步：我们需要一个observer，他可以帮我们监听所有数据。我们还需要一个compile，他可以帮我们解析虚拟dom的模板，如v-on,v-if,\{ \{\}\}等，你可以用正则的方式去匹配这些特殊字符。

第二步：我们已经监听到了数据，我们也有了模板解析器，这时候我们需要将数据和模板联动起来，因此我们需要一个订阅者watcher，在数据和模板初始化的他能将这两者联系起来，具体如何联系，下面会详细说明。

确立了大致的设计思路后，来一个个实现这些组件，并实现一个简易的mvvm。

### 1.实现observer ###

首先，observer的功能应该是监听所有数据，实现所借助的工具是Object.defineProperty(obj, prop, descriptor)，在刚才的基础上，用递归的方法，来实现一个对象所有属性的监听。

let person = {
        'sex':'girl',
        'name':'晓甜甜',
        'address':'XXX公寓',
        'parent':{
          'father':'小明',
          'mother':'李红'
        }
      }
     //监听数据对象的所有属性值
      function observe(data){
        if(!data||typeof(data)!=='object'){
          return
        }
        // Object.keys(data) 和 for...in的遍历差不多，该函数返回一个对象包含的所有属性的数组
        Object.keys(data).forEach((key)=>{
          dataHijacking(data,key,data[key]) //用数据劫持改写get和set方法
        })
      }
    
      function dataHijacking(obj,prop,val){
        observe(val) //递归监听
        Object.defineProperty(obj,prop,{
          enumerable: true,
          configurable: true,
          get:function(){
            console.log('get val:'+val)
            return val
          },
          set:function(newVal){
            if(val === newVal){
              return
            }
            val = newVal
            console.log('set newVal')
          }
        })
      }
    
      observe(person)
      let receive = person.parent.father //触发两次get
      person.parent.mother = '小红' //触发一次get，和一次set

###    2.实现dependence ###

在思路说明中，watcher用于连接数据更新和模板更新。而Dep（dependence的缩写）则用于watcher和数据更新的关联。为什么需要Dep这个媒介呢？先不说原理，先来看个场景说明：

observer在一家研究所工作，他负责所有研究数据的监管工作，一旦有一项研究数据发生了变更，他就需要通知所有关注这项研究的订阅者（watcher），数据发生了变更，具体怎么办你们自己看着办。那么，订阅者如何加入这项研究呢，或者说，observer观测到数据变更后应该通知哪些watcher呢？这个时候就需要一个管理员（dep），统一管理订阅者，订阅者通过加入管理员的名单，来和数据源的更新进行沟通。一旦有数据发生变更，只需要通知管理员（dep），管理员负责通知所有订阅者。

下面是dependence的实现思路

在上面的代码中，dependence包含一个用于存储订阅者的数组，订阅者需要通过触发数据的get回调将自己添加到某个数据的管理员（dep）中去，至于如何触发，会在watcher的实现中说明，当数据更新时，会通过dep通知订阅该数据的所有wacher，需要调用watcher的更新函数。

### 3.实现watcher ###

我们知道watcher可以收到属性的变化通知并执行相应的函数，从而更新视图。在这之前，我们应当将watcher加入到对应的dep维护的数组中去，才能收到通知，在dep的实现思路中，我们是通过触发data的get回调来实现添加订阅者的操作的，来看一下具体代码和注释。

function dataHijacking(obj,prop,val){
        observe(val) //递归监听
        let dep = new dependence()
        Object.defineProperty(obj,prop,{
          enumerable: true,
          configurable: true,
          get:function(){
            if(dependence.target){
              dependence.addwatcher(dep.target) //通过触发get回调添加订阅者watcher
            }
            return val
          },
          set:function(newVal){
            if(val === newVal){
              return
            }
            val = newVal
            dep.notify() //数据更新时通过依赖函数通知所有订阅者
          }
        })
      }
    
     function watcher(vm,key,callback){
        this.callback = callback //执行回调，这里可以动态操作相关dom
        this.vm = vm  //这个参数一般会保留全局的vm，用于访问data
        this.key = key //确定自己是哪个数据的订阅者
        this.value = this.get() //通过调用这个方法将自己添加到依赖数组中去，同时缓存旧值
      }
      watcher.prototype = {
        update:function(){
          let value = this.vm.data[this.key] //一般我们都会操作实例vue上挂载的data
          let oldVal = this.value //初始化时候的旧值
          if(oldVal!==value){
            //如果这两个值不相等，才触发回调，也就是dom操作，这有利于优化性能
            this.value = value
            this.callback.call(this.vm, value, oldVal)
          }
        },
        get:function(){
          dependence.target = this //将自己缓存，准备添加到依赖中去
          let value = this.vm.data[this.key] //这个操作会触发observe的get
          dependence.target = null // 释放自己
          return value
        }
      }

###  4.实现一个数据驱动模板的单向绑定 ###

数据双向绑定的事情到上面三步完成后已经完成一半了，也就是数据的单向绑定，来写个demo，演示一下成果。

<div id="demo"></div>
    <script type="text/javascript">
      let person = {
        'sex':'girl',
        'name':'晓甜甜',
        'address':'XXX公寓',
        'parent':{
          'father':'小明',
          'mother':'李红'
        }
      }
    
      function mvvm(data,el,key){
        this.data = data
        observe(data)
        el.innerHTML = this.data[key] //初始化模板
        new watcher(this,key,function(newValue){
          el.innerHTML = newValue
        })
        return this //返回实例，主要是为了可供全局查看当前实例
      }
      
      let el = document.getElementById('demo')
      let vm = new mvvm(person,el,'name')
      setTimeout(function(){
        vm.data.name = '饭甜甜'
      },2000)
     
      //2s 后div的innerHTML从 晓甜甜 --> 饭甜甜

在实际使用过程中，我们希望通过访问vm.name而不是vm.data.name的方式去访问属性值，在这里可以优化一下，也就是重写mvvm()中data的set和get即可。

function mvvm(data,el,key){
        let self = this
        this.data = data
        observe(data)
        Object.keys(data).forEach(function(key) {
            self.proxyKeys(key)  // 绑定代理属性
        })
        el.innerHTML = this.data[key]
        new watcher(this,key,function(newValue){
          el.innerHTML = newValue
        })
        return this //返回实例，主要是为了可供全局查看当前实例
      }
      
      mvvm.prototype = {
        proxyKeys:function(key){
          let self = this
          Object.defineProperty(this,key,{
            enumerable: false,
            configurable: true,
            get: function proxyGetter() {
                return self.data[key]
            },
            set: function proxySetter(newVal) {
                self.data[key] = newVal
            }
          })
        }
      }
      let el = document.getElementById('demo')
      let vm = new mvvm(person,el,'name')
      setTimeout(function(){
        vm.name = '饭甜甜'
      },2000)

### 5.实现compile ###

complime的作用是解析虚拟dom树（当然现在还没有引入虚拟dom的概念）中的vue指令，如v-on，v-model之类的，然后将解析完成后，通过watcher监听数据初始化及其变化，最终通过回调函数更改dom数据。这样observer -- watcher -- complime就串联起来了。

最终代码：

<div id="demo">
      <div>{
       {name}}</div>
      <div>{
       {address}}</div>
    </div>
    <script type="text/javascript">
      let person = {
        'sex':'girl',
        'name':'晓甜甜',
        'address':'XXX公寓',
        'parent':{
          'father':'小明',
          'mother':'李红'
        }
      }
      //监听数据对象的所有属性值
      function observe(data){
        if(!data||typeof(data)!=='object'){
          return
        }
        // Object.keys(data) 和 for...in的遍历差不多，该函数返回一个对象包含的所有属性的数组
        Object.keys(data).forEach((key)=>{
          dataHijacking(data,key,data[key]) //用数据劫持改写get和set方法
        })
      }
    
      function dataHijacking(obj,prop,val){
        observe(val) //递归监听
        let dep = new dependence()
        Object.defineProperty(obj,prop,{
          enumerable: true,
          configurable: true,
          get:function(){
            if(dependence.target){
              dep.addwatcher(dependence.target) //通过触发get回调添加订阅者watcher
            }
            return val
          },
          set:function(newVal){
            if(val === newVal){
              return
            }
            val = newVal
            dep.notify() //数据更新时通过依赖函数通知所有订阅者
          }
        })
      }
    
      // 依赖，用于联系watcher和observer
      function dependence(){
        this.watchers = [] //用一个数组用于存储watcher
      }
      dependence.prototype = {
        addwatcher:function(watcher){
          this.watchers.push(watcher)
        },
        notify:function(){
          this.watchers.forEach((watcher)=>{
            watcher.update() //通知所有订阅者触发更新函数
          })
        }
      }
      dependence.target = null
    
      function watcher(vm,key,callback){
        this.callback = callback //执行回调，这里可以动态操作相关dom
        this.vm = vm  //这个参数一般会保留全局的vm，用于访问data
        this.key = key //确定自己是哪个数据的订阅者
        this.value = this.get() //通过调用这个方法将自己添加到依赖数组中去，同时缓存旧值
      }
      watcher.prototype = {
        update:function(){
          let value = this.vm.data[this.key] //一般我们都会操作实例vue上挂载的data
          let oldVal = this.value //初始化时候的旧值
          if(oldVal!==value){
            //如果这两个值不相等，才触发回调，也就是dom操作，这有利于优化性能
            this.value = value
            this.callback.call(this.vm, value, oldVal)
          }
        },
        get:function(){
          dependence.target = this //将自己缓存，准备添加到依赖中去
          let value = this.vm.data[this.key] //这个操作会触发observe的get
          dependence.target = null // 释放自己
          return value
        }
      }
    
      function compile(el,vue){
        this.vm = vue
        this.compileElement(el)
      }
      compile.prototype = {
        compileElement:function(el){
          var childNodes = el.childNodes;
          var self = this;
          [].slice.call(childNodes).forEach(function(node) {
            var reg = /\{\{(.*)\}\}/;
            var text = node.textContent;
            if (self.isTextNode(node) && reg.test(text)) {  // 判断是否是符合这种形式{
       {}}的指令
              self.compileText(node, reg.exec(text)[1]);
            }
            if (node.childNodes && node.childNodes.length) {
              self.compileElement(node);  // 继续递归遍历子节点
            }
          });
        },
        compileText:function(node, exp) {
          var self = this;
          var initText = this.vm[exp];
          this.updateText(node, initText);  // 将初始化的数据初始化到视图中
          new watcher(this.vm, exp, function (value) {  // 生成订阅器并绑定更新函数
            self.updateText(node, value);
          });
        },
        updateText:function (node, value) {
          node.textContent = typeof value == 'undefined' ? '' : value;
        },
        isTextNode: function (node) {
          return node.nodeType === 3
        }
      }
      
    
      function mvvm(data,el){
        let self = this
        this.data = data
        observe(data)
        Object.keys(data).forEach(function(key) {
            self.proxyKeys(key)  // 绑定代理属性
        })
        new compile(el,this)
        return this //返回实例，主要是为了可供全局查看当前实例
      }
      
      mvvm.prototype = {
        proxyKeys:function(key){
          let self = this
          Object.defineProperty(this,key,{
            enumerable: false,
            configurable: true,
            get: function proxyGetter() {
                return self.data[key]
            },
            set: function proxySetter(newVal) {
                self.data[key] = newVal
            }
          })
        }
      }
    
      let el = document.getElementById('demo')
      let vm = new mvvm(person,el)
      setTimeout(function(){
        vm.name = '饭甜甜'
      },2000)
    </script>

FBI warning：本文中提到的双向数据绑定是有问题的，因为这里的compile维护的是真实的dom树，也就是说，如果你用for循环修改一万次vm.name，那么dom就会被更新一万次，因为他会触发dom.node.contentText   change一万次。事实上，在vue中，watcher如果检测到同一个值在一个'事件周期'中被修改多次，只触发最后一次，并且先去修改虚拟dom，并一次性渲染（红色字体部分是结合官网文档的一些个人猜想，还有待探究源码证明）。不管怎么说，双向数据绑定的原理差不多就是这样，有兴趣深入的可以继续关注后续文章。

[Link 1]: https://www.cnblogs.com/libin-1/p/6893712.html
[70]: /images/20210813/275b8e32e8be4a8b802760569b3c5395.png
[70 1]: /images/20210813/fca25ac73ee4406b9d2abe055bdd76af.png