reactive

reactive 代理

reactive 返回对象的响应式代理。

import { reactive } from 'vue'

const arr = reactive([1, 2, 3, 4, 5])
arr.push(4)
arr.pop()
arr.pop()
arr.pop()
// [ 1, 2, 3 ]

const obj = reactive({ a: 1, b: { c: 3 } })
obj.b.c = 7
// { "a": 1, "b": { "c": 7 } }

注意： reactive 只能代理对象（基础类型需要包裹在对象中进行代理）

ref 解包

用 ref 函数生成的对象可以直接放到 reactive 函数中，并且自动解包。即不需要再使用 count.value++，而是直接使用 obj.count++。

import { ref, reactive } from 'vue'

const count = ref(1)
const obj = reactive({})

obj.count = count
obj.name = {}

obj.name.c = 1
obj.name.c++

count.value++
obj.count++

// 3
// { "count": 3, "name": { "c": 2 } }

发现 reactive 函数使用了代理之后，可以将对象后续新增的属性也进行代理。这比之前通过 defineProperty 来定义方便了很多。之前的话只会对初始化的值进行响应式绑定。

如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。

不能使用基础类型

const a = reactive('3')

这种对象是无法操作的，应该它是基础类型。