reactive

• 接收一个对象，返回一个响应式的被 Proxy 包装过的对象（返回的对象 不等于 源对象）
  • 基本类型无法被 reactive 代理
• 等同于 Vue2.0 中的 Vue.observable()
• 原理：Proxy 代理
  • 深度响应
  • 递归代理

<template>
  <div>{{ proxyObj.name }}</div>
</template>

<script>
import { reactive } from 'vue';

export default {
  name: 'App',
  setup() {
    const proxyObj = reactive({
      name: 'Lance',
      age: 233
    });

    console.log(proxyObj);

    return {
      proxyObj
    }
  }
}
</script>

<template></template>
<script>
import { reactive } from 'vue';
export default {
  name: 'App',
  setup() {
    const obj = reactive(1); // 无法包装基本类型
  }
}
</script>

reactive() 的局限性

reactive() API 有两条限制：

1. 仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的 原始类型 无效。
2. 因为 Vue 的响应式系统是通过属性访问进行追踪的，因此我们必须始终保持对该响应式对象的相同引用。这意味着我们不可以随意地“替换”一个响应式对象，因为这将导致对初始引用的响应性连接丢失：

let state = reactive({ count: 0 })
// 上面的引用 ({ count: 0 }) 将不再被追踪（响应性连接已丢失！） 
state = reactive({ count: 1 })

同时这也意味着当我们将响应式对象的属性赋值或解构至本地变量时，或是将该属性传入一个函数时，我们会失去响应性：

const state = reactive({ count: 0 })

// n 是一个局部变量，同 state.count
// 失去响应性连接
let n = state.count
// 不影响原始的 state n++

// count 也和 state.count 失去了响应性连接
let { count } = state
// 不会影响原始的 state
count++

// 该函数接收一个普通数字，并且
// 将无法跟踪 state.count 的变化
callSomeFunction(state.count)

数组异步赋值问题

这样赋值页面是不会变化的因为会脱离响应式

let person = reactive<number[]>([]);
setTimeout(() => {
  person = [1, 2, 3];
  console.log(person);
}, 1000);

解决方案：

1. 使用 push