Vue.js 中 created、watch 和 computed 执行顺序揭秘：轻松掌握组件生命周期

2023-01-28 08:14:25

Vue.js 钩子函数执行顺序：created、watch 和 computed 的幕后故事

在 Vue.js 中，组件生命周期钩子函数如同幕后的导演，指导着组件在不同阶段的行为。其中，created、watch 和 computed 是至关重要的钩子，它们负责在数据变化和属性计算时执行特定的操作。了解它们的执行顺序对于掌控 Vue.js 应用至关重要。

组件生命周期概述

Vue.js 组件的生命周期是一系列钩子函数，在组件创建、数据更新和视图渲染的不同阶段被调用。这些钩子允许开发者在特定的时机执行自定义逻辑。

created、watch 和 computed 简介

created： 当组件实例化时被调用，通常用于初始化数据和执行一次性操作。
watch： 当组件的数据发生变化时被调用，通常用于响应数据的变化执行操作。
computed： 当组件的数据发生变化时被调用，但它返回一个计算属性，而不是直接执行操作。

执行顺序

这些钩子函数的执行顺序如下：

created： 最先被调用，负责组件初始化。
watch： 紧随 created 之后，在数据变化时响应变化。
computed： 在 watch 之后，计算属性依赖于数据变化。

实例演示

为了更好地理解执行顺序，让我们看一个简单的例子：

<template>
  <div>
    <p>Name: {{ name }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'John Doe'
    }
  },
  created() {
    console.log('created');
  },
  watch: {
    name(newVal, oldVal) {
      console.log(`name changed from '${oldVal}' to '${newVal}'`);
    }
  },
  computed: {
    fullName() {
      console.log('fullName computed');
      return this.name + ' Doe';
    }
  },
  methods: {
    changeName() {
      this.name = 'Jane Doe';
    }
  }
}
</script>