<template>
{{test.a}}
{{test.b}}
{{test.c}}
{{test.d}}
</template>
<script lang="ts">
import {
defineComponent,
PropType,
ref,
reactive,
toRefs,
onMounted, watch
} from 'vue'
export default defineComponent({
setup() {
const test = reactive({
a: 'sss',
b: ['ssssss']
})
test.a = 'mmmmm' // 能响应式
test.b.push('bbbb') // 能响应式
test.b = ['ccccc'] // 能响应式
let _b = test.b
_b.push('_bb') // 能响应式
_b = ['_bb000'] // 丢失响应性,新的值不能 响应到模板, test.b = ['ccccc', '_bb'], 没有改变原数据
test.c.c1 = 'c1_' // 能响应式
test.c = { c1: '_c1_' } // 能响应式
const { c } = toRefs(test) // 使用 toRefs
c.value = { c1: '_c1' } // 能响应式,test.c.c1 = '_c1'
const d = toRef(test, 'd')
d.value = { d1: '_d1' }
return {
test
}
}
})
总结:
在具有响应性的对象上操作属性的值,该属性仍具有响应性
如果某个属性是对象,且把属性的值直接赋给另一个变量,再重新赋值,会使源数据丢失响应性,及此时的新值并不会响应到源数据中。 如果需要保持对其源 属性的响应式连接,可以使用 toRef() 方法 和 toRefs() 方法
https://v3.cn.vuejs.org/api/refs-api.html#toref
https://v3.cn.vuejs.org/api/refs-api.html#torefs