Vue深入响应性原理

参考资料

• Vue高阶指南

响应性

深入响应性原理

Vue最独特的特性之一，是其非侵入性对的响应性系统。数据模型是被代理的JavaScript对象。而当你修改它们时，视图会进行更新。折让状态管理非常简单直观。在本章节，将研究一下Vue响应性系统底层的细节。

什么是响应性

这个术语在程序设计中经常被提及，响应性是一种允许我们以声明式的方式去适应变化的编程范例。在JavaScript中，通常不是如此工作：

let val1=2
let val2=3
let sum=val1+val2

console.log(sum)// 5

val1=3

console.log(sum)// 仍然是 5

上面代码中，sum并没有对val1的更改做出响应，在JavaScript中，如何实现响应性，作为一个高阶的概述，需要做到以下几点：

1. 当一个值被读取时进行追踪，例如val1+val2会同时读取两个值
2. 当某个值改变时进行检测，例如，当我们赋值val1=3
3. 重新运行代码来读取原始值，例如，再次运行sum=val1+val2来更新sum的值

Vue如何知道哪些代码在执行

为了能够在数值变化时，随时运行总和，首先要做的是将其包裹在一个函数中。

const updateSum=()=>{
sum=val1+val2
}

但我们如何告知Vue这个函数呢，Vue通过一个副作用（effect）来跟踪当前正在运行的函数。副作用是一个函数的包裹器，在函数被调用之前就启动跟踪。Vue知道哪个副作用在何时运行，并能在需要时再次执行它。

为了更好理解这点，让我们尝试脱离Vue实现类似的东西，看看它如何工作。

我们需要一个能包裹总和的东西，如下

createEffect(()=>{
sum=val1+val2
})

我们需要createEffect来跟踪和执行。实现如下：

//维持一个执行副作用的栈
const runningEffects=[]

const createEffect=fn=>{
	//将传来的fn包裹在一个副作用函数中
	const effect=()=>{
		runningEffects.push(effect)
		fn()
		runningEffects.pop()
	}
	//立即自动执行副作用
	effect()
}

当我们的副作用被调用时，在调用fn之前，它会把自己推到runningEffects数组中。这个数组可以用来检查当前正在运行的副作用。

副作用是许多关键功能的起点。例如，组件的渲染和计算属性都在内部使用副作用。任何时候，只要有事物对数据变化做出回应，就可以肯定它已经被包裹在一个副作用中了。

虽然Vue的公开API不包括任何直接创建副作用的方法，但它确实暴露了一个叫做watchEffect的函数，与createEffect类似。

但知道什么代码在执行只是解决了一部分。Vue如何知道副作用使用了什么值，以及如何知道它们何时发生变化？

Vue如何跟踪变化

我们不能像前面的例子中那样跟踪局部变量的重新分配，在JavaScript中没有这样的机制。我们可以跟踪的是对象property的变化。

当我们从一个组件的data函数中返回一个普通的JavaScript对象时，Vue会将该对象包裹在一个带有get和set处理程序的Proxy中。Proxy是在ES6中引入的，它是Vue3避免了Vue早期版本中存在的一些响应性问题。

Proxy是一个对象，它包装了另一个对象，并允许你拦截该对象的任何交互。

const dinner={
meal:'tacos'
}

const handler={
get(target,property){
console.log('intercepted!')
return target[property]
}
}

const proxy=new Proxy(dinner,handler)
console.log(proxy.meal)

// intercepted!
// tacos

这里我们截获了读取模板对象property的行为。像这样的处理函数也称为一个捕捉器（trap）。有许多可用的不同类型的捕捉器，每个都处理不同类型的交互。

使用Proxy的一个难点是this绑定。我们希望任何方法都绑定到这个Proxy，而不是目标对象，这样我们也可以拦截它们。ES6引入了另一个Reflect特性，允许我们以小代价解决这个问题：

const dinner={meal:'tacos'}

const handler={
	get(target,property,receiver)
	{
		return Reflect.get(...argument)
	}
}

const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)

// tacos

使用Proxy实现响应性的第一步就是跟踪一个property何时被读取。我们在一个名为track的处理器函数中执行此操作，该函数可以传入target和property两个参数。

const dinner = {
  meal: 'tacos'
}

const handler = {
  get(target, property, receiver) {
    track(target, property)
    return Reflect.get(...arguments)
  }
}

const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)

// tacos

这里没有展示track的实现。它将检查当前运行的是哪个副作用，并将其与target和property记录在一起。这就是Vue如何知道这个property是该副作用的依赖项。

最后，我们需要在property值更改时重新运行这个副作用。为此，我们需要在代理上使用一个set处理函数：

const dinner = {
  meal: 'tacos'
}

const handler = {
  get(target, property, receiver) {
    track(target, property)
    return Reflect.get(...arguments)
  },
  set(target, property, value, receiver) {
    trigger(target, property)
    return Reflect.set(...arguments)
  }
}

const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)

// tacos

至此，就可以满足实现响应性的几点要求：

1. 当一个值被读取时进行追踪
   proxy的get处理函数中track函数记录了该property和当前副作用。
2. 当某个值改变时进行检测
   在proxy上调用set处理函数。
3. 重新运行代码来读取原始值
   trigger函数查找哪些副作用依赖于该property并执行它们。

如果我们要用一个组件重写原来求和例子，可以这样做：

const vm=createApp({
	data(){
		return{
			val1:2,
			val2:3
		},
	computed:{
		sum(){
				return this.val1+this.val2
			}
		}
	}
}).mount('#app')

console.log(vm.sum)//5

vm.val1=3
cosole.log(vm.sum)//6

data返回的对象被包裹在响应式代理中，并存储为this.$data。propertythis.val1和this.val2分别是this.$data.val1和this.$data.val2的别名，因此它们通过相同的代理。

Vue将把sum的函数包裹在一个副作用中。当我们试图访问this.sum时，将运行该副作用来计算数值。$data周围的响应式代理将追踪propertyval1和val2在该副作用运行时的读取。

从Vue3开始，我们的响应性现在可以在一个独立包中使用。将$data包裹在一个代理中的函数被称为reactive。我们可以自己直接调用这个函数，允许我们在不需要使用组件的情况下将一个对象包裹在一个响应式代理中。

const proxy=reactive({
	val1:2,
	val2:3
})

被代理的对象

Vue在内部跟踪所有已被转为响应式的对象，所以它总是为同一个对象返回相同的代理。

当从一个响应式代理访问一个嵌套对象时，该对象在被返回之前也会被转换为一个代理

const handler = {
  get(target, property, receiver) {
    track(target, property)
    const value = Reflect.get(...arguments)
    if (isObject(value)) {
      // 将嵌套对象包裹在自己的响应式代理中
      return reactive(value)
    } else {
      return value
    }
  }
  // ...
}

Proxy vs 原始标识

如何让渲染响应变化

一个组件的模板被编译成一个render函数。渲染函数创建VNodes，描述组件该如何被渲染。它被包裹在一个副作用中，允许Vue在运行时跟踪被“触及”的property。

一个render函数在概念上与一个computedproperty非常相似。Vue并不确切地追踪依赖关系是如何被使用的，它只知道在函数运行的某个时间点上使用了这些依赖关系。如果这些property中的任何一个随后发生了变化，它将触发副作用再次运行，重新运行render函数以生成新的VNodes。

响应性基础

声明响应式状态

要为JavaScript对象创建响应式状态，可以使用reactive方法：

import {reactive} from 'vue'

const state=reactive({
	count:0
})

reactive相当于Vue2.x中的Vue.observable()API。

Vue中响应式状态的基本用例是我们可以在渲染期间使用它。因为依赖跟踪的关系，当响应式状态改变时视图会自动更新。

这就是Vue响应性系统的本质。当从组件中的data()返回一个对象时，它在内部交由reactive()使其成为响应式对象。模板会被编译成能够使用这些响应式property的渲染函数

创建独立的响应式值作为refs

想象一下，我们有一个独立的原始值（例如，一个字符串），我们想让他变成响应式的。当然，我们可以创建一个拥有相同字符串property的对象，并将其传递给reactive。Vue为我们提供了一个可以做相同事情的方法—ref：

import {ref} from 'vue'
const count=ref(0)

ref会返回一个可变的响应式对象，该对象作为一个响应式的引用维护着内部的值，这就是ref名称的来源。该对象只包含一个名为value的property

Ref解包

当ref作为渲染上下文（从setup()中返回的对象）上的property返回并可以在模板中被访问时，它将自动浅层解析包内部值。只有访问嵌套的ref时需要在模板中添加.value：

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="count ++">Increment count</button>
    <button @click="nested.count.value ++">Nested Increment count</button>
  </div>
</template>

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const count = ref(0)
      return {
        count,

        nested: {
          count
        }
      }
    }
  }
</script>

TIP 如果你不需要访问实际的对象实例，可将其用reactive包裹：

nested:reactive({
	count
})

访问响应式对象

当ref作为响应式对象的property被访问或更改时，为使其行为类似于普通property，它会自动解包内部值：

const count=ref(0)
const state=reactive({
	count
})

console.log(state.count)//0

state.count=1
console.log(count.value)//1

如果将新的ref赋值给现有ref的property，将会替换旧的ref：

const otherCount = ref(2)

state.count = otherCount
console.log(state.count) // 2
console.log(count.value) // 1

Ref解包仅发生在被响应式Object嵌套的时候。当从 Array 或原生集合类型如 Map访问 ref 时，不会进行解包：

const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)

const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)

响应式状态解构

当我们想使用大型响应式对象的一些property时，可能很想使用ES6解构来获取我们想要的property：

import {reactive} from 'vue'

const book=reactive({
  author: 'Vue Team',
  year: '2020',
  title: 'Vue 3 Guide',
  description: 'You are reading this book right now ;)',
  price: 'free'
})

let{author,title}=book

遗憾的是，使用解构的两个property的响应性都会丢失。对于这种情况，我们需要将我们的响应式对象转换为一组ref。这些ref将保留对源对象的响应式关联：

import { reactive, toRefs } from 'vue'

const book = reactive({
  author: 'Vue Team',
  year: '2020',
  title: 'Vue 3 Guide',
  description: 'You are reading this book right now ;)',
  price: 'free'
})

let { author, title } = toRefs(book)

title.value = 'Vue 3 Detailed Guide' // 我们需要使用 .value 作为标题，现在是 ref
console.log(book.title) // 'Vue 3 Detailed Guide'

使用readonly防止更改响应式对象

有时我们想跟踪响应式对象 (ref 或 reactive) 的变化，但我们也希望防止在应用程序的某个位置更改它。例如，当我们有一个被 provide 的响应式对象时，我们不想让它在注入的时候被改变。为此，我们可以基于原始对象创建一个只读的 proxy 对象：

import { reactive, readonly } from 'vue'

const original = reactive({ count: 0 })

const copy = readonly(original)

// 通过 original 修改 count，将会触发依赖 copy 的侦听器

original.count++

// 通过 copy 修改 count，将导致失败并出现警告
copy.count++ // 警告: "Set operation on key 'count' failed: target is readonly."

响应式计算和侦听

计算值

有时我们需要依赖于其他组件的状态，在Vue中，这是用组件计算属性处理的，以直接创建计算值，我们可以使用computed方法：它接受getter函数并为getter返回的值返回一个不可变的响应式ref对象。

const count=ref(1)
const plusOne=computed(()=>count.value+1)

console.log(plusOne.value)// 2
plusOne.value++// error

或者，它可以使用一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0

watchEffect

为了根据响应式状态自动应用和重新应用副作用，我们可以使用watchEffect方法。它立即执行传入的一个函数，同时响应式追踪其依赖，并在依赖变更时重新运行该函数。

const count=ref(0)
watchEffect(()=>console.log(count.value))

停止侦听

当watchEffect在组件的setup()函数或生命周期钩子被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。
在一些情况下，也可以显示调用返回值以停止侦听：

const stop = watchEffect(() => {
  /* ... */
})

// later
stop()

清除副作用

有时副作用函数会执行一些异步的副作用，这些响应需要在其失效时清除（即完成之前状态已经改变了）。所以侦听副作用传入的函数可以接收一个onInvalidate函数作入参，用来注册清理失效时的回调。当以下情况发生时，这个失效回调会被触发：

• 副作用即将重新执行时
• 侦听器被停止（如果在setup()或生命周期钩子函数中使用了watchEffect，则在组件卸载时）

watchEffect(onInvalidate => {
  const token = performAsyncOperation(id.value)
  onInvalidate(() => {
    // id has changed or watcher is stopped.
    // invalidate previously pending async operation
    token.cancel()
  })
})

watch

侦听单个数据源

侦听多个数据源

侦听响应式对象

与watchEffect共享的行为

渲染机制和优化

虚拟DOM

Vue2中的更改检测警告

该页面仅适用于Vue2.x及更低版本

由于JavaScript的限制，有些Vue无法检测的更改类型。但是，有一些方法可以规避他们以维持响应性。

对于对象
Vue无法检测到property的添加或删除。由于Vue在实例初始化期间执行getter/setter转换过程，因此必须在data对象中存在一个property，以便Vue对其进行转换并使其具有响应式。

对于已经创建的实例，Vue不允许动态添加根级别的响应式property。但是，可以使用Vue.set(object,propertyName,value)方法向嵌套对象添加响应式property：

Vue.set(vm.someObject, 'b', 2)

还可以使用this.$set实例方法，这也是全局Vue.set方法的别名。

有时你可能需要为已有对象赋值多个新property，比如使用Object.assign()或_.extent()。但是，这样添加到对象上的新property不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的property一起创建一个新的对象。

// 而不是 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

对于数组

Vue不能检测到以下数组的变动：

1. 当利用索引直接设置一个数组项时，例如：vm.items[indexOfItem]=newValue
2. 当修改数组的长度时

为了解决第一个问题，有以下两种方式：

//Vue.set
Vue.set(vm.items,indexOfItem,newValue)

//Array.prototype.splice
vm.items.splice(indexOfItem,1,newValue)

也可以使用vm.$set实例方法，该方法是全局方法Vue.set的一个别名

为了解决第二种问题，可以使用splice：

vm.item.splice(newLength)

声明响应式property

由于Vue不允许动态添加根级响应式property，所以你必须在初始化实例前声明所有根级响应式property，哪怕只是一个空值：

var vm = new Vue({
  data: {
    // 声明 message 为一个空值字符串
    message: ''
  },
  template: '<div>{{ message }}</div>'
})
// 之后设置 `message`
vm.message = 'Hello!'

异步更新队列

Vue在更新DOM时是异步执行的。只要监听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个侦听器被多次触发，它只会被推入队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的。然后在下一个的事件循环tick中，Vue刷新队列并执行实际（已去重）的工作。

例如，当你设置vm.someData='new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环tick中更新。如果想基于更新后的DOM状态来做些什么，为了在数据变化之后等待Vue完成更新DOM，可以在数据变化之后立即使用Vue.nextTick(callback)。这样回调函数将在DOM更新完成之后被调用。例如：

<div id="example">{{ message }}</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message'              // 更改数据
vm.$el.textContent === 'new message'    // false
Vue.nextTick(function() {
  vm.$el.textContent === 'new message'  // true
})

在组件内使用vm.$nextTick()实际方法特别方便，因为它不需要全局Vue，并且回调函数中的this将自动绑定到当前组件实例上：

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function() {
    return {
      message: 'not updated'
    }
  },
  methods: {
    updateMessage: function() {
      this.message = 'updated'
      console.log(this.$el.textContent)   // => 'not updated'
      this.$nextTick(function() {
        console.log(this.$el.textContent) // => 'updated'
      })
    }
  }
})

因为$nextTick()返回一个Promise对象，所以可以使用新的ES2017 async/await语法完成相同事情：

 methods: {
    updateMessage: async function () {
      this.message = 'updated'
      console.log(this.$el.textContent) // => 'not updated'
      await this.$nextTick()
      console.log(this.$el.textContent) // => 'updated'
    }
  }