vue3的ref、isRef、toRef、toRefs、toRaw详细介绍

请听我为您详细介绍vue3中ref、isRef、toRef、toRefs、toRaw的作用和用法。

一、ref

ref是Vue3提供的一个响应式数据类型，将非响应式数据转换为响应式数据。 ref接收一个参数，返回的是一个对象，通过修改对象的value属性来更新数据。

import { ref } from 'vue'

const count = ref(0)

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

count.value++ // 改变数据

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

二、isRef

isRef是Vue3提供的一个函数，用于判断值是否是一个ref响应式引用对象。

import { ref, isRef } from 'vue'

const count = ref(0)

console.log(isRef(count)) // 输出：true

console.log(isRef(count.value)) // 输出：false

三、toRef

toRef是Vue3提供给我们一个函数，它用于接收一个对象和对象的某个属性名作为参数，并返回该对象某个属性名与ref相似的响应式对象。

import { reactive, toRef } from 'vue'

const data = reactive({
  name: '张三',
  age: 18,
  gender: '男'
})

const ageRef = toRef(data, 'age')

console.log(ageRef.value) // 输出：18

ageRef.value += 1 // 修改ageRef的值，data.age的值也会更新

console.log(data.age) // 输出：19

四、toRefs

toRefs是Vue3提供给我们一个函数，它用于接收一个响应式对象，将其所有属性转换为响应式对象引用。

import { reactive, toRefs } from 'vue'

const data = reactive({
  name: '张三',
  age: 18,
  gender: '男'
})

const refs = toRefs(data)

console.log(refs.name.value) // 输出：张三

refs.age.value += 1 // 修改ageRef的值，data.age的值也会更新

console.log(data.age) // 输出：19

五、toRaw

toRaw是Vue3提供的一个函数，用于返回被reactive、ref、toRef或者toRefs包装的对象的原始对象。

import { reactive, toRaw } from "vue";

const data = reactive({ name: "张三", age: 18 });

const original = toRaw(data);

console.log(original === data) // 输出：false

以上就是vue3的ref、isRef、toRef、toRefs、toRaw的详细介绍。