Vue js 的生命周期（看了就懂）(推荐)

Vue.js的生命周期

Vue.js 的生命周期是指从 Vue 实例创建、运行到销毁的整个过程，主要包括以下几个阶段：

1. 创建阶段（Initialization）:

   • beforeCreate：实例刚在内存中创建出来，但还未初始化 data、methods、computed、watcher 等属性和对象，因此无法访问 data、methods、computed、watcher 等属性和对象
   • created：完成了数据初始化，可以访问 data、methods、computed、watcher 等属性和对象

2. 模板编译（Template Compilation）：将模板编译为虚拟 DOM

   • beforeMount：虚拟 DOM 已经在内存中创建出来，但还未挂载到页面中的真实 DOM 上
   • mounted：虚拟 DOM 成功渲染到页面上，已经可以访问到渲染好的 HTML 结构，也可以通过 ref 获取挂载的元素，还可以进行 AJAX 请求和定时器等操作

3. 节点更新（Node Updating）：当数据改变时，重新渲染节点的过程

   • beforeUpdate：在数据更新之前触发，在这个阶段无法访问到更新后的数据，只能访问到更新前的数据
   • updated：在数据更新之后触发，需要注意的是不要在 updated 钩子中修改数据，否则会陷入死循环

4. 卸载阶段（Destroy）：Vue 实例销毁后，清理工作阶段

   • beforeDestroy：Vue 实例销毁之前会调用 beforeDestroy 钩子函数，可以在这个阶段进行一些清理工作
   • destroyed：Vue 实例已经销毁，无法再访问 Vue 实例的任何属性和方法，这个阶段可以进行一些解绑操作

示例说明1：利用生命周期钩子函数显示组件渲染的时间

<template>
  <div>
    <p>这是我的第一个组件</p>
    <p>{{ time }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: ""
    };
  },
  beforeCreate() {
    console.log("组件即将创建");
  },
  created() {
    console.log("组件已经创建");
    setInterval(() => {
      var date = new Date();
      var time = date.toLocaleTimeString();
      this.time = '当前时间：' + time;
    }, 1000);
  },
  beforeMount() {
    console.log("组件即将挂载");
  },
  mounted() {
    console.log("组件已经挂载");
  },
  beforeUpdate() {
    console.log("组件即将更新");
  },
  updated() {
    console.log("组件已经更新");
  },
  beforeDestroy() {
    console.log("组件即将销毁");
  },
  destroyed() {
    console.log("组件已经销毁");
  }
};
</script>

示例说明2：利用生命周期钩子函数获取数据和调用 AJAX 请求

<template>
  <div class="users">
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    };
  },
  beforeCreate() {
    console.log("组件即将创建");
  },
  created() {
    console.log("组件已经创建");
    axios.get("https://jsonplaceholder.typicode.com/users").then(response => {
      console.log(response.data);
      this.users = response.data;
    });
  },
  beforeMount() {
    console.log("组件即将挂载");
  },
  mounted() {
    console.log("组件已经挂载");
  },
  beforeUpdate() {
    console.log("组件即将更新");
  },
  updated() {
    console.log("组件已经更新");
  },
  beforeDestroy() {
    console.log("组件即将销毁");
  },
  destroyed() {
    console.log("组件已经销毁");
  }
};
</script>