【vue3】关于ref、toRef、toRefs那些事
vue3项目中关于ref、toRef、toRefs的使用详解
·
😉博主:初映CY的前说(前端领域) 📒本文核心:ref、toRef、toRefs的使用方法
【前言】我们在上一节的学习当中,使用了reactive()函数将vue3中的数据变成响应式的数据,本文中所讲的三个方法也能实现将数据转化为响应式数据。话不多说,让我们来学习下这三个方法怎么用,以及与reactive的区别。
⭐一、ref
ref 函数,可以把简单数据类型包裹为响应式数据(复杂类型也可以),注意 JS 中操作值的时候,需要加 .value 属性,模板中正常使用即可。
举个例子:
- ref包装基本类型数据
App.vue
<template>
<div class="container">
<div>{{ name }}</div>
<button @click="updateName">修改数据</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'App',
setup() {
const name = ref('初映')
const updateName = () => {
name.value = '初映CY的前说'
}
return { name, updateName }
},
}
</script>
可看见写法与reactive()一样,不过是在js中书写的时候需要额外加一个.value即可
- ref包装复杂类类型数据
注意:ref 其实也可以包裹复杂数据类型为响应式数据,一般对于数据类型未确定的情况下推荐使用 ref,例如后端返回的数据。
<template>
<div class="container">
<div>{{ data?.name }}</div>
<button @click="updateName">修改数据</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'App',
setup() {
// 初始值是 null
const data = ref(null)
setTimeout(() => {
// 右边的对象可能是后端返回的
data.value = {
name: '初映',
}
}, 1000)
const updateName = () => {
data.value.name = 'CY'
}
return { data, updateName }
},
}
</script>
- 如何选择?
ref()和reactive()都是Vue.js3.0中提供的两个响应式API。
ref()主要用于创建一个响应式数据,它会将一个普通的JavaScript对象转换为一个响应式的对象,从而使数据的变化可以被Vue实例所追踪,当数据发生变化时,Vue会自动更新相关视图。ref()创建的响应式数据可以通过.value属性来访问和修改。
reactive()则主要用于创建一个响应式对象,可以用作包含多个值的状态对象,通常用于管理复杂的状态。它可以将一个普通的JavaScript对象转换为一个响应式对象,并且支持嵌套属性,即使嵌套属性发生变化也会被Vue实例所追踪。当响应式对象中有任何一个属性发生变化时,Vue也会自动更新相关的视图。
当你明确知道需要包裹的是一个对象,那么推荐使用 reactive,其他情况使用 ref 即可。
Vue3.2 之后,更推荐使用 ref,性能得到了很大的提升。
⭐二、toRef
toRef 函数的作用:转换响应式对象中某个属性为单独响应式数据,并且转换后的值和之前是关联的(ref 函数也可以转换,但值非关联)。
先看下面这个例子:
<template>
<div class="container">
<h2>name: {{ obj.name }} age: {{obj.age}}</h2>
<button @click="updateName">修改数据</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
name: '初映',
age: 18,
address: '江西',
sex: '男',
})
const updateName = () => {
obj.name = '初映CY的前说'
}
return { obj, updateName }
},
}
</script>
这样写也可以将数据进行更改成为响应式的数据,但是带来了两个问题:
-
问题 1:模板中都要使用 obj. 进行获取数据,麻烦。
-
问题 2:明明模板中只用到了 name 和 age,却把整个 obj 进行了导出,没必要,性能浪费。
<template>
<div class="container">
<h2>name: {{ name }} </h2>
<button @click="updateName">修改数据</button>
</div>
</template>
<script>
import { reactive,toRef } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
name: '初映',
age: 18,
address: '江西',
sex: '男',
})
const name = toRef(obj, 'name')
const updateName = () => {
obj.name = '初映CY的前说'
}
return { name, updateName }
},
}
</script>
这样把我们需要的数据放进return即可,节约了性能与在模板中的写法,有点点了‘按需导入’的意思
⭐三、torefs
toRefs 函数的作用:转换响应式对象中所有属性为单独响应式数据,并且转换后的值和之前是关联的。
<template>
<div class="container">
<h2>{{ name }} {{ age }}</h2>
<button @click="updateName">修改数据</button>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
name: '初映',
age: 10,
})
const updateName = () => {
obj.name = '初映CY的前说'
obj.age = 18
}
return { ...toRefs(obj), updateName }
},
}
</script>
toRefs将我们所有的响应式数据都进行return出去了,届时直接用上数据名称即可,记得加上…喔
至此本文结束,愿你有所收获!
期待大家的关注与支持! 你的肯定是我更新的最大动力!!!
更多推荐
已为社区贡献11条内容
所有评论(0)