一文了解Composition API新特性:ref、toRef、toRefs
在上一篇文章中,我们初步了解了vue3的新特性,今天,我们将延续Composition API的话题,来了解Composition API带来的新特性: ref
、 toRef
和 toRefs
。
下面开始进入本文的讲解✨
一、🙎如何理解ref、toRef和toRefs
1、ref、toRef和toRefs是什么
(1)ref
1)ref是什么
ref
可以生成值类型
(即基本数据类型) 的响应式数据;ref
可以用于模板和reative;ref
通过.value
来修改值(一定要记得加上.value
);ref
不仅可以用于响应式,还可以用于模板的DOM
元素。
2)举个例子🌰
假设我们定义了两个值类型的数据,并通过一个定时器来看它响应式前后的效果。接下来我们用代码来演示一下:
<template>
<p>ref demo {
{ageRef}} {
{state.name}}</p>
</template>
<script>
import { ref, reactive } from 'vue'
export default {
name: 'Ref',
setup(){
const ageRef = ref(18)
const nameRef = ref('monday')
const state = reactive({
name: nameRef
})
setTimeout(() => {
console.log('ageRef', ageRef.value,'nameRef', nameRef.value)
ageRef.value = 20
nameRef.value = 'mondaylab'
console.log('ageRef', ageRef.value,'nameRef', nameRef.value)
},1500)
return{
ageRef,
state
}
}
}
</script>
复制代码
别眨眼,来看下此时浏览器的显示效果:
大家可以看到,控制台先后打印的顺序是响应式前的数据和响应式后的数据。因此,通过 ref
,可以实现值类型的数据响应式。
值得注意的是, ref
不仅可以实现响应式,还可以用于模板的DOM元素。我们用一段代码来演示一下:
<template>
<p ref="elemRef">今天是周一</p>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
name: 'RefTemplate',
setup(){
const elemRef = ref(null)
onMounted(() => {
console.log('ref template', elemRef.value.innerHTML, elemRef.value)
})
return{
elemRef
}
}
}
</script>
复制代码
此时浏览器的显示效果如下所示:
我们通过在模板中绑定一个 ref
,之后在生命周期中调用,最后浏览器显示出该 DOM
元素。所以说, ref
也可以用来渲染模板中的DOM元素。