首发！vue3重点！一文了解Composition API新特性：ref、toRef、toRefs

一文了解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元素。