vue3当中ref有几种用法？什么情况下用，最合适，用reactive最好是什么时候，代码怎么写？

突然暴富的我2023-09-24 12:52

在Vue3中，ref有两种用法：基本用法和高级用法。

基本用法：

创建ref变量：使用ref函数，将普通数据类型转化为响应式对象。

js 复制代码

import { ref } from 'vue'

const count = ref(0) // 创建一个响应式对象count，初始值为0

获取ref变量的值：直接访问ref变量的value属性。

js 复制代码

console.log(count.value) // 输出0

修改ref变量的值：直接修改ref变量的value属性。

js 复制代码

count.value++ // 将count的值加一

高级用法：

创建ref对象：使用ref函数，传入一个对象，创建一个包含多个响应式变量的ref对象。

js 复制代码

import { ref } from 'vue'

const userInfo = ref({
  name: 'Tom',
  age: 18
})

获取ref对象的成员的值：访问ref对象的成员的value属性。

js 复制代码

console.log(userInfo.value.name) // 输出Tom

修改ref对象的成员的值：直接修改ref对象的成员的value属性。

js 复制代码

userInfo.value.age = 20 // 将userInfo的age属性修改为20

在什么情况下使用ref最合适？

需要将普通数据类型转化为响应式对象时，可以使用ref。
需要在template模板中使用数据时，需要使用ref。

使用reactive最好的时候：

当需要创建一个包含多个响应式变量的对象时，可以使用reactive函数。

代码示例：

js 复制代码

import { reactive, ref } from 'vue'

const state = reactive({
  count: 0,
  userInfo: {
    name: 'Tom',
    age: 18
  }
})

const countRef = ref(0)

console.log(state.count) // 输出0
console.log(state.userInfo.name) // 输出Tom
console.log(countRef.value) // 输出0

state.count++ // 将state的count属性加一
state.userInfo.age = 20 // 将state的userInfo的age属性修改为20
countRef.value++ // 将countRef的值加一