ref、isRef、toRef、toRefs、toRaw看着一堆类似的东西,一个头两个大,今天整理一篇文章详细介绍它们的功能及区别。
1、ref
ref 属性除了能够获取元素外,也可以使用 ref 函数,创建一个响应式数据,当数据值发生改变时,视图自动更新。
<script lang="ts" setup>
import { ref } from 'vue'
let str: string = ref('我是张三')
const chang = () => {
str.value = '我是钻石王老五'
console.log(str.value)
}
</script>
<template>
<div>
{{ str }}
<button type="button" @click="chang">修改值</button>
</div>
</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) 将对象中的某个值转化为响应式数据,分为两种情况:
<script>
import { ref,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挂载前调用
</script>
<template>
<div>
{{ obj.name }} ------- {{ name }}
<button type="button" @click="chang">修改值</button>
</div>
</template>
注意:如果是在 DOM 挂载之前调用 chang 方法,改变数值,此时数据和视图都会发生改变。
<script>
import { ref,reactive } from 'vue'
let obj = reactive({
name: '姓名',})
let name: string = toRef(obj,'name')
const chang = () => {
obj.name = '钻石王老五'
name.value = '李四'
}
</script>
<template>
<div>
{{ obj.name }} ------- {{ name }}
<button type="button" @click="chang">修改值</button>
</div>
</template>
最终值为 “李四”。
4、toRefs
toRefs 用来解构 ref、reactive 包裹的响应式数据。接收一个对象作为参数,遍历对象上的所有属性,将对象上的所有属性变成响应式数据。
let obj = reactive({
name: '姓名',})
let { name,age } = toRefs(obj)
const chang = () => {
name.value = '钻石王老五'
age.value++
}
</script>
<template>
<div>
{{ name }} ------- {{ age }}
<button type="button" @click="chang">修改值</button>
</div>
</template>
toRefs 解构数据时,如果某些参数作为可选参数,可选参数不存在时就会报错,如:
let obj = reactive({
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 } = 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 转换得到的数据会被修改,视图也会更新,如:
<script lang="ts" setup>
import { ref,toRefs,reactive,toRaw } from 'vue'
let obj = reactive({
name: '姓名',})
let newObj = toRaw(obj)
const chang = () => {
obj.name = '钻石王老五'
obj.age++
}
</script>
<template>
<div>
{{ obj.name }} ------- {{ obj.age }}
<button type="button" @click="chang">修改值</button>
<br />
{{ newObj }}
</div>
</template>
如果修改 toRaw 得到的原始数据,原数据也会被修改,但是视图不更新。如:
<script lang="ts" setup>
import { ref,})
let newObj = toRaw(obj)
const chang = () => {
obj.name = '钻石王老五'
obj.age++
}
const changNew = () => {
newObj.name = '搞笑'
console.log('newObj',newObj)
console.log('obj',obj)
}
</script>
<template>
<div>
{{ obj.name }} ------- {{ obj.age }}
<button type="button" @click="chang">修改值</button>
<br />
{{ newObj }}
<button @click="changNew">修改</button>
</div>
</template>
原文地址:https://www.cnblogs.com/web-learn/p/16725393.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。