2
【vue3】关于ref、toRef、toRefs那些事
source link: https://blog.51cto.com/u_16171599/6561245
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
- ⭐一、ref
- ⭐二、toRef
- ⭐三、torefs
⭐一、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>Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK