值得注意的是,reactive() 返回的是一个原始对象的 Proxy,它和原始对象是不相等的:
const raw = {
}
const proxy = reactive(raw)
// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false
只有代理对象是响应式的,更改原始对象不会触发更新。因此,使用 Vue 的响应式系统的最佳实践是 仅使用你声明对象的代理版本。
<script setup>
import {
reactive } from 'vue'
const raw = ['foo']
const reacRaw = reactive(raw)
function changeOrigin() {
raw.push('bar')
}
function changeReac() {
reacRaw.push('baz')
}
</script>
<template>
<button @click="changeOrigin">
{
{ raw }}
</button>
<br>
<button @click = "changeReac">
{
{ reacRaw }}
</button>
</template>
演练场:演练场-vuejs.org
为保证访问代理的一致性,对同一个原始对象调用 reactive() 会总是返回同样的代理对象,而对一个已存在的代理对象调用 reactive() 会返回其本身:
// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy) // true
// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) // true
这个规则对嵌套对象也适用。依靠深层响应性,响应式对象内的嵌套对象依然是代理:
const proxy = reactive({
})
const raw = {
}
proxy.nested = raw
console.log(proxy.nested === raw) // false