關於 Vue3 組件間傳值響應性的一些總結

import { computed, defineComponent, reactive, toRef } from 'vue'

export default defineComponent({
  name: 'Child',
  props: {
    params: Object // 來自 Parent 的傳值
  },
  setup(props) {
    const refParams1 = toRef(props, 'params') // 保留響應性
    const nameOfParams = computed(() => {
      return refParams1.value.name.toUpperCase()
    }) // 保留響應性
    const reactiveParams1 = reactive(props.params) // 保留響應性
    const reactiveParams2 = reactive(Object.assign({}, props.params)) // 響應性消失!!!
    
    return {
      refParams1 ,
      nameOfParams ,
      reactiveParams1,
      reactiveParams2
    }
  }
})