答应我，这次一定要彻底搞懂Vue2双向数据绑定原理

北方银时
4,936 阅读7分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

前言

许久不见，甚是想念~😄各位掘友们大家好，我是北方银时，不知不觉已经快四个月没有写文章了，不过确实是学期末那一段时间比较忙一直在准备考试所以无暇顾及更文了，暑假也悄咪咪搁了一个月，我这不是在准备一件大事嘛 ~ 没错，本人决定在八月中旬的时候第一次尝试投一波实习简历（希望有公司收留我呜呜呜），因此七月份就没日没夜的系统复习了一遍至今为止学过的前端知识点，刷题的同时顺便解决一下学校里的项目。真的看着小伙伴们一个接一个出去晒旅游朋友圈我也是芭比Q了！！！

看了十几篇各大厂的面经还有一些掘金社区里大佬的面试考点总结，如果你是Vue技术栈的话，Vue响应式/双向数据绑定原理被问到的可能性还是很高的，有图有真相👇

image.png

image.png

所以说，想去大厂面试我认为理解Vue双向数据绑定原理还是很重要的，在面试之前要做好万全的准备，也许新手小白暂时没有能力通读源码（没错，说的就是我这类人），但是根据他人的经验分享加上自己的理解写一个简单的demo还是可以的。为了帮助大家理解Vue响应式的基本原理，我们将手写实现一个低配版的Vue2。虽说是低配版，但是俗话说麻雀虽小，五脏俱全，这个低配的内容也不是很少呐，毕竟还是要满足程序能跑这个程序员基本的职业素养。

dog.jpg

⭐读完本文，你应该会理解以下几个关键知识点：

  1. 响应式基础
  2. 设计模式之发布订阅模式
  3. 设计模式之观察者模式
  4. 数据劫持defineProperty API
  5. 依赖收集原理

阅读之前建议你具备以下基础：

  • ES6之class面向对象语法
  • Vue的基本使用
  • 一颗热爱前端的❤

顶层设计

先说结论Vue2的响应式是数据劫持结合观察者模式实现的

俗话说站的高望的远，我们先不一上来就手撕代码，先从一个对象的顶层设计开始讲起，有个全局的总览，然后你可以倒一杯卡布奇诺☕一边听我抽丝拨茧的慢慢分析一边悄悄代码理解消化~ 这里先贴个图

image.png 下面对每个对象的功能职责做一个阐述：

  • Vue实例

    • 负责接收初始化参数，通过options保存选项的数据
    • 负责把data中的属性注入到Vue实例，转化成getter和setter
    • 负责调用observer监听data中所有属性的变化
    • 负责调用Compiler解析指令、差值表达式

  • Observer

    • 负责把Vue data选项中的属性转换成响应式
    • data中的某个属性如果是对象 要递归转换成响应式数据
    • 数据变化发送通知 通知发布者Dep

  • Compiler

    • 负责编译模板，解析指令、差值表达式
    • 负责页面的首次渲染
    • 当数据变化后重新渲染视图

  • Dep

    • 收集依赖 添加观察者
    • 通知notify所有观察者调用自身的update方法更新视图

  • Watcher

    • 当数发生变化时触发依赖，Dep通知所有的Watcher更新视图
    • Watcher通过new关键字实例化的时候让Dep.target指向自己(原因后面会讲)

以上是对我们要设计的低配版Vue的一个概览，总共有五个关键对象，各自实现了不同的方法，在双向数据绑定或响应式原理这个宏观概念中各司其职，现在也许你会一头雾水，但是没关系，咖啡泡好了吗，各位看官，接下来请细品~

数据驱动

响应式、双向数据绑定、数据驱动这三个词在我们学习一开始学习Vue的时候应该是耳熟能详了，那大家能否去用自己的话描述一下这三个概念呢？哦对了，这里引出一个平时容易忽略的点，响应式和双向数据绑定严格来讲不能混为一谈，以下是我的描述：

  • 数据驱动

    数据驱动是MVVM框架的核心，也是Vue最独特的特性之一，开发中我们仅需要关注数据本身，不需要关心数据是如何渲染到视图。

  • 响应式

    数据模型仅仅是普通的JS对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率。

  • 双向数据绑定

    数据改变，视图改变；视图改变，数据改变

    v-model是双向数据绑定的语法糖

发现差别了吗？响应式侧重单向，即数据到视图的单向流动，而双向数据绑定则侧重数据与视图之间的双向流动。

实现Vue2响应式的核心原理defineProperty

我们首先看一下MDN对于此API的解释:

Object.defineProperty()  方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。该方法允许精确地添加或修改对象的属性。

这个方法相当于给一个对象添加某个属性，并劫持了该对象的这个属性（相当于监听事件），并且让这个属性具有对应的getter和setter方法，当访问该属性的时候会调用getter，修改该属性的值的时候会调用setter

我们创建一个index.html文件 写入如下代码测试

<!DOCTYPE html>
<html>
<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>Vue2.x defineProperty()模拟数据响应式</title>
</head>
<body>
  <div id="app">
    hello
  </div>
  <script>
    let data={
      msg:'hello',
      count:10
    }

    let vm={} //vm模拟new Vue创建的实例对象 要将data的属性劫持到vm上

    proxyData(data)

    function proxyData(data){
      //遍历data的key 把data中的所有属性转换成vm的getter/setter
      Object.keys(data).forEach(key=>{
        Object.defineProperty(vm,key,{
          enumerable:true,
          configurable:true,
          get(){
            console.log('get: ',key,data[key])
            return data[key]
          },
          set(newVal){
            console.log("set: ",key,newVal)
            if(newVal===data[key]){
              return
            }
            data[key]=newVal
            //更新DOM
            document.querySelector('#app').textContent=data[key]
          }
        })
      })
    }
    vm.msg='aaa' //访问vm的属性msg，观察setter结果
  </script>
</body>
</html>

当我们改变msg的属性值的时候观察控制台输出：

image.png 可见setter被调用，打印了更新后的结果aaa，DOM视图发生变化

发布订阅模式

在软件架构，发布-订阅是一种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特定的接收者（称为订阅者）。而是将发布的消息分为不同的类别，无需了解哪些订阅者（如果有的话）可能存在。同样的，订阅者可以表达对一个或多个类别的兴趣，只接收感兴趣的消息，无需了解哪些发布者（如果有的话）存在。

以上是wiki百科对于发布订阅模式的定义，简单来讲在发布订阅模式中，发布者和订阅者是相互隔离的，互相不知道对方的存在，这两者的联系是通过一个“事件中心”，当某个任务完成，事件中心就发布publish一个通知，其他任务可以向“事件中心”订阅（subscribe）这个通知，从而知道自己什么时候执行。

触类旁通：讲到这你或许明白了，Vue组件通信中的prop和emit以及引入事件总线eventBus的方法的思想就是基于发布订阅模式的。

我们实现一个简单的事件中心

<!DOCTYPE html>
<html>
<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>发布订阅模式之实现事件中心</title>
</head>
<body>
  <script>
    // 事件触发器
    class EventEmitter{
      constructor(){
        // {'click':[fn1,fn2],'change':[fn]}
        this.subs=Object.create(null)
      }

      // 注册事件
      $on(eventType,handler){
        this.subs[eventType]=this.subs[eventType]||[]
        this.subs[eventType].push(handler)
      }

      //触发事件
      $emit(eventType){
        if(this.subs[eventType]){
          this.subs[eventType].forEach(handler=>{
            handler()
          })
        }
      }
    }

    //测试
    let em=new EventEmitter()
    em.$on('click',()=>{
      console.log('click1')
    })

    em.$on('click',()=>{
      console.log('click2')
    })

    em.$emit('click')
  </script>
</body>
</html>

代码应该不难理解，$emit支持绑定多个事件，将多个事件用一个数组subs存储，$on遍历subs数据依次执行回调。看输出结果：

image.png

观察者模式

这里再讲一个和发布订阅模式类似的设计模式观察者模式，因为前文有提到Watcher这个对象，Vue的响应式机制其实也参考了观察者模式，观察者模式和发布订阅模式的区别在于：观察者模式中观察者也称订阅者，观察者模式移除了“事件中心”，发布者和订阅者之间不是相互隔离的，即发布者需要知道订阅者的存在。

下面我们手写一个观察者模式，目标如下：

  • 观察者（订阅者）--Watcher
    • update() 当事件发生时，所有观察者调用update()方法更新视图，update()方法由发布者调用。
  • 目标（发布者） --Dep
    • subs[] 存储所有观察者
    • addSub() 添加观察者
    • notify() 当事件发生时，调用所有观察者的update()
<!DOCTYPE html>
<html>
<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>观察者模式</title>
</head>
<body>
  <script>
    //发布者(目标)
    class Dep{
      constructor(){
        //存储所有的订阅者（观察者）
        this.subs=[]
      }

      //添加订阅者
      addSub(sub){
        if(sub&&sub.update){
          this.subs.push(sub)
        }
      }

      //发布通知
      notify(){
        this.subs.forEach(sub=>{
          sub.update()
        })
      }
    }

    //订阅者(观察者)
    class Watcher{
      update(){
        console.log('update')
      }
    }

    //测试
    let dep=new Dep()
    let watcher=new Watcher()

    dep.addSub(watcher)

    dep.notify()
  </script>
</body>
</html>

怎么样代码也是非常之简单呐，看输出结果：

image.png

这里再做个总结对比：

观察者没有事件中心（区别于发布订阅模式，发布订阅模式有事件中心，其目的是隔离发布者和订阅者去除他们之间的依赖；而观察者模式没有事件中心，且发布者需要知道订阅者的存在）

实现一个低配版Vue

好啦有了前面的铺垫，相信接下来的手撕代码的过程应该会顺畅很多，坚持一下我们这次一定要彻底搞懂双向数据绑定原理，直接手写Vue🌈

QQ图片20220809133433.gif

创建文件目录

image.png

初始化代码

js文件夹下的所有文件为空

test.html中写入如下初始化代码

<!DOCTYPE html>
<html>
<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></title>
</head>
<body>
  <div id="app">
    <h1>差值表达式</h1>
    <h3>{{msg}}</h3>
    <h3>{{count}}</h3>
    <h1>v-text</h1>
    <div v-text="msg"></div>
    <h1>v-model</h1>
    <input type="text" v-model="msg">
    <input type="text" v-model="count">
  </div>
  <script src="./js/vue.js"></script>
  <script>
    let vm=new Vue({
      el:'#app',
      data:{
        msg:'Hello Vue',
        count:100,
        person:{
          name:"zs"
        }
      }
    })
  </script>
</body>
</html>

此时页面长这样，为了避免出现个别疑问我还是想强调一下：别误会，script中引入的vue.js此时还是空的，我们是要动手实现一个vue，所有的代码都是手撕，因此此时就算是使用了正确的vue语法，还没有响应式的。

image.png

一个基本的Vue构造函数

vue.js

class Vue {
  constructor(options) {
    //1.通过属性保存传入的options数据
    this.$options = options || {}
    this.$data = options.data
    this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el

    //2.把data中的成员转换成getter和setter，注入到vue实例中
    this._proxyData(this.$data)
  }

  _proxyData(data) {
    Object.keys(data).forEach(key => {
      Object.defineProperties(this, key, {
        enumerable: true,
        configurable: true,
        get() {
          return data[key]
        },
        set(newVal) {
          if (newVal === data[key]) {
            return
          }
          data[key] = newVal
        }
      })
    })
  }
}

此时我们仅仅劫持了data的第一层属性，如果data的属性中有对象的话，这些对象的属性没有被劫持因此不具备响应式，因此我们要递归的遍历data中的所有属性，让他们都被劫持到。

创建Observer对象实现数据劫持

class Observer {
  constructor(data) {
    this.walk(data)
  }
  walk(data) {
    //1.判断data是否是对象
    if (!data || typeof data !== 'object') {
      return
    }
    //2.遍历data对象的所有属性
    Object.keys(data).forEach(key => {
      this.defineReactive(data, key, data[key])
    })

    defineReactive(obj, key, val){
      let that = this

      //如果val不是对象就不做任何处理 是对象就递归调用defineReactive
      this.walk(val)

      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
          return val
        },
        set(newVal) {
          if (newVal === val) {
            return
          }
          val = newVal
          that.walk(val) //当val改变时 确保新值也是响应式
        }
      })
    }
  }
}

完善一下Vue的构造函数

//3. 调用observer对象，监听数据变化
    new Observer(this.$data)

到目前为止，data中所有的属性经过层层递归实现了数据劫持，都有getter和setter了，但是我们知道一个页面上可能有很多地方都使用到了data的某个属性数据，因此如何对页面上多处出现的属性数据进行统计并且当数据发送变化时更新视图就是依赖收集该做的事情了。而【依赖收集】机制的核心思想恰好就是我们前面提到的观察者模式（也有人说是发布订阅模式，但我觉得并不准确）。下面我们来实现⭐依赖收集⭐

依赖收集

发布者Dep

Dep.js

Dep对象比较简单，维护一个subs数组存储所有的观察者，notify()发送通知让所有观察者调用自身的update()去触发视图的更新。

class Dep {
  constructor() {
    this.subs = [] //存储所有的观察者  
  }
  //添加观察者
  addSub(sub) {
    this.subs.push(sub)
  }
  //发送通知
  notify() {
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}

订阅者Watcher

class Watcher {
  constructor(vm, key, cb) {
    //指向vue实例
    this.vm = vm
    //data中的属性名
    this.key = key
    //回调函数负责更新视图
    this.cb = cb

    //把watcher对象记录到Dep类的静态属性target
    Dep.target = this
    //触发get方法，在get方法中会调用addSub
    this.oldValue = vm[key]
    Dep.target = null
  }

  //当数据发生变化时更新视图
  update() {
    let newValue = this.vm[this.key]
    if (this.oldValue === newValue) {
      return
    }
    this.cb(newValue)
  }
}

我们现在只是有了观察者和发布者，但是没有将它们和我们的data关联起来，如何关联呢？

关联data

还记得我们在Observer中我们递归调用了defineReactive()来进行数据劫持吗?现在我们继续去完善defineReactive()

defineReactive(obj, key, val){
      let that = this

      //负责收集依赖并发送通知
      let dep = new Dep()

      //如果val不是对象就不做任何处理 是对象就递归调用defineReactive
      this.walk(val)

      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
          return val
        },
        set(newVal) {
          if (newVal === val) {
            return
          }
          val = newVal
          that.walk(val) //当val改变时 确保新值也是响应式
          //发送通知，通知观察者更新视图
          dep.notify()
        }
      })
    }

这里在defineReactive()中为每个属性创建了Dep发布者实例，而这里巧妙利用了JS的闭包特性 ，因此data中每一个属性(包括内层嵌套属性)都维护自己私有的Dep实例。此时我们还差观察者Watcher没有考虑到，一个属性的所有Watcher应该都是由Dep的subs[]来存储的。Dep如何去收集所有的Watcher呢？

Compiler

在收集Watcher之前，我们先创建Compiler对象，负责解析页面的指令、文本节点、元素节点。

class Compiler {
  constructor(vm) {
    this.el = vm.$el
    this.vm = vm
    this.compile(this.el)
  }
  //判断元素是否是指令
  isDirective(attrName) {
    return attrName.startsWith('v-')
  }
  //判断节点是否是文本节点
  isTextNode(node) {
    return node.nodeType === 3
  }
  //判断节点是否是元素节点
  isElementNode(node) {
    return node.nodeType === 1
  }
  //编译模板，处理文本节点和元素节点
  compile(el) {
    let childNodes = el.childNodes
    Array.from(childNodes).forEach(node => {
      //处理文本节点
      if (this.isTextNode(node)) {
        this.compileText(node)
      } else if (this.isElementNode(node)) {
        this.compileElement(node)
      }

      //判断node节点是否有子节点 如果有子节点则要递归调用compile
      if (node.childNodes && node.childNodes.length) {
        this.compile(node)
      }
    })

    //编译文本节点，处理差值表达式
    compileText(){ }
    //编译元素节点，处理指令
    compileElement(){ }

  }

下面我们接着完善compileText()和conpileElement()

//编译文本节点，处理差值表达式
 compileText(node) {
   let reg = /\{\{(.+?)\}\}/
   let value = node.textContent
   if (reg.test(value)) {
     let key = RegExp.$1.trim()
     node.textContent = value.replace(reg, this.vm[key])

     //创建watcher对象，当数据变化时更新视图
     new Watcher(this.vm, key, (newValue) => {
       node.textContent = newValue
     })
   }
 }

 //编译元素节点，处理指令
 compileElement(node) {
   //遍历所有属性节点
   Array.from(node.attributes).forEach(attr => {
     //判断是否是指令
     let attrName = attr.name
     if (this.isDirective(attrName)) {
       attrName = attrName.substr(2)
       let key = attr.value
       this.update(node, key, attrName)
     }
   })
 }

 update(node, key, attrName) {
   let updateFn = this[attrName + 'Updater']
   updateFn && updateFn.call(this, node, this.vm[key], key)
 }

 //处理v-text指令
 textUpdater(node, value, key) {
   node.textContent = value
   new Watcher(this.vm, key, (newValue) => {
     node.textContent = newValue
   })
 }

 //v-model
 modelUpdater(node, value, key) {
   node.value = value
   new Watcher(this.vm, key, (newValue) => {
     node.value = newValue
   })
   //双向数据绑定
   node.addEventListener('input', () => {
     this.vm[key] = node.value
   })
 }

然后最最关键的一步来了，我们回到Observer中，完善Object.defineProperty的get()

 get() {
        //收集依赖
        Dep.target && dep.addSub(Dep.target)
        return val
 }

这样在编译模板即调用Vue构造函数中调用compile()时，会遍历节点，在遍历节点的过程中会访问属性，而此时所有的属性在之前利用闭包就有自己的Dep了，因此调用dep.addSub实际上就是依赖收集的核心代码

此时完整的Observer应该如下

class Observer {
  constructor(data) {
    this.walk(data)
  }
  walk(data) {
    //1.判断data是否是对象
    if (!data || typeof data !== 'object') {
      return
    }
    //2.遍历data对象的所有属性
    Object.keys(data).forEach(key => {
      this.defineReactive(data, key, data[key])
    })

    defineReactive(obj, key, val){
      let that = this

      //负责收集依赖并发送通知
      let dep = new Dep()

      //如果val不是对象就不做任何处理 是对象就递归调用defineReactive
      this.walk(val)

      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
          //收集依赖
          Dep.target && dep.addSub(Dep.target)
          return val
        },
        set(newVal) {
          if (newVal === val) {
            return
          }
          val = newVal
          that.walk(val) //当val改变时 确保新值也是响应式
          //发送通知，通知观察者更新视图
          dep.notify()
        }
      })
    }
  }
}

完整的Vue应该如下

class Vue {
  constructor(options) {
    //1.通过属性保存传入的options数据
    this.$options = options || {}
    this.$data = options.data
    this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el

    //2.把data中的成员转换成getter和setter，注入到vue实例中
    this._proxyData(this.$data)
    //3. 调用observer对象，监听数据变化
    new Observer(this.$data)
    //4.调用compiler对象，解析指令和差值表达式
    new Compiler(this)
  }

  _proxyData(data) {
    Object.keys(data).forEach(key => {
      Object.defineProperties(this, key, {
        enumerable: true,
        configurable: true,
        get() {
          return data[key]
        },
        set(newVal) {
          if (newVal === data[key]) {
            return
          }
          data[key] = newVal
        }
      })
    })
  }
}

测试

到现在我们已经实现了一个完整的低配版Vue，我们最后在test.html中按调用顺序引入script文件

<!DOCTYPE html>
<html>
<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></title>
</head>
<body>
  <div id="app">
    <h1>差值表达式</h1>
    <h3>{{msg}}</h3>
    <h3>{{count}}</h3>
    <h1>v-text</h1>
    <div v-text="msg"></div>
    <h1>v-model</h1>
    <input type="text" v-model="msg">
    <input type="text" v-model="count">
  </div>
  <script src="./js/dep.js"></script>
  <script src="./js/watcher.js"></script>
  <script src="./js/compiler.js"></script>
  <script src="./js/observer.js"></script>
  <script src="./js/vue.js"></script>
  <script>
    let vm=new Vue({
      el:'#app',
      data:{
        msg:'Hello Vue',
        count:100,
        person:{
          name:"zs"
        }
      }
    })
  </script>
</body>
</html>

看下运行效果

2022-08-09 16-32-10.gif

结语

本文手写Vue2模拟了双向数据绑定的原理，全文五千多个字，肝了一个下午，跟着敲一遍应该不难理解。当然本文也只是实现了一个低配版的Vue，省略了源码中对于细节的处理，相信有了本文的基础再去阅读源码应该能减轻不小负担。

♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♥♡♥♡♥♡♥

avatar
文章
阅读
粉丝
相关推荐
Vue之v-model双向绑定原理---kalrry
5.5k阅读
 · 
1点赞
vue双向绑定原理
7.6k阅读
 · 
79点赞
Vue2知识点汇总
1.5k阅读
 · 
20点赞
vue的双向数据绑定原理和响应式原理
425阅读
 · 
3点赞
记一次忏悔的前端面试经验（Vue 双向绑定原理）
12k阅读
 · 
66点赞
Vue响应式原理浅析
1.1k阅读
 · 
4点赞
【手把手教你搓Vue响应式原理】（四） 数组的响应式处理
472阅读
 · 
40点赞
vue2 双向数据绑定和数据响应式
1.4k阅读
 · 
3点赞
vue中router和route的区别
2.7k阅读
 · 
1点赞

友情链接：