Vue 渲染完成后的代码执行：mounted 和 updated 钩子函数

<template>
  <div>
    <p ref="text">{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  mounted() {
    console.log('DOM已经渲染完成')
    this.$refs.text.style.color = 'red'
  },
  updated() {
    console.log('数据已经更新完成')
  }
}
</script>
<p>在 Vue 中，我们可以使用生命周期钩子函数来控制组件在不同阶段的行为。如果需要在 DOM 渲染完成后执行代码，可以使用 <code>mounted</code> 钩子函数。例如，上面的代码中，我们在 <code>mounted</code> 钩子函数中将 <code>text</code> 元素的文字颜色设置为红色。</p>
<p><code>updated</code> 钩子函数则是在数据更新完成后执行，此时 DOM 也已经重新渲染完成。我们可以使用 <code>updated</code> 钩子函数来执行一些需要重新渲染的操作。例如，我们可以监听数据变化，并在数据变化后重新渲染 DOM。</p>
<p>以下是一些关于 <code>mounted</code> 和 <code>updated</code> 钩子函数的常见使用场景：</p>
<ul>
<li><strong>获取 DOM 元素并进行操作：</strong> 在 <code>mounted</code> 钩子函数中，我们可以获取 DOM 元素并进行一些操作，例如添加事件监听器、修改样式等。</li>
<li><strong>进行一些异步操作：</strong>  我们可以使用 <code>mounted</code> 钩子函数来进行一些异步操作，例如获取数据、发送请求等。</li>
<li><strong>重新渲染 DOM：</strong> 在 <code>updated</code> 钩子函数中，我们可以重新渲染 DOM，例如更新一些数据后，需要重新渲染 DOM 以展示最新的数据。</li>
</ul>
<p>除了 <code>mounted</code> 和 <code>updated</code> 钩子函数之外，Vue 还提供了其他一些生命周期钩子函数，例如 <code>created</code>、<code>beforeCreate</code>、<code>beforeMount</code>、<code>beforeUpdate</code> 等。我们可以根据需要选择合适的钩子函数来执行代码。</p>