基本信息

---

下载

文档摘要

---

第

一文聊聊vue3中的ref、toRef、toRefs

本篇文章带大家深入聊聊vue3项目中关于ref、toRef、toRefs的使用方法，希望对大家有所帮助！

template

divAIner

div{{name}}/div

button@click=updateName修改数据/button

/div/templatescript

import{ref}fromvue

exportdefault{

name:App,

setup(){

constname=ref(初映)

constupdateName=()={

name.value=初映CY的前说

return{name,updateName}

}/script

template

div

template

div

template

div

这样把我们需要的数据放进return即可，节约了性能与在模板中的写法，有点点了按需导入的意思

三、torefs

toRefs函数的作用：转换响应式对象中所有属性为单独响应式数据，并且转换后的值和之前是关联的。

template

div

toRefs将我们所有的响应式数据都进行return出去了，届时直接用上数据名称即可，记得加上喔

据。话不多说,让我们来学习下这三个方法怎么用，以及与reactive的区别。