ref和reactive

创造一个响应式数据（因为都是响应式数据，底层原理是相同的，所以选项式API直接用就行，会把data返回的js对象自动转为响应式的），如果你修改传进去的参数对应的原变量是无法响应的，虽然数值会改变。

对于ref如果你传入的是值数据类型，那么那只会传入值（修改原变量不会影响ref），如果传引用数据类型，会传入那个地址（例如修改列表.value也会变，但不会触发更新理由同下）

Reactive Proxy vs. Original​

值得注意的是，reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的：

js

const raw = {}
const proxy = reactive(raw)

// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false

只有代理对象是响应式的，更改原始对象不会触发更新，但数据是变了。因此，使用 Vue 的响应式系统的最佳实践是 仅使用你声明对象的代理版本。

1. 有限的值类型：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。

2. 不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：

3. const a = {

     foo:1,

     bar:2,

   }

   const state = reactive(a)

   const fooRef = ref(state) // change the impl...   这里ref指向了reactive，更改是直接更改reactive里的数据，所以视图会更新。  state指向了a a更改，虽然数据改但不会更新