全面盘点一下vue3中的ref、reactive

知道大家使用 Vue3 的时候有没有这样的疑惑，“ref、rective 都能创建一个响应式对象，我该如何选择？”，“为什么响应式对象解构之后就失去了响应式？应该如何处理？” 今天咱们就来全面盘点一下 ref、reactive，相信看完你一定会有不一样的收获，一起学起来吧！

reactive()

基本用法

在 Vue3 中我们可以使用 reactive() 创建一个响应式对象或数组：

import { reactive } from 'vue'

const state = reactive({ count: 0 })

这个响应式对象其实就是一个 Proxy， Vue 会在这个 Proxy 的属性被访问时收集副作用，属性被修改时触发副作用。

要在组件模板中使用响应式状态，需要在 setup() 函数中定义并返回。【相关推荐：vuejs视频教程、web前端开发】

<script>
import { reactive } from &#39;vue&#39;

export default {  setup() {    const state = reactive({ count: 0 })    return {      state    }  }}
</script>

<template>
  <div>{{ state.count }}</div>
</template>

当然，也可以使用