Vue 正确理解updated生命周期

前提：

选项式API+单文件组件的选项：

在Vue3的互动教程的第九节，这里涉及到了模板引用$ref，生命周期mounted。

问题：

由于自己想使用一下其他生命周期，于是使用了updated，让count值改变的时候，让页面元素随着count的值改变，但是点击后，页面没有发生变化。

<template>
  <p ref="pElementRef"></p> <!-- 初始化时不显示任何内容 -->
  <button @click="inc">change 
    <!-- ,count: {{count}} -->
  </button> <!-- 绑定 inc 方法 -->
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    inc() {
      this.count++;
    }
  },
  mounted() {
    this.$refs.pElementRef.textContent = "八嘎"; // 挂载后文字改为“八嘎”
  },
  updated() {
    this.$refs.pElementRef.textContent = this.count; // 更新后改为数字
  }
};
</script>

代码如上，count的值改变，不会让<p>标签中的内容发生变化。

解决：

查阅Vue2和Vue3对于这个updated的解释，都有一个关键点。

Vue3：在组件因为一个响应式状态变更而更新其 DOM 树之后调用。

Vue2：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

所以关键是要影响到DOM，显然上面的count没在DOM中展示，所以改变template。

<template>
  <p ref="pElementRef"></p> <!-- 初始化时不显示任何内容 -->
  <button @click="inc">change 
    ,count: {{count}}
  </button> <!-- 绑定 inc 方法 -->
</template>

如果你将count加入到DOM中，那么点击按钮视图也就会随之更新了。如下

扩展：

beforeUpdate在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。

也是相同的需要更新DOM。

不要在beforeUpdate及updated 钩子中更改组件的状态，这可能会导致无限的更新循环！