深入响应性原理
在 Vue Mastery 上免费观看关于深入响应性原理的视频。
什么是响应性
响应性是一种允许我们以声明式的方式去适应变化的一种编程范例。人们通常展示的典型例子,是一份 excel 电子表格 (一个非常好的例子)。
JavaScript 通常不是这样工作的——如果我们想用 JavaScript 编写类似的内容:
var val1 = 2
var val2 = 3
var sum = val1 + val2
// sum
// 5
val1 = 3
// sum
// 5
如果我们更新第一个值,sum 不会被修改。
那么我们如何用 JavaScript 实现这一点呢?
- 检测其中某一个值是否发生变化
- 用跟踪 (track) 函数修改值
- 用触发 (trigger) 函数更新为最新的值
Vue 如何追踪变化?
当把一个普通的JavaScript
对象作为 data
选项传给应用或组件实例的时候,Vue
会使用带有 getter
和 setter
的处理程序遍历其所有 property
并将其转换为 Proxy
。这是 ES6
仅有的特性,但是我们在 Vue 3
版本也使用了 Object.defineProperty
来支持 IE 浏览器。两者具有相同的 Surface API
,但是 Proxy
版本更精简,同时提升了性能。
该部分需要稍微地了解下 Proxy
的某些知识!所以,让我们深入了解一下。关于 Proxy
的文献很多,但是你真正需要知道的是 Proxy
是一个包含另一个对象或函数并允许你对其进行拦截的对象。
我们是这样使用它的:new Proxy(target, handler)
const dinner = {
meal: 'tacos'
}
const handler = {
get(target, prop) {
return target[prop]
}
}
const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)
// tacos
我们只是包装这个对象并返回它。请注意,我们把对象包装在 Proxy
里的同时可以对其进行拦截。这种拦截被称为陷阱。
const dinner = {
meal: 'tacos'
}
const handler = {
get(target, prop) {
console.log('intercepted!')
return target[prop]
}
}
const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)
// tacos
除了控制台日志,我们可以在这里做任何我们想做的事情。如果我们愿意,我们甚至可以不返回实际值。这就是为什么 Proxy
对于创建 API
如此强大。
此外,Proxy
还提供了另一个特性。我们不必像这样返回值:target[prop]
,而是可以进一步使用一个名为 Reflect
的方法,它允许我们正确地执行 this
绑定,就像这样:
const dinner = {
meal: 'tacos'
}
const handler = {
get(target, prop, receiver) {
return Reflect.get(...arguments)
}
}
const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)
// tacos
我们之前提到过,为了有一个 API
能够在某些内容发生变化时更新最终值,我们必须在内容发生变化时设置新的值。我们在处理器,一个名为 track
的函数中执行此操作,该函数可以传入 target
和 key
两个参数。
const dinner = {
meal: 'tacos'
}
const handler = {
get(target, prop, receiver) {
track(target, prop)
return Reflect.get(...arguments)
}
}
const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)
// tacos
最后,当某些内容发生改变时我们会设置新的值。为此,我们将通过触发这些更改来设置新 Proxy
的更改:
const dinner = {
meal: 'tacos'
}
const handler = {
get(target, prop, receiver) {
track(target, prop)
return Reflect.get(...arguments)
},
set(target, key, value, receiver) {
trigger(target, key)
return Reflect.set(...arguments)
}
}
const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)
// tacos
还记得几段前的列表吗?现在我们有了一些关于 Vue
如何处理这些更改的答案:
- 当某个值发生变化时进行检测:我们不再需要这样做,因为
Proxy
允许我们拦截它 - 跟踪更改它的函数:我们在
Proxy
中的getter
中执行此操作,称为effect
- 触发函数以便它可以更新最终值:我们在
Proxy
中的setter
中进行该操作,名为trigger
Proxy
对象对于用户来说是不可见的,但是在内部,它们使 Vue
能够在 property
的值被访问或修改的情况下进行依赖跟踪和变更通知。从 Vue 3
开始,我们的响应性现在可以在独立的包中使用。需要注意的是,记录转换后的数据对象时,浏览器控制台输出的格式会有所不同,因此你可能需要安装 vue-devtools
,以提供一种更易于检查的界面。
Proxy 对象
Vue
在内部跟踪所有已被设置为响应式的对象,因此它始终会返回同一个对象的 Proxy
版本。
从响应式 Proxy
访问嵌套对象时,该对象在返回之前也被转换为 Proxy
:
const handler = {
get(target, prop, receiver) {
track(target, prop)
const value = Reflect.get(...arguments)
if (isObject(value)) {
return reactive(value)
} else {
return value
}
}
// ...
}
Proxy vs 原始标识
Proxy
的使用确实引入了一个需要注意的新警告:在身份比较方面,被代理对象与原始对象不相等 (===)。例如:
const obj = {}
const wrapped = new Proxy(obj, handlers)
console.log(obj === wrapped) // false
在大多数情况下,原始版本和包装版本的行为相同,但请注意,它们在依赖严格比对的操作下将是失败的,例如 .filter()
或 .map()
。使用选项式 API 时,这种警告不太可能出现,因为所有响应式都是从 this
访问的,并保证已经是 Proxy
。
但是,当使用合成 API
显式创建响应式对象时,最佳做法是不要保留对原始对象的引用,而只使用响应式版本:
const obj = reactive({
count: 0
}) // no reference to original
侦听器
每个组件实例都有一个相应的侦听器实例,该实例将在组件渲染期间把“触碰”的所有 property
记录为依赖项。之后,当触发依赖项的 setter
时,它会通知侦听器,从而使得组件重新渲染。
将对象作为数据传递给组件实例时,Vue
会将其转换为 Proxy
。这个 Proxy
使 Vue
能够在 property
被访问或修改时执行依赖项跟踪和更改通知。每个 property
都被视为一个依赖项。
首次渲染后,组件将跟踪一组依赖列表——即在渲染过程中被访问的 property
。反过来,组件就成为了其每个 property
的订阅者。当 Proxy
拦截到 set
操作时,该 property
将通知其所有订阅的组件重新渲染。
响应性基础
声明响应式状态
要为 JavaScript
对象创建响应式状态,可以使用 reactive
方法:
import { reactive } from 'vue'
// 响应式状态
const state = reactive({
count: 0
})
reactive
相当于 Vue 2.x
中的 Vue.observable() API
,为避免与 RxJS
中的 observables
混淆因此对其重命名。该 API
返回一个响应式的对象状态。该响应式转换是“深度转换”——它会影响嵌套对象传递的所有 property
。
Vue
中响应式状态的基本用例是我们可以在渲染期间使用它。因为依赖跟踪的关系**,当响应式状态改变时视图会自动更新。**
这就是 Vue
响应性系统的本质。当从组件中的 data()
返回一个对象时,它在内部交由 reactive()
使其成为响应式对象。模板会被编译成能够使用这些响应式 property
的渲染函数。
在响应性基础 API 章节你可以学习更多关于 reactive
的内容。
创建独立的响应式值作为 refs
想象一下,我们有一个独立的原始值 (例如,一个字符串),我们想让它变成响应式的。当然,我们可以创建一个拥有相同字符串 property
的对象,并将其传递给 reactive
。Vue
为我们提供了一个可以做相同事情的方法 ——ref
:
import { ref } from 'vue'
const count = ref(0)
ref
会返回一个可变的响应式对象,该对象作为它的内部值——一个响应式的引用,这就是名称的来源。此对象只包含一个名为 value
的 property
:
import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
Ref 展开
当 ref
作为渲染上下文 (从 setup()
中返回的对象) 上的 property
返回并可以在模板中被访问时,它将自动展开为内部值。不需要在模板中追加 .value
:
<template>
<div>
<span>{{ count }}</span>
<button @click="count ++">Increment count</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return {
count
}
}
}
</script>
访问响应式对象
当 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'
你可以在 Refs API 部分中了解更多有关 refs
的信息
使用 readonly 防止更改响应式对象
有时我们想跟踪响应式对象 (ref
或 reactive
) 的变化,但我们也希望防止在应用程序的某个位置更改它。例如,当我们有一个被 provide
的响应式对象时,我们不想让它在注入的时候被改变。为此,我们可以基于原始对象创建一个只读的 Proxy
对象:
import { reactive, readonly } from 'vue'
const original = reactive({ count: 0 })
const copy = readonly(original)
// 在copy上转换original 会触发侦听器依赖
original.count++
// 转换copy 将导失败并导致警告
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++)
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))
// -> logs 0
setTimeout(() => {
count.value++
// -> logs 1
}, 100)
停止侦听
当 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()
})
})
我们之所以是通过传入一个函数去注册失效回调,而不是从回调返回它,是因为返回值对于异步错误处理很重要。
在执行数据请求时,副作用函数往往是一个异步函数:
const data = ref(null)
watchEffect(async onInvalidate => {
onInvalidate(() => {...}) // 我们在Promise解析之前注册清除函数
data.value = await fetchData(props.id)
})
我们知道异步函数都会隐式地返回一个 Promise
,但是清理函数必须要在Promise
被 resolve
之前被注册。另外,Vue
依赖这个返回的 Promise
来自动处理 Promise
链上的潜在错误。
副作用刷新时机
Vue
的响应性系统会缓存副作用函数,并异步地刷新它们,这样可以避免同一个“tick” 中多个状态改变导致的不必要的重复调用。在核心的具体实现中,组件的 update
函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时,默认情况下,会在所有的组件 update
前执行:
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
setup() {
const count = ref(0)
watchEffect(() => {
console.log(count.value)
})
return {
count
}
}
}
</script>
在这个例子中:
- count 会在初始运行时同步打印出来
- 更改 count 时,将在组件更新前执行副作用。
如果需要在组件更新后重新运行侦听器副作用,我们可以传递带有 flush
选项的附加 options
对象 (默认为 'pre'
):
// fire before component updates
watchEffect(
() => {
/* ... */
},
{
flush: 'post'
}
)
flush
选项还接受 sync
,这将强制效果始终同步触发。然而,这是低效的,应该很少需要。
侦听器调试
onTrack
和 onTrigger
选项可用于调试侦听器的行为。
onTrack
将在响应式property
或ref
作为依赖项被追踪时被调用。onTrigger
将在依赖项变更导致副作用被触发时被调用。
这两个回调都将接收到一个包含有关所依赖项信息的调试器事件。建议在以下回调中编写 debugger
语句来检查依赖关系:
watchEffect(
() => {
/* 副作用 */
},
{
onTrigger(e) {
debugger
}
}
)
onTrack
和 onTrigger
只能在开发模式下工作。
watch
watch API
完全等同于组件侦听器 property
。watch
需要侦听特定的数据源,并在回调函数中执行副作用。默认情况下,它也是惰性的,即只有当被侦听的源发生变化时才执行回调。
与 watchEffect
比较,watch
允许我们:
- 懒执行副作用;
- 更具体地说明什么状态应该触发侦听器重新运行;
- 访问侦听状态变化前后的值。
侦听单个数据源
侦听器数据源可以是返回值的 getter
函数,也可以直接是 ref
:
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
}
)
// 直接侦听ref
const count = ref(0)
watch(count, (count, prevCount) => {
/* ... */
})
侦听多个数据源
侦听器还可以使用数组同时侦听多个源:
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
/* ... */
})
与 watchEffect 共享的行为
watch
与 watchEffect
共享停止侦听,清除副作用 (相应地 onInvalidate
会作为回调的第三个参数传入)、副作用刷新时机和侦听器调试行为。
转自vue3文档