写在前面
朋友们晚上好呀,讲toRefs函数。
toRefs函数
toRefs是函数,转换响应式对象中所有属性(可以是一部分)为单独响应式数据,对象成为普通对象, 并且值是关联的。
示例代码:
<template>
<div>
<div>数据的响应式</div>
<hr>
<!-- <div>{{obj.msg}}</div> -->
<div>{{msg}}</div>
<div>{{info}}</div>
<div>
<button @click='handleClick'>点击</button>
</div>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
name: 'App',
setup () {
// 需求:模板中必须有添加对象obj前缀,而是直接获取属性
// reactive方法包裹的对象中的数据都是响应式的
const obj = reactive({
msg: 'hello',
info: 'hi',
abc: 'abc'
})
// 把对象中的单个属性取出并且保证数据的响应式
// const msg = toRef(obj, 'msg')
// const info = toRef(obj, 'info')
// 把obj对象中的属性结构出来,保证响应式能力
const { msg, info } = toRefs(obj)
const handleClick = () => {
obj.msg = 'nihao'
obj.info = 'aligotogozayimasi'
}
// reactive中的对象属性如果重新赋值会失去响应式能力
return { msg, info, handleClick }
}
}
</script>
<style lang="less">
</style>
写在最后
toRefs方法可以批量转换对象中的属性为独立的响应式数据~
掰掰վ'ᴗ' ի~