面试题：Vue性能优化场景下对生命周期钩子的选择

Question

假设你正在开发一个大型单页应用，其中有一个组件需要频繁更新数据，并且在首次渲染时需要进行一些复杂的DOM操作，你会如何选择和使用Vue的生命周期钩子来优化性能，给出具体思路和代码示例。

Answer 1

思路

1. 首次渲染的复杂DOM操作：使用mounted钩子，因为这个钩子在组件挂载到DOM后被调用，此时可以安全地进行复杂的DOM操作。
2. 频繁更新数据：为了优化性能，避免在每次数据更新时都进行不必要的计算或操作。可以使用updated钩子，但需要在其中添加条件判断，只有在真正需要更新DOM的时候才进行操作。另外，可以考虑使用watch来监听特定数据的变化，然后在回调函数中进行更有针对性的操作。

代码示例

<template>
  <div>
    <div ref="complexDom"></div>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataToUpdate: 0
    };
  },
  mounted() {
    // 首次渲染时进行复杂DOM操作
    this.$refs.complexDom.innerHTML = '这是复杂DOM操作后的结果';
  },
  updated() {
    // 数据更新时的操作，这里添加条件判断优化性能
    if (this.dataToUpdate % 2 === 0) {
      this.$refs.complexDom.innerHTML = `更新后的数据: ${this.dataToUpdate}`;
    }
  },
  methods: {
    updateData() {
      this.dataToUpdate++;
    }
  }
};
</script>

使用watch优化数据更新操作示例

<template>
  <div>
    <div ref="complexDom"></div>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataToUpdate: 0
    };
  },
  mounted() {
    // 首次渲染时进行复杂DOM操作
    this.$refs.complexDom.innerHTML = '这是复杂DOM操作后的结果';
  },
  watch: {
    dataToUpdate(newValue) {
      if (newValue % 2 === 0) {
        this.$refs.complexDom.innerHTML = `更新后的数据: ${newValue}`;
      }
    }
  },
  methods: {
    updateData() {
      this.dataToUpdate++;
    }
  }
};
</script>