Vue生命周期总结

yxsds

已于 2022-08-02 12:34:23 修改

阅读量120

点赞数 1

分类专栏：前端文章标签： vue.js 前端 javascript

于 2022-08-02 11:24:28 首次发布

本文链接：https://blog.youkuaiyun.com/yxsds/article/details/126118786

版权

前端专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了Vue组件的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed各阶段的特点和执行顺序，并通过代码示例展示了在不同钩子中对数据和DOM的操作。同时，文章还提供了代码运行截图以帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.beforeCreate
在beforeCreate中，method,watch,data均没有初始化，dom元素不需要vue渲染加载的元素此时已经显示在页面中
2.created
在created中，method,data,watch已经初始化成，但此时的dom元素与beforeCreate相同状态；此外，watch的首次监听是在这里触发的
3.beforeMount
beforeMounted与created相同，注意此时vue仍未开始编译dom
4.mounted
mounted中dom已经解析后挂载完成，在此处进行的数据更改都会由update相关钩子进行监测
5.beforeUpdate
beforeUpdate中数据已经发生了改变，但是dom并未重新渲染
6.updated
updated中dom重新渲染完成
7.beforeDestroy
beforeDestroy访问到vm实例
8.destroyed
destroyed均可访问到vm实例，但在destroyed后实例销毁
9.详细分析见下面链接的流程图及代码运行截图（运行代码附下）
链接：https://www.yuque.com/yuxiao-g9ntz/bed3y1/xg6wlf

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
    <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
          />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div id="app">
      <input type="text" name="" v-model="message" />
      <div>{{message}}</div>
      <ul>
        <li v-for="(item,index) of list" :key="index">{{item}}</li>
      </ul>
      <p>p1</p>
      <p>p1</p>
      <p>p1</p>
      <button @click="changeFlag">change</button>
      <div v-if="flag">true</div>
      <div v-else>false</div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "this is message",
          flag:true,
          list: ["qwer", "df", "1234567"],
        },
        watch: {
          message: {
            handler(newVal, old) {
              console.log("我变了", newVal + "----", old);
            },
            immediate: true,
          },
        },
        methods: {
          init: function () {
            console.log("这是初始化方法");
          },
          changeFlag(){
            this.flag = !this.flag
          }
        },
        //我们在beforeCreate钩子中调用Vue的data和method
        beforeCreate() {
          console.log("beforeCreate", this);
          // console.log("li数量：", document.getElementsByTagName("li").length);
          // console.log("p个数：", document.getElementsByTagName("p").length);
          // debugger;
        },
        created() {
          console.log("created", this);
          this.init();
          //因为我们是通过v-for循环遍历li，所以created之前挂载阶段还没开始.是无法获取li的个数的
          // console.log("li数量：", document.getElementsByTagName("li").length);
          //直接加载出来的DOM是可以直接获取到的
          // console.log("p个数：", document.getElementsByTagName("p").length);
        },
        beforeMount() {
          console.log("beforeMount");
          // console.log("li数量：", document.getElementsByTagName("li").length);
          // console.log("p个数：", document.getElementsByTagName("p").length);
        },
        mounted() {
          console.log("mounted");
          // console.log("li数量：", document.getElementsByTagName("li").length);
          // console.log("p个数：", document.getElementsByTagName("p").length);
        },
        beforeUpdate() {
          console.log("beforeUpdate");
          console.log("beforeUpdate:" + this.message);
          console.log("beforeUpdate:"+ this.flag);
          // debugger
        },
        updated() {
          console.log("updated 钩子执行...");
          debugger
          console.log("updated:", this.message);
        },
        beforeDestroy() {
          console.log("beforeDestroy");
          console.log("beforeDestroy:", this.message);
        },
        destroyed() {
          console.log("destroyed");
          console.log("destroyed:", this.message);
        },
      });
      console.log('vm',app);
      app.$destroy();
      console.log('afterDestroy',app);
      // setTimeout(() => {
      //     app.$destroy();
      //     console.log('afterDestroy',app);
      // }, 2000);
    </script>
  </body>
</html>