Vue2与Vue3组件updated生命周期行为差异原因咨询

我编写了相同代码分别用于Vue 2和Vue 3，目的是演示文本输入触发父组件重渲染时，子组件updated生命周期钩子的触发情况，但Vue 2的示例未达到预期效果。

代码示例 #

HelloWorld.vue #

<template>
  <button type="button" @click="fn($event, 'click')">HelloWorld</button>
</template>

<script>
export default {
  props: ["fn"],
  updated() {
    console.log("HelloWorld UPDATED");
  },
};
</script>

App.vue #

<template>
  <div>
    <input type="text" v-model="text" />
    <br />
    <br />
    <HelloWorld :fn="fn()" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld,
  },
  data() {
    return {
      text: "",
    };
  },
  methods: {
    fn() {
      return (a, b) => console.log(a, b);
    },
  },
};
</script>

在Vue 3中输入内容时，控制台会输出HelloWorld UPDATED，因为每次父组件重渲染时，传递给子组件的fn都是新函数；但Vue 2中输入时控制台无输出，两段代码逻辑一致，响应式正常，但updated钩子未触发。

原因分析 #

核心差异在于Vue 2和Vue 3对模板事件绑定的编译逻辑不同：

• Vue 3的处理逻辑：模板中的@click="fn"会直接将props.fn作为事件处理函数绑定到元素上。当父组件重渲染传递新的函数给fn时，虚拟DOM中的事件处理函数引用发生变化，Vue 3会检测到这个变化，触发子组件的更新流程，从而调用updated钩子。

• Vue 2的处理逻辑：模板中的@click="fn"会被编译成一个固定的包装函数（类似($event) => this.fn($event)），这个包装函数的引用不会随props.fn的变化而改变。当父组件传递新函数给fn时，虚拟DOM中的事件绑定引用没有变化，Vue 2会认为子组件的虚拟DOM无需更新，因此不会触发组件的更新流程，updated钩子也就不会被调用。但此时props.fn已经是新的函数，点击按钮时会执行最新的函数逻辑。

Vue 2中触发updated钩子的解决方法 #

如果需要在Vue 2中触发updated钩子，可以通过以下两种方式实现：

1. 让虚拟DOM随props变化：在子组件模板中使用fn的特性（比如将其转换为字符串显示），让虚拟DOM随fn的变化而更新：

<template>
  <button type="button" @click="fn($event, 'click')">HelloWorld</button>
  <!-- 添加该行，让虚拟DOM随fn变化 -->
  <span style="display:none">{{ fn.toString() }}</span>
</template>

2. 手动监听props变化并强制更新：在子组件中添加watch监听fn的变化，调用$forceUpdate()触发组件更新：

<script>
export default {
  props: ["fn"],
  updated() {
    console.log("HelloWorld UPDATED");
  },
  watch: {
    fn() {
      this.$forceUpdate();
    }
  }
};
</script>

内容的提问来源于stack exchange，提问作者V. Rzhavy