Vue3的 响应式数据

在Vue3中，响应式数据使用ref和reactive函数来创建。

1. 使用ref函数创建响应式数据：

import { ref } from 'vue'

const count = ref(0) // 创建一个响应式数据count并初始化为0

console.log(count.value) // 访问响应式数据需要使用.value属性

count.value++ // 修改响应式数据

1. 使用reactive函数创建响应式对象：

import { reactive } from 'vue'

const state = reactive({ count: 0 }) // 创建一个响应式对象state，并包含一个属性count

console.log(state.count) // 直接访问响应式对象属性

state.count++ // 修改响应式对象属性

需要注意的是，Vue3中的响应式数据不再自动解包，需要使用.value属性或直接访问对象属性来获取数据。另外，响应式数据的变更也不再自动触发视图更新，需要手动触发或使用computed和watch来处理。