Vue3 学习笔记 —— toRefs
toRefs作用:将一个响应式对象,转换为普通对象,并且将其中的属性转换为 Ref 对象setup() {let state = reactive({name: 'zly',age: 47})let state2 = toRefs(state)console.log(state)// 响应式对象console.log(state2)// 普通对象,其中的属性被转换为 Ref 属性return
·
toRefs
- 作用:将一个
响应式对象
,转换为普通对象
,并且将其中的属性转换为Ref
对象
setup() {
let state = reactive({
name: 'zly',
age: 47
})
let state2 = toRefs(state)
console.log(state) // 响应式对象
console.log(state2) // 普通对象,其中的属性被转换为 Ref 属性
return {...state2}
}
- 如图:
- 场景:如果不使用
toRefs
那么
<template>
name: {{name}} <!-- 页面不会更新 -->
age: {{age}}
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs} from 'vue';
export default defineComponent({
name: 'Child',
setup() {
let state = reactive({
name: 'zly',
age: 47
})
setInterval(()=>{
state.name += '--'
}, 1000)
return {...state} // 扩展出去的属性只是普通属性,不可以数据响应式
}
});
</script>
- 如果使用
toRefs
将内部属性都用Ref
包装
<template>
name: {{name}} <!-- 页面更新 -->
age: {{age}}
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs} from 'vue';
export default defineComponent({
name: 'Child',
setup() {
let state = reactive({
name: 'zly',
age: 47
})
let state2 = toRefs(state)
setInterval(()=>{
state2.name.value += '--'
}, 1000)
return {...state2} // 扩展出去的属性是响应式的 Ref 对象,可以响应式
}
});
</script>
- 如图:
更多推荐
所有评论(0)