本篇文章带大家深入聊聊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中文网其他相关文章!