vue2 vue3 props 的处理机制

在 Vue 2 中，props 是单向数据流，父组件向子组件传递的 props 默认情况下是不具有响应式特性的。这意味着当父组件的数据发生变化时，如果传递给子组件的 props 发生变化，子组件不会自动更新视图。

具体来说，在 Vue 2 中：

1. 单向数据流： 父组件通过 props 将数据传递给子组件。子组件可以将 props 视为本地数据来使用，但是如果父组件的数据发生变化，不会自动更新传递给子组件的 props。

2. 非响应式： 如果想要在子组件内部响应父组件数据的变化，需要使用 watch 或者 computed 属性来手动处理。例如，可以在子组件内部使用 watch 来监听 props 的变化并做出相应的响应。

 

<template>
  <div>
    <p>Message from parent: {{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'], // 父组件传递的 props

  methods: {
    changeMessage() {
      // 父组件传递的 props 是单向的，子组件不能直接修改
      // 如果需要修改，可以通过事件向父组件发送请求
      this.$emit('update:message', 'Updated message from child');
    }
  },

  watch: {
    message(newValue, oldValue) {
      console.log('Prop `message` changed:', newValue, oldValue);
      // 在 props 变化时可以执行额外的逻辑
    }
  }
};
</script>

在 Vue 3 中，props 的处理机制与 Vue 2 有所不同，尤其是在响应式方面有了重要的改进和变化。

在 Vue 3 中，props 默认情况下是响应式的。这意味着：

1. 自动更新： 当父组件的 prop 发生变化时，子组件会自动响应这些变化并更新视图。这与 Vue 2 不同，Vue 2 中的 props 是非响应式的，子组件需要手动处理变化。

2. Reactivity API 的支持： Vue 3 引入了 Composition API，其中包含了许多新的 API，如 ref、reactive 等，这些 API 在处理 props 和组件内部状态时都是响应式的。

3. 类型校验与默认值： 与 Vue 2 类似，Vue 3 也支持通过 props 定义类型校验和默认值，但是 props 现在默认是响应式的，因此它们更加灵活和方便使用。

4. <template>
     <div>
       <p>Message from parent: {{ message }}</p>
       <button @click="changeMessage">Change Message</button>
     </div>
   </template>
   
   <script>
   import { defineComponent, ref } from 'vue';
   
   export default defineComponent({
     props: {
       message: String // 父组件传递的 props，类型为 String
     },
   
     setup(props) {
       // 在 setup 函数中可以直接访问 props，并且它们是响应式的
       // 使用 ref 创建响应式数据
       const internalMessage = ref(props.message);
   
       function changeMessage() {
         internalMessage.value = 'Updated message from child';
       }
   
       return {
         message: internalMessage,
         changeMessage
       };
     }
   });
   </script>
   

• 在上面的示例中，props message 是从父组件传递给子组件的。在子组件中，我们使用 ref 来创建一个响应式的数据 internalMessage，并在 setup 函数中初始化为 props.message 的值。这样，当父组件的 message 发生变化时，子组件的视图会自动更新。

因此，Vue 3 中的 props 是默认响应式的，这是 Vue 3 在响应式系统方面的一大进步，使得开发者在处理组件间的数据传递和响应时更加方便和直观。

so 其实computed没必要。