Vue3 的 Ref、IsRef、ToRef、ToRefs、ToRaw 详细介绍

1、详细ref

ref 属性除了能够获取元素外，介绍也可以使用 ref 函数，详细创建一个响应式数据，介绍当数据值发生改变时，详细视图自动更新。介绍

import { ref } from vue

let str: string = ref(我是详细张三)

const chang = () => {

str.value = 我是钻石王老五

console.log(str.value)

}

{ { str }}

</template>

2、isRef

检查变量是介绍否为一个被 ref 包装过的对象，如果是详细返回 true ，否则返回 false。介绍

import { ref,详细 isRef, reactive } from vue

let str: string = ref(我是张三)

let num: number = 1

let per = reactive({ name: 代码女神, work: 程序媛 })

console.log(strRes, isRef(str)) //true

console.log(numRes, isRef(num)) //false

console.log(perRes, isRef(per)) //false

3、toRef

创建一个 ref 对象，介绍其 value 值指向另一个对象中的详细某个属性。

toRef(obj,介绍 key) 将对象中的某个值转化为响应式数据，分为两种情况：

toRef 定义原始非响应式数据，详细修改值时，原始数据和 copy 数据都会变的服务器租用，但是视图不更新。

import { ref, isRef, toRef, reactive } from vue

let obj = {

name: 姓名,

age: 18,

}

let name: string = toRef(obj, name)

const chang = () => {

obj.name = 钻石王老五

name.value = 李四

console.log(obj.name) // 李四

console.log(name, name) // 李四

}

//chang() //DOM挂载前调用

{ { obj.name }} ------- { { name }}

</template>

注意：如果是在 DOM 挂载之前调用 chang 方法，改变数值，此时数据和视图都会发生改变。

toRef 定义原始数据响应式数据，修改值时，原始数据，和 copy 数据都会改变，视图也会更新。

import { ref, isRef, toRef, reactive } from vue

let obj = reactive({

name: 姓名,

age: 18,

})

let name: string = toRef(obj, name)

const chang = () => {

obj.name = 钻石王老五

name.value = 李四

}

{ { obj.name }} ------- { { name }}

</template>

最终值为 “李四”。

4、toRefs

toRefs 用来解构 ref、reactive 包裹的响应式数据。接收一个对象作为参数，遍历对象上的所有属性，将对象上的所有属性变成响应式数据。

let obj = reactive({

name: 姓名,

age: 18,

})

let { name, age } = toRefs(obj)

const chang = () => {

name.value = 钻石王老五

age.value++

}

{ { name }} ------- { { age }}

</template>

toRefs 解构数据时，如果某些参数作为可选参数，亿华云可选参数不存在时就会报错，如：

let obj = reactive({

name: 姓名,

age: 18,

})

let { name, age, work } = toRefs(obj)

const chang = () => {

name.value = 钻石王老五

age.value++

console.log(work, work.value)

work.value = 程序媛

}

此时可以使用 toRef 解决此问题，使用 toRef 解构对象某个属性时，先检查对象上是否存在该属性，如果存在就继承对象上的属性值，如果不存在就会创建一个。

修改上边的代码为：

let obj = reactive({

name: 姓名,

age: 18,

})

let { name, age } = toRefs(obj)

let work = toRef(obj, work)

const chang = () => {

name.value = 钻石王老五

age.value++

console.log(work, work.value)

work.value = 程序媛

}

5、toRaw

将响应式对象转为原始对象。做一些不想被监听的事情，从 ref 或 reactive 得到原始数据。

修改原响应式数据时，toRaw 转换得到的数据会被修改，视图也会更新，如：

import { ref, isRef, toRef, toRefs, reactive, toRaw } from vue

let obj = reactive({

name: 姓名,

age: 18,

})

let newObj = toRaw(obj)

const chang = () => {

obj.name = 钻石王老五

obj.age++

}

{ { obj.name }} ------- { { obj.age }}

{ { newObj }}

</template>

如果修改 toRaw 得到的原始数据，原数据也会被修改，但是视图不更新。如：

import { ref, isRef, toRef, toRefs, reactive, toRaw } from vue

let obj = reactive({

name: 姓名,

age: 18,

})

let newObj = toRaw(obj)

const chang = () => {

obj.name = 钻石王老五

obj.age++

}

const changNew = () => {

newObj.name = 搞笑

console.log(newObj, newObj)

console.log(obj, obj)

}

{ { obj.name }} ------- { { obj.age }}

{ { newObj }}

</template>云服务器提供商