vue3中ref和reactive的用法和解析(推荐)

Vue3中ref和reactive的用法和解析

Vue3中的响应式系统

在Vue3中，响应式系统被重构为了更强大的API，并且与Vue2有很多不同之处。其中两个重要的API是ref和reactive。

ref是一个函数，用于将一个基本类型值或一个对象转换为响应式数据。而reactive则是一个函数，用于将一个对象转换为响应式数据。

使用ref

使用ref来创建一个响应式数据，需要传入一个初始值，函数会返回一个响应式对象。

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 输出0

count.value++
console.log(count.value) // 输出1

count.value = 10
console.log(count.value) // 输出10

在示例中，我们使用ref来创建了一个名为count的响应式数据，并将初始值设为0。注意，由于count是一个对象，所以需要使用.value来获取或设置其值。

使用reactive

使用reactive来创建一个响应式对象可以方便我们在组件中使用。

import { reactive } from 'vue'

const user = reactive({
  name: 'Jerry',
  age: 18,
})

console.log(user.name) // 输出Jerry

user.name = 'Tom'
console.log(user.name) // 输出Tom

user.job = 'developer'
console.log(user.job) // 输出developer

在示例中，我们使用reactive来创建了一个名为user的响应式对象，其中包含了一个name属性和一个age属性。可以看到，我们可以像操作普通JS对象一样，去添加和修改user里的属性和值。

ref和reactive的比较

• ref：实现简单，适合单个基本类型数据的响应式绑定。
• reactive：可将一个对象的所有属性都转换成响应式数据，适合于组件中需要处理的整个对象。

虽然使用ref来创建响应式数据相对简单，不用创建一个对象包裹那个基本类型的值。但是，注意，只有在需要时才转换基本类型数据为响应式数据。当您在处理对象时，建议直接将reactive用于这些对象。

总结

• ref用来转换一个基本类型的值或对象为响应式对象
• reactive用来转换一个JS对象为响应式对象

在使用Vue3的响应式系统时，需要清楚地了解各个API的主要目的以及使用场景，以方便快速构建您的Vue3应用。