vue3 setup 中 reactive 响应性 实践

<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

标签：响应,setup,toRefs,reactive,api,vue3,test,c1,属性
来源： https://www.cnblogs.com/zhanglw456/p/15264948.html