深刻亿点点之Vue：数据响应式

时间 2020-04-10

标签深刻亿点 100000000点 vue 数据响应繁體版

原文原文链接

前言

数据响应式原理也是老生常谈了，什么是数据响应式呢？
数据响应式，从官方定义来讲，将Model绑定到View，当用代码更新Model时，View会自动更新。
数据响应式强调数据驱动DOM生成，而不是直接操做DOM。
而经常和数据响应式混为一谈的数据双向绑定，则特指v-model，该指令实现了若是用户更新了View，Model也会随之更新。结合响应式原理，则造成了双向绑定，即双向绑定 = 单向绑定 + UI事件监听。
本文分为四个部分：javascript

一图理解响应式原理
手把手教你实现数据双向绑定
来个极简实现方案
数据响应式的思考

一图理解响应式原理

Vue经过订阅发布者模式来实现，经过三个类Observer、Dep、Watcher来实现，主要关注每一个类的功能和类之间的关系。
html

首先明确的是三个类之间的对应关系： Observer与Dep是一对一的关系，Dep与Watcher是多对多的关系。
每一个类的具体功能以下：
Observer类：数据的 观察者（我的理解上是一个代理发布者），当初始化数据时，遍历数据全部属性，为每个属性设置一个调度中心（ Dep实例对象），经过 Object.defineProperty把属性转为 getter/setter，注入相关的 Dep调度方法。
Watcher类：数据的 订阅者，当接收到调度中心 Dep的更新通知时， Watcher实例执行回调cb，更新视图。
Dep类： 调度中心，做为发布者和订阅者之间的消息传递枢纽。当 Observer类触发 getter时， Dep收集依赖的 Watcher对象。当 Observer类触发** setter**时， Observer将数据更新信息发送给 Dep， Dep通知订阅者 Watcher更新。
这三个类构成了主要的Model到View逻辑。至于View到Model的逻辑，只须要对输入控件进行事件监听，便可实现View到Model。这样就造成了闭环的MVVM模型。

手把手教你实现数据双向绑定

1. 实现订阅-发布者模式架构

这一步骤主要是肯定好整个流程框架，参照流程图能够肯定：vue

肯定初始化须要的数据
劫持数据，下发更新
编译模板，收集依赖
视图更新

class Vue{
  constructor(options) {
    // 1. 初始化数据
    this.options = options
    this.$data = options.data
    this.$el = document.querySelector(options.el)
    this._directive = [] // 收集依赖的容器
    this.observer()  // 2. 数据监测
    this.compiler()  // 3. 编译模板，收集依赖
  }

  // TODO: 数据劫持，下发更新
  observer() {}

  // TODO: 判断指令，收集依赖
  compiler() {}
}

// 订阅者，主要更新视图
class Watcher {
  constructor() {
    this.update()
  }
  // TODO: 更新视图
  update() {}
}

var vm = new Vue({
  el: '#app',
  data: {
    myText: '一开始，只是平平无奇的text',
    myModel: '普普统统的model',
  }
})

复制代码

2. 实现M->V，把模型里的数据绑定到视图

在框架上补充具体的逻辑:java

初始数据：除了记录传入的一些数据外，还须要一个容器来记录订阅者。因为订阅者是对data的属性监听的，也就是当data[prop]更新时，只有订阅prop属性的订阅者会有更新操做，其余订阅者不会收到更新。因此订阅者容器是一个属性对应一个列表。
劫持数据，下发更新：经过Object.defineProperty重写get/set（Vue3经过ES6的Proxy实现），对数据属性进行劫持监听。当更改数据属性时，下发更新。

为何用Proxy 替代 Object.defineProperty ？ Object.defineProperty只能劫持对象的属性,所以咱们须要对每一个对象的每一个属性进行遍历。经过递归以及遍历data对象来实现对数据的监控的，若是属性值也是对象那么须要深度遍历。
Proxy相比较与Object.defineProperty，优势以下：
1. 能够劫持整个对象，并返回一个新对象。显然能够大幅度提高性能。
2. z多种劫持操做node
编译模板，收集依赖：解析html模板，经过检测设定的特定属性如v-model，进行依赖收集操做
视图更新：订阅者收到更新信息后，对DOM进行操做，更新视图

<body>
<div id="app">
  <h2>响应式原理实现</h2>
  <div v-text="myText"></div>
  <div v-text="myModel"></div>
  <input v-model="myModel" />
</div>
</body>
<script> class Vue{ constructor(options) { // 1. 初始化数据 this.options = options this.$data = options.data this.$el = document.querySelector(options.el) this._directive = {} // 收集依赖的容器 // 2. 数据监测 this.observer(this.$data) // 3. 编译模板 this.compiler(this.$el) } observer(data) { for (var key in data) { this._directive[key] = [] // 初始化订阅者容器 let val = data[key] let watchers = this._directive[key] Object.defineProperty(this.$data, key, { get: function() { return val }, set: function(newVal) { // 更新数值，下发更新 val = newVal watchers.forEach(watcher => watcher.update()) }, }) } // es6 // const handler = { // set: function(data, prop, val) { // }, // } // data = new Proxy(data, handler) } compiler(el) { let nodes = el.children for(let i=0; i<nodes.length; i++) { let node = nodes[i] // 若是有子元素，递归调用 if (node.children.length > 0) this.compiler(node) // 判断指令，收集依赖 if(node.hasAttribute("v-model")) { let attrVal = node.getAttribute("v-model") this._directive[attrVal].push(new Watcher(node, this, attrVal, 'value')) } if(node.hasAttribute("v-text")) { let attrVal = node.getAttribute("v-text") this._directive[attrVal].push(new Watcher(node, this, attrVal, 'innerText')) } } } } // 订阅者，主要更新数据 class Watcher { // el: 订阅节点 // vm: vue实例 // exp: 订阅的data属性值 // attr: 不一样订阅者更新视图时，修改的属性不一样 constructor(el, vm, exp, attr) { this.el = el this.vm = vm this.exp = exp this.attr = attr this.update() } // 更新 update() { this.el[this.attr] = this.vm.$data[this.exp] } } var vm = new Vue({ el: '#app', data: { myText: '一开始，只是平平无奇的text', myModel: '普普统统的model', }, }) setTimeout(function(){ console.log(vm.$data) vm.$data["myText"] = '3秒后，text更新了' }, 3000) </script>
复制代码

3. 实现V->M

对v-model指令，编译时加入事件监听。react

// ...
if(node.hasAttribute("v-model")) {
  let attrVal = node.getAttribute("v-model")
  this._directive[attrVal].push(new Watcher(node, this, attrVal, 'value'))
  // V -> M: 加入事件监听
  node.addEventListener("input", (function () {
    return function() {
      this.$data[attrVal] = node.value
    }
  })().bind(this))
}
复制代码

20行代码极简实现

const input = document.getElementById('input')
const span = document.getElementById('span')
const obj = {
  text: '文本文本文本'
}
const handler = {
  set: function(target, prop, val) {
    target[prop] = val
    span.innerText = val
    input.value = val
  }
}

const myText = new Proxy(obj, handler);

input.addEventListener('keyup', function(e){
  // 赋值触发了set，初始化视图
  // myText代理了text属性，当text改变触发set
  myText.text = e.target.value;
})
复制代码

对数据响应式的一些思考

优势

双向绑定把数据变动的操做隐藏在框架内部，调用者并不会直接感知。
在表单交互多的状况下，能够简化大量代码。

注意点

数据之间互相依赖，因为"黑盒"的存在，在复杂应用中难以追踪数据变化和管理，不如引入如vuex的状态管理来得便利。
使用Object.defineProperty实现数据绑定时，直接添加对象属性obj[prop]，该属性并不是响应式，即没法经过数据驱动视图。对于数组对象也有相似的限制，直接经过索引修改数组也不会驱动视图更新。为了成为响应式属性，须要经过Vue.set来设置。（Vue3.0使用Proxy实现，属性的添加和删除、数组索引和长度的变动均可以被监听，并能够支持 Map、Set、WeakMap 和 WeakSet，该问题获得解决）
创造订阅者自己有必定的消耗，且订阅者一直存在于内存中。

参考

[1] 深刻响应式原理
 [2] 深刻理解Vue响应式原理
 [3] VUE数据响应式原理es6