面试题：Vue中beforeUpdate与updated钩子的触发时机及应用场景区别

Question

请阐述Vue生命周期钩子beforeUpdate与updated的触发时机，并分别举例说明它们在实际开发中的应用场景。

Answer 1

beforeUpdate触发时机

在数据更新时，DOM 还未更新之前触发。即 Vue 实例中数据发生变化，在虚拟 DOM 重新渲染和打补丁之前，这个钩子函数会被调用。

beforeUpdate应用场景

1. 在更新前对数据进行预处理： 假设我们有一个展示文章字数统计的组件，文章内容通过 v-model 双向绑定到一个数据变量 articleContent。我们希望在更新字数统计前，先将内容中的 HTML 标签去除，避免标签影响字数统计。

<template>
  <div>
    <textarea v-model="articleContent"></textarea>
    <p>字数: {{ wordCount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleContent: '',
      wordCount: 0
    };
  },
  beforeUpdate() {
    const tempContent = this.articleContent.replace(/<[^>]*>/g, '');
    this.wordCount = tempContent.length;
  }
};
</script>

updated触发时机

在数据更新后，DOM 已经更新完成时触发。即虚拟 DOM 重新渲染和打补丁之后，这个钩子函数会被调用。

updated应用场景

1. 操作更新后的 DOM： 比如我们有一个可编辑的表格，当表格中的某一行数据更新后，我们希望自动聚焦到更新后的输入框。

<template>
  <table>
    <tr v-for="(item, index) in dataList" :key="index">
      <td><input v-model="item.value" @input="updateItem(index)"></td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { value: '初始值1' },
        { value: '初始值2' }
      ]
    };
  },
  methods: {
    updateItem(index) {
      // 模拟数据更新
    }
  },
  updated() {
    const inputElements = this.$el.querySelectorAll('input');
    if (inputElements.length > 0) {
      inputElements[inputElements.length - 1].focus();
    }
  }
};
</script>