【vue3】响应式代理vs原始对象

值得注意的是，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