跳到主要内容

简述什么时候调用 “updated” 生命周期 hook ? ?

参考答案:

在 Vue.js 中,updated 生命周期钩子在组件的 DOM 更新后立即被调用。这意味着当组件的数据发生变化并导致虚拟 DOM 重新渲染和更新为实际的 DOM 后,updated 钩子就会被触发。

具体来说,当以下情况发生时,updated 钩子会被调用:

  1. 组件的数据(data)发生变化,导致组件重新渲染。
  2. 组件的 props 发生变化,导致组件重新渲染。
  3. 使用 this.$forceUpdate() 方法强制更新组件。

请注意,updated 钩子并不包括初次渲染时的 DOM 更新,仅在后续的更新中才会触发。此外,如果你在这个钩子中再次修改数据,可能会导致无限循环的更新,因此需要谨慎使用。

下面是一个简单的示例,展示了 updated 钩子的使用:

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  updated() {
    console.log('Component updated!');
    // 这里可以执行一些在 DOM 更新后需要执行的操作
  }
};

在这个示例中,每当 message 数据发生变化并导致组件重新渲染后,控制台就会输出 "Component updated!"。