Vue3如何理解ref toRef和toRefs的区别
⽬录
⼀、基础
4.最佳的使⽤⽅式
⼆、深⼊
1.为什么需要ref
3.为什么需要toRef和toRefs
Vue3中新增了⼏种创建响应式数据的⽅法，其各⾃的作⽤当然也不尽相同，每⼀种⽅法都有其⾃⼰的应⽤场景，今天我们来聊聊什么是ref toRef和toRefs？三者在使⽤⽅式上有什么不同？最佳的使⽤⽅式是什么？
⼀、基础
(1) ⽣成值类型的响应式数据, 通过 .value修改值
<template>
<div>{{ ageRef }}</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const ageRef = ref(20)
setInterval(() => {
ageRef.value += 1
}, 1000)
return {
ageRef
}
},
}
</script>
上⾯这段代码，定义了⼀个ageRef变量，并每秒将ageRef加1，页⾯展⽰的数值也会加1.
(2) 可⽤于reactive中
将上⾯的代码改动如下, 引⼊reactive定义变量，将ref定义的变量引⼊reactive中, 模板中展⽰reactive的变量. 最后的效果和上⾯(1)的⼀样
<template>
<div>{{ info.age }}</div>
</template>
<script>
import { ref, reactive } from 'vue'
export default {
setup() {
const ageRef = ref(20)
const info = reactive({
age: ageRef
})
setInterval(() => {
ageRef.value += 1
}, 1000)
return {
info
}
},
}
</script>
(3) 可⽤于获取Dom
<template>
<div ref="eleDom">ref-dom-test</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
const eleDom = ref(null)
onMounted(() => {
console.log(eleDom.value.innerHTML) // ref-dom-test
})
return {
eleDom
}
},
}
上⾯代码控制台输出ref-dom-test, 说明获取到了Dom元素.
要获取Dom元素必须要符合以下规则
定义的ref变量名必须要和模板中ref中的值⼀致，如代码中的eleDom
针对⼀个响应式对象的prop
创建⼀个ref，具有响应式
两者保持引⽤关系
我们来看下⾯这段代码
<template>
<div>{{ state.age }} --- {{ ageRef }}</div>
</template>
<script>
import { toRef, reactive } from 'vue'
export default {
setup() {
const state = reactive({
name: 'JL',
age: 18
})
const ageRef = toRef(state, 'age')
setTimeout(() => {
state.age = 20
}, 1000)
setTimeout(() => {
ageRef.value = 21
}, 2000)
return {
state,
ageRef
}
},
}
</script>
上⾯的代码中，使⽤toRef将state的age属性变成⼀个响应式变量，然后在1秒后将state的age值变为20，此时ageRef也会变成20；在2秒后将ageRef的值变为21，此时state的age值也会变成21，说明了两者保持相互引⽤关系
toRef针对的是响应式，针对的不是普通对象，如果⽤于⾮响应式，产出的结果不具有响应式
将⼀个响应式对象转为普通对象
对象的每⼀个属性都是对应的ref
两者保持引⽤关系
我们来看下⾯这段代码
<template>
<div>{{ name }}---{{ age }}</div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
setup() {
const state = reactive({
name: 'JL',
age: 18
})
const stateRefs = toRefs(state)
setTimeout(() => {
state.age = 20
}, 1000)
setTimeout(() => {
stateRefs.age.value = 21
}, 2000)
return stateRefs
},
}
</script>
上⾯的代码中，使⽤toRefs将state转变成⼀个普通对象，这时候就可以直接返回stateRefs，这时候在template就可以直接调⽤name和age。然后在1秒后将state的age值变为20，此时页⾯中的age也会变成20；在2秒后将stateRefs中的name的值变为21，此时页⾯中的age值也会变成21，说明了两者保持相互引⽤关系
toRefs将响应式对象变成普通对象后，每⼀个属性都具有响应式ref，此时需要使⽤ .value才能获取其值
4.最佳的使⽤⽅式
reactive做对象的响应式，ref做值类型响应式
setup中返回toRefs(state), 或者toRef(state, 'xxx')---(这样就能够在template中不使⽤)
ref的变量命名都⽤xxxRef
合成函数返回响应式对象时，使⽤toRefs
例如：
<template>
<div>x:{{x}} y:{{y}}</div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
setup() {
function test() {
const state = reactive({
x: 1,
y: 2
})
return toRefs(state)
}
const {x, y} = test()
setTimeout(() => {
x.value = 2
}, 1000)
return {
x,
y
}
}
}
</script>
上⾯的代码，test函数中定义了响应式对象state，并通过toRefs将其转为普通对象并返回，这时候可以结构赋值，并且值是响应式的
reactive声明类型
⼆、深⼊
1.为什么需要ref
在上⾯我们讲到，使⽤reactive和toRef也可以将值类型转换成响应式的，为什么还需要ref呢？
值类型不具有响应式（proxy）
setup()、computed()...都可能返回值类型，如果vue不定义ref,⽤户需要响应式的值类型的时候就会通过其他⽅式
(reactive/toRef, reactive/toRefs)⾃造ref，就会造成代码更混乱
ref为什么需要加⼀个.value来获取值呢?为什么要这么⿇烦呢?
ref是⼀个对象(不会丢失响应式),value存储值
通过.value属性的get和set来实现响应式
⽤于reactive和模板(vue编译)的时候不需要.value，其他情况都需要
3.为什么需要toRef和toRefs
初衷: 在不丢失响应式的前提下，对对象数据进⾏解构
前提: 针对的是响应式对象，不是普通对象
结果: 不创造响应式，只延续响应式
到此这篇关于Vue3如何理解ref toRef和toRefs的区别的⽂章就介绍到这了，更多相关Vue3 ref toRef和toRefs内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。