vue中的响应式和设计模式

文章内容输出来源：拉勾教育前端高薪训练营

数据响应式

包含数据响应式、双向绑定、数据驱动三种

• 数据响应式
  • 数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率
• 双向绑定
  • 数据改变，视图改变；视图改变，数据也随之改变
  • 我们可以使用v-model在表单元素上创建双向数据绑定
• 数据驱动是Vue最独特的特性之一
  • 开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图

Vue2数据响应式的核心Object.defineProperty

语法：Object.defineProperty(obj, prop, descriptor)

• obj：要定义属性的对象
• prop：要定义或修改的属性的名称或Symbol
• descriptor：要定义或修改的属性描述符
• 返回值：被传递给函数的对象

descriptor：

• configurable：当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除
• enumerable：当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中
• value：该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）
• writable：当且仅当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被赋值运算符改变
• get：属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值
• set：属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象

vue中使用Object.defineProperty劫持多个数据

function proxyData (data) {
  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
        document.querySelector('#app').textContent = data[key]
      },
    })
  })
}

Vue3数据响应式的核心Proxy

语法：const p = new Proxy(target, handler)

• target：要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）
• handler：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为

方法：Proxy.revocable(target, handler)，创建一个可撤销的Proxy对象

• target：将用 Proxy 封装的目标对象。可以是任何类型的对象，包括原生数组，函数，甚至可以是另外一个代理对象
• handler：一个对象，其属性是一批可选的函数，这些函数定义了对应的操作被执行时代理的行为

返回值是一个对象，其结构为： {“proxy”: proxy, “revoke”: revoke}

• proxy：表示新生成的代理对象本身，和用一般方式 new Proxy(target, handler) 创建的代理对象没什么不同，只是它可以被撤销掉
• revoke：撤销方法，调用的时候不需要加任何参数，就可以撤销掉和它一起生成的那个代理对象

一旦某个代理对象被撤销，它将变得几乎完全不可调用，在它身上执行任何的可代理操作都会抛出 TypeError 异常

handler对象的方法

getPrototypeOf

当读取代理对象的原型时，该方法就会被调用，Object.getPrototypeOf()方法返回指定对象的原型

• 参数target：被代理的目标对象
• 返回值：必须是一个对象或者 null
• 触发：Object.getPrototypeOf()、Reflect.getPrototypeOf()、proto、Object.prototype.isPrototypeOf()、instanceof

Object.getPrototypeOf(obj)

• obj：要返回其原型的对象
• 返回值：给定对象的原型。如果没有继承属性，则返回null

setPrototypeOf

主要用来拦截 Object.setPrototypeOf()，设置一个指定的对象的原型到另一个对象或null

• obj：要设置其原型的对象
• prototype：该对象的新原型(一个对象或null)
• 返回值：如果成功修改了Prototype, setPrototypeOf方法返回true,否则返回false
• 触发：Object.setPrototypeOf()、Reflect.setPrototypeOf()
  如果target不可扩展, 原型参数必须与Object.getPrototypeOf(target)的值相同

Object.setPrototypeOf(obj, prototype)

• obj：要设置其原型的对象
• prototype：该对象的新原型(一个对象或null)
• 返回值：给定对象的原型。如果没有继承属性，则返回null

isExtensible

用于拦截对对象的Object.isExtensible()，判断一个对象是否是可扩展的

• target：目标对象
• 返回值：必须返回一个Boolean值或可转换成Boolean的值
• 触发：Object.isExtensible()、Reflect.isExtensible()
  Object.isExtensible(proxy)必须同Object.isExtensible(target)返回相同值。也就是必须返回true或者为true的值,返回false和为false的值都会报错

Object.isExtensible(obj)

• obj：需要检测的对象
• 返回值：表示给定对象是否可扩展的一个Boolean
  默认情况下，对象是可扩展的，Object.preventExtensions，Object.seal 或 Object.freeze 方法都可以标记一个对象为不可扩展
  用Object.seal()密封的对象可以改变它们现有的属性。使用Object.freeze() 冻结的对象中现有属性是不可变的

preventExtensions

对Object.preventExtensions()的拦截，让一个对象变的不可扩展，也就是永远不能再添加新的属性

• target：所要拦截的目标对象
• 返回值：返回一个布尔值
• 触发：Object.preventExtensions()、Reflect.preventExtensions()
  如果目标对象是可扩展的，那么只能返回false

Object.preventExtensions(obj)

• obj：将要变得不可扩展的对象
• 返回值：已经不可扩展的对象
  不可扩展对象的原型是不可变的

getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor()的钩子，返回指定对象上一个自有属性对应的属性描述符（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）

• target：目标对象
• prop：返回属性名称的描述
• 返回值：必须返回一个object或undefined
• 触发：Object.getOwnPropertyDescriptor()、Reflect.getOwnPropertyDescriptor()
  getOwnPropertyDescriptor 必须返回一个object或undefined
  如果属性作为目标对象的不可配置的属性存在，则该属性无法报告为不存在
  如果属性作为目标对象的属性存在，并且目标对象不可扩展，则该属性无法报告为不存在
  如果属性不存在作为目标对象的属性，并且目标对象不可扩展，则不能将其报告为存在
  属性不能被报告为不可配置，如果它不作为目标对象的自身属性存在，或者作为目标对象的可配置的属性存在
  Object.getOwnPropertyDescriptor（target）的结果可以使用 Object.defineProperty 应用于目标对象，也不会抛出异常

Object.getOwnPropertyDescriptor(obj)

• obj：需要查找的目标对象
• prop：目标对象内属性名称
• 返回值：如果指定的属性存在于对象上，则返回其属性描述符对象（property descriptor），否则返回undefined

defineProperty

拦截对对象的 Object.defineProperty()操作，直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象

• target：目标对象
• property：返回属性名称的描述
• descriptor：待定义或修改的属性的描述符
• 返回值：必须以一个Boolean返回，表示定义该属性的操作成功与否
• 触发：Object.defineProperty()、Reflect.defineProperty()、proxy.property=‘value’
  如果目标对象不可扩展，将不能添加属性
  不能添加或者修改一个属性为不可配置的，如果它不作为一个目标对象的不可配置的属性存在的话
  如果目标对象存在一个对应的可配置属性，这个属性可能不会是不可配置的
  如果一个属性在目标对象中存在对应的属性，那么Object.defineProperty(target, prop, descriptor)将不会抛出异常
  在严格模式下，false作为handler.defineProperty方法的返回值的话将会抛出TypeError异常

has

针对in操作符的代理方法，可以看作是针对in操作的钩子，指定的属性在指定的对象或其原型链中，则in运算符返回true

• target：目标对象
• prop：需要检查是否存在的属性
• 返回值：返回一个boolean属性的值
• 触发：属性查询（foo in proxy）、继承属性查询（foo in Object.create(proxy)）、with检查（with(proxy) { (foo); }）、Reflect.has()
  如果目标对象的某一属性本身不可被配置，则该属性不能够被代理隐藏
  如果目标对象为不可扩展对象，则该对象的属性不能够被代理隐藏

in（prop in object）

• prop：一个字符串类型或者 symbol 类型的属性名或者数组索引（非symbol类型将会强制转为字符串）
• objectName：检查它（或其原型链）是否包含具有指定名称的属性的对象

get

拦截对象的读取属性操作

• target：目标对象
• property：被获取的属性名
• receiver：Proxy或者继承Proxy的对象
• 返回值：可以返回任何值
• 触发：访问属性（proxy[foo]和 proxy.bar）、访问原型链上的属性（Object.create(proxy)[foo]）、Reflect.get()
  如果要访问的目标属性是不可写以及不可配置的，则返回的值必须与该目标属性的值相同
  如果要访问的目标属性没有配置访问方法，即get方法是undefined的，则返回值必须为undefined

set

设置属性值操作的捕获器

• target：目标对象
• property：将被设置的属性名或Symbol
• value：新属性值
• receiver：最初被调用的对象。通常是proxy本身，但handler的set方法也有可能在原型链上，或以其他方式被间接地调用（因此不一定是 proxy 本身）
• 返回值：应当返回一个布尔值，返回true代表属性设置成功，在严格模式下，如果set()方法返回false，那么会抛出一个TypeError异常
• 触发：指定属性值（proxy[foo] = bar 和 proxy.foo = bar）、指定继承者的属性值（Object.create(proxy)[foo] = bar）、Reflect.set()
  若目标属性是一个不可写及不可配置的数据属性，则不能改变它的值
  如果目标属性没有配置存储方法，即 [[Set]] 属性的是 undefined，则不能设置它的值
  在严格模式下，如果 set() 方法返回 false，那么也会抛出一个 TypeError 异常

deleteProperty

用于拦截对对象属性的 delete 操作

• target：目标对象
• property：待删除的属性名
• 返回值：必须返回一个Boolean类型的值，表示了该属性是否被成功删除
• 触发：删除属性（delete proxy[foo] 和 delete proxy.foo）、Reflect.deleteProperty()
  如果目标对象的属性是不可配置的，那么该属性不能被删除

ownKeys

用于拦截对对象属性的 delete 操作

• target：目标对象
• 返回值：必须返回一个可枚举对象
• 触发：Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()、Object.keys()、Reflect.ownKeys()
  ownKeys的结果必须是一个数组
  数组的元素类型要么是一个String，要么是一个Symbol
  结果列表必须包含目标对象的所有不可配置（non-configurable）、自有（own）属性的key
  如果目标对象不可扩展，那么结果列表必须包含目标对象的所有自有（own）属性的key，不能有其它值

apply

用于拦截函数的调用

• target：目标对象（函数）
• thisArg：被调用时的上下文对象
• argumentsList：被调用时的参数数组
• 返回值：可以返回任何值
• 触发：proxy(…args)、Function.prototype.apply() 和 Function.prototype.call()、Reflect.apply()
  target必须是可被调用的。也就是说，它必须是一个函数对象

construct

用于拦截new 操作符. 为了使new操作符在生成的Proxy对象上生效，用于初始化代理的目标对象自身必须具有[[Construct]]内部方法（即new target必须是有效的）

• target：目标对象（函数）
• argumentsList：constructor的参数列表
• newTarget：最初被调用的构造函数
• 返回值：必须返回一个对象
• 触发：new proxy(…args)、Reflect.construct()
  必须返回一个对象

vue中使用Proxy劫持多个数据

let vm = new Proxy(data, {
  get (target, prop) {
    console.log('get, prop:', prop, data[prop])
    return target[prop]
  },
  set (target, prop, newVal) {
    console.log('set, prop:', prop, newVal)
    if (newVal === target[prop]) return
    target[prop] = newVal
    document.querySelector('#app').textContent = target[prop]
  },
})

Vue的设计模式

Vue主要使用了两种设计模式
观察者模式：由具体的目标调度，比如当事件触发，Dep发布者就会去调用Watcher观察者的方法，所以观察者模式的订阅者与发布者之间是存在依赖的
发布订阅模式：由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在

发布订阅模式（Vue中的自定义事件和Node的事件机制）

存在三个端：订阅着、发布者、信号中心
订阅者订阅某个任务，发布者在执行完某个任务后，向信号中心发布一个信号，信号中心将任务执行结果发送给订阅者

// 事件中心eventBus.js
let eventBus = new Vue()

// 订阅者ComponentA.vue
create () {
  eventBus.$on('dataChange', val => {
    console.log(val)
  })
}

// 发布者ComponentB.vue
dataChange () {
  eventBus.$emit('dataChange', 'data has changed')
}

模拟eventBus

class eventBus {
  constructor () {
    this.subs = {}
  }

  // 注册事件
  $on (eventType, callback) {
    this.subs[eventType] = this.subs[eventType] || []
    this.subs[eventType].push(callback)
  }
  
  // 触发事件
  $emit (eventType) {
    if (this.subs[eventType]) {
      this.subs[eventType].forEach(callback => {
        callback()
      })
    }
  }
}

观察者模式

• 观察者（订阅者）—— Watcher
  • update()：当事件发生时，具体要做的事情
• 目标（发布者）—— Dep
  • subs数组：存储所有的观察者
  • addSub()：添加观察者
  • notify()：当事件发生，调用所有观察者的update()方法

观察者模式没有事件中心

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')
  }
}

Vue响应式原理

Vue

Observer数据劫持

Compiler解析指令

Dep发布者

Watcher观察者

• Vue：把data中的成员注入到Vue实例，并且把data中的成员转成getter/setter
• Oberver：能够对数据对象的所有属性进行监听，如果变动可拿到最新值并通知Dep
• Compiler：解析每个元素中的指令以及差值表达式，并替换成相应的数据
• Dep：发布者，添加观察着，数据发生变化时，通知所有观察者更新
• Watcher：执行update更新视图

模拟Vue

Vue类
功能点

• 负责接收初始化的参数（选项）
• 负责把data中的属性注入到Vue实例，转换成getter/setter
• 负责调用observer监听data中所有属性的变化
• 负责调用compiler解析指令/差值表达式

constructor params参数

• $options
• $el
• $data

方法

• _proxyData(data): 把data中的属性注入到Vue实例，转换成getter/setter

class Vue {
  constructor (options) {
    // 将选项数据保存在对应数据上
    this.$options = options
    this.$data = options.data
    this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el

    // 把data中的属性注入到Vue实例，转换成getter/setter
    this._proxyData(this.$data)

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

    // 调用compiler解析指令/差值表达式
    new Compiler(this)
  }

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

Observer类
功能点

• 负责把data选项中的属性转换成响应式数据
• data中的某个属性也是对象，把该属性转换成响应式数据
• 数据变化发送通知

constructor params参数

• data

方法

• walk(data): 遍历data中的所有属性，循环过程中可能会调用defineReactive
• defineReactive(obj, prop, value): 通过调用defineProperty把属性转换成getter/setter

class Observer {
  constructor (data) {
    this.walk(data)
  }

  walk (data) {
    if (!data || typeof data !== 'object') return
    Object.keys(data).forEach(prop => {
      this.defineReactive(data, prop, data[prop])
    })
  }

  // 此处传递value值，而不用obj[prop]获取的原因是，调用obj[prop]时会触发Vue实例中的getter属性，而Vue实例中的getter又会调用Observer实例中的getter，会出现死循环造成堆栈溢出
  defineReactive (obj, prop, value) {
    const self = this
    // 生成Dep收集依赖，并发送通知
    const dep = new Dep()

    // 如果value是一个object，其内部的属性也需要转换成getter/setter
    self.walk(value)
    Object.defineProperty(obj, prop, {
      enumerable: true,
      configurable: true,
      get () {
        // 收集依赖
        Dep.target && dep.addsub(Dep.target)
        return value
      },
      set (newVal) {
        if (newVal === value) return
        value = newVal

        // 如果newVal是一个object，其内部的属性也需要转换成getter/setter
        self.walk(newVal)
        // 发送通知
        dep.notify()
      }
    })
  }
}

Compiler类
功能点

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

constructor params参数

• el：Vue构造函数中的options.el
• vm：Vue实例

方法

• compile(el): 遍历el中的所有节点，如果是文本节点解析差值表达式，如果是元素节点解析指令
• compileElement(node): 对元素节点进行指令解析
• compileText(node): 对文本节点进行差值表达式解析
• isDirective(attrName): 判断当前属性是否是指令
• isTextNode(node): 判断节点是否是文本节点
• isElementNode(node): 判断节点是否是元素节点

nodeType

• 1：Element
• 2：Attr
• 3: Text

class Compiler {
  constructor (vm) {
    this.el = vm.$el
    this.vm = vm
    this.compile(this.el)
  }

  compile (el) {
    const childNodes = el.childNodes
    Array.from(childNodes).forEach(node => {
      if (this.isTextNode(node)) {
        this.compileText(node)
      }

      if (this.isElementNode(node)) {
        this.compileElement(node)
      }

      // 处理深层次子节点
      if (node.childNodes && node.childNodes.length) {
        this.compile(node)
      }
    })
  }

  compileElement(node) {
    const { attributes } = node
    Array.from(attributes).forEach(attr => {
      let attrName = attr.name
      if (this.isDirective(attrName)) {
        attrName = attrName.substr(2)
        const { value } = attr
        this.update(node, value, attrName)
      }
    })
  }

  update (node, prop, attrName) {
    const updateFn = this[`${attrName}Updater`]
    updateFn && updateFn.call(this, node, this.vm[prop], prop)
  }

  // v-text
  textUpdater (node, value, prop) {
    node.textContent = value

    // 创建watcher对象监听数据改变
    new Watcher(this.vm, prop, newValue => {
      node.textContent = newValue
    })
  }

  // v-model
  modelUpdater (node, value, prop) {
    node.value = value

    // 创建watcher对象监听数据改变
    new Watcher(this.vm, prop, newValue => {
      node.value = newValue
    })

    // 实现v-model双向绑定
    node.addEventListener('input', () => {
      this.vm[prop] = node.value
    })
  }

  compileText(node) {
    // 匹配{{}}
    const reg = /\{\{(.+?)\}\}/
    let value = node.textContent
    if (reg.test(value)) {
      // 获取正则中的第一个分组
      const prop = RegExp.$1.trim()
      node.textContent = value.replace(reg, this.vm[prop])

      // 创建watcher对象监听数据改变
      new Watcher(this.vm, prop, newValue => {
        node.textContent = newValue
      })
    }
  }

  isDirective(attrName) {
    return attrName.startsWith('v-')
  }

  isTextNode(node) {
    return node.nodeType === 3
  }

  isElementNode(node) {
    return node.nodeType === 1
  }
}

Dep类

Vue

Observer数据劫持

Data: getter收集依赖 setter通知依赖

Compiler解析指令

Dep发布者

Watcher观察者

功能点

• 收集依赖，添加观察者（Watcher）
• 通知所有观察者

constructor params参数

• subs：存储所有的watcher

方法

• addSub(sub): 添加watcher
• notify: 数据发生变化时，通知watcher更新

class Dep {
  constructor () {
    this.subs = []
  }

  addSub (sub) {
    if (sub && sub.update) {
      this.subs.push(sub)
    }
  }

  notify () {
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}

Watcher类

Data: getter收集依赖 setter通知依赖

Dep对象

Watcher1

Watcher2

Watcher3

视图1

视图2

视图3

功能点

• 当数据变化触发依赖，dep通知所有的Watcher实例更新视图
• 自身实例化的时候往dep对象中添加自己

constructor params参数

• vm：Vue实例
• prop：data中的属性名称
• callback：更新视图的具体回调函数
• oldValue：数据变化之前的值

方法

• update: 比较新旧值是否变化，变化后掉调用callback更新视图

class Watcher {
  constructor (vm, prop, callback) {
    this.vm = vm
    this.prop = prop
    this.callback = callback
    // 把watcher对象记录到Dep类的静态属性target
    Dep.target = this
    // 访问vm[prop]的get方法把watcher添加到dep
    this.oldValue = vm[prop]
    // 重置Dep.target
    Dep.target = null
  }

  update () {
    const newValue = this.vm[this.prop]
    if (this.oldValue === newValue) return
    this.callback(newValue)
  }
}