ref reactive

ref	对比	reactive
适合	基本类型/单值	对象
访问方式	.value	直接访问
底层	包装对象	Proxy代理
替换整个值	很方便	不方便
解构后响应式	会丢失（普通解构）	会丢失

Proxy只能代理对象，所以reactive只能代理对象，而ref会包一层而变成对象

reactive的坑

直接替换会丢失响应式

let user = reactive({
  name: 'Tom'
})

user = {
  name: 'Jack'
}

原来的Proxy被整个替换掉了，而ref可以整个替换

const user = ref({
  name: 'Tom'
})

user.value = {
  name: 'Jack'
}

reactive解构丢失响应式

const user = reactive({
  name: 'Tom'
})

const { name } = user

这里的name已经不是响应式了

解决：

import { toRefs } from 'vue'

const user = reactive({
  name: 'Tom'
})

const { name } = toRefs(user)

总结

• ref：给一个值讨一个盒子
• reactive：直接把对象变成响应式代理

底层关系：

实际上ref({})内部也会调用reactive()，所以里面的对象其实也是Proxy