Vue.js中计算属性与普通数据属性事件传递时响应性差异的原因是什么？

这其实是Vue响应式系统的设计特性导致的，咱们一步步拆解背后的原因：

1. Data属性的响应式本质 #

data里的所有属性，在Vue初始化时都会被响应式系统（Vue2用Object.defineProperty，Vue3用Proxy）处理：

• 如果是引用类型（对象、数组），整个对象会被转换成响应式代理，具备依赖收集和自动更新的能力。当你把它通过$emit传递给父组件时，父组件拿到的是这个响应式代理的引用——也就是说，父组件操作的和子组件data里的是同一个对象，所以原对象的任何变化都会实时反映在父组件那边，看起来就像保持了响应性。
• 如果是基本类型（字符串、数字等），传递的是值的拷贝，但因为原属性是响应式的，当它变化时，子组件会重新触发$emit事件，父组件就能拿到最新的值，也会呈现出“响应性”的效果。

2. 计算属性的响应式局限 #

计算属性的核心是惰性求值的派生值，它的响应性只体现在“当依赖的响应式属性变化时，自动重新计算自身的值”，但它的返回结果有个关键特性：

• 如果返回的是基本类型，每次重新计算都会生成一个新的基本值，传递给父组件的是这个值的拷贝。除非子组件在计算属性变化时再次触发$emit，否则父组件手里的还是旧值，自然就会“丢失响应性”。
• 如果返回的是引用类型（比如新创建的对象/数组），这个新对象不会被Vue自动转换成响应式代理——计算属性只是返回了一个普通对象，它和原依赖的响应式属性没有绑定关系。当原依赖变化时，计算属性会重新生成新对象，但如果没有重新emit，父组件拿到的还是旧的普通对象，自然不会更新。

举个直观的Vue3示例：

<!-- 子组件 -->
<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
// data中的响应式引用类型
const countObj = ref({ num: 0 })
// 计算属性返回普通对象
const computedCountObj = computed(() => ({ num: count.value }))

const sendData = () => {
  emit('send', countObj.value, computedCountObj.value)
}
</script>

父组件拿到countObj.value（响应式代理）后，countObj.value.num变化时会自动更新；但拿到computedCountObj.value（普通对象）后，count.value变化时，这个普通对象的num不会自动跟着变——除非再次调用sendData重新传递。

3. 关于“传递响应式对象是不良实践” #

你之前了解的这个点非常关键：直接传递响应式对象会打破Vue的单向数据流原则——父组件可能会直接修改子组件的data属性，导致组件间的状态耦合变高，调试和维护都会变得困难。

正确的做法应该是：

• 遵循单向数据流：子组件通过emit传递原始值，父组件接收后更新自己的状态，再通过props把新值传给子组件。
• 如果需要传递复杂的动态数据，Vue3中可以考虑用provide/inject配合readonly来传递响应式数据，既保留响应性又防止父/子组件随意修改；或者让计算属性返回一个ref包装的值，但依然要注意不要打破单向数据流。

内容的提问来源于stack exchange，提问作者Christallkeks