关于 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
    }
  }
})