标签：响应 setup toRefs reactive api vue3 test c1 属性

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。