在Vue3中,响应式数据使用ref
和reactive
函数来创建。
- 使用
ref
函数创建响应式数据:
import { ref } from 'vue' const count = ref(0) // 创建一个响应式数据count并初始化为0 console.log(count.value) // 访问响应式数据需要使用.value属性 count.value++ // 修改响应式数据
- 使用
reactive
函数创建响应式对象:
import { reactive } from 'vue' const state = reactive({ count: 0 }) // 创建一个响应式对象state,并包含一个属性count console.log(state.count) // 直接访问响应式对象属性 state.count++ // 修改响应式对象属性
需要注意的是,Vue3中的响应式数据不再自动解包,需要使用.value
属性或直接访问对象属性来获取数据。另外,响应式数据的变更也不再自动触发视图更新,需要手动触发或使用computed
和watch
来处理。