本篇文章带大家深入聊聊vue3项目中关于ref、toRef、toRefs的使用方法，希望对大家有所帮助！
ref 函数，可以把简单数据类型包裹为响应式数据（复杂类型也可以），注意 JS 中操作值的时候，需要加 .value 属性，模板中正常使用即可。
举个例子：
<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即可。【相关推荐：vuejs视频教程、web前端开发】
<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>
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 函数的作用：转换响应式对象中所有属性为单独响应式数据，并且转换后的值和之前是关联的。
<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出去了，届时直接用上数据名称即可，记得加上…喔
据。话不多说,让我们来学习下这三个方法怎么用，以及与reactive的区别。
以上是一文聊聊vue3中的ref、toRef、toRefs的详细内容。更多信息请关注PHP中文网其他相关文章！
