Vue学习笔记四：Vue的生命周期

最新推荐文章于 2023-08-09 10:07:46 发布

爱睡懒觉的老舅

最新推荐文章于 2023-08-09 10:07:46 发布

阅读量309

点赞数 2

分类专栏： Vue 前端文章标签： vue

本文链接：https://blog.csdn.net/Ocean111best/article/details/116606764

版权

前端同时被 2 个专栏收录

19 篇文章 17 订阅

订阅专栏

Vue

16 篇文章 1 订阅

订阅专栏

一、Vue的生命周期

Vue的生命周期中有多个钩子函数，可以让我们在控制整个Vue实例的过程当中，更容易造成良好的逻辑。

Vue的生命周期分为八个：创建前/后，载入前/后，更新前/后，销毁前/后。

1、创建前（beforeCreate）

beforeCreate阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。

<!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">
    <title>vue-demo例子</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div ref="app" id="app">
      <input v-model="number">
      <p>数字：{{ number }}</p>
    </div>

    <script>
      let vm = new Vue({
        el:"#app",
        data:{
          number:"2",
        },
        beforeCreate(){
            console.log('即将创建');    //即将创建
            console.log(this.$data);   //undefined
            console.log(this.$el);     //undefined
        }
      });
    </script>
  </body>
</html>

2、创建后（created）

created阶段，vue实例的数据对象data有了，$el还没有，即dom还没有创建。

<!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">
    <title>vue-demo例子</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div ref="app" id="app">
      <input v-model="number">
      <p>数字：{{ number }}</p>
    </div>

    <script>
      let vm = new Vue({
        el:"#app",
        data:{
          number:"2",
        },
        beforeCreate(){
            console.log('即将创建');    //即将创建
            console.log(this.$data);   //undefined
            console.log(this.$el);     //undefined
        }，
        created(){
            console.log('创建完毕');
            console.log(this.$data);  //变量创建完毕，data的值已经有了
            console.log(this.$el);    //但是dom还没有创建--依然是undefined
        }
      });
    </script>
  </body>
</html>

3、载入前（beforeMount）

beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换，即可认为$el里面的各元素还未赋值。

<!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">
    <title>vue-demo例子</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div ref="app" id="app">
      <input v-model="number">
      <p>数字：{{ number }}</p>
    </div>

    <script>
      let vm = new Vue({
        el:"#app",
        data:{
          number:"2",
        },
        beforeCreate(){
            console.log('即将创建');    //即将创建
            console.log(this.$data);   //undefined
            console.log(this.$el);     //undefined
        }，
        created(){
            console.log('创建完毕');
            console.log(this.$data);  //变量创建完毕，data的值已经有了
            console.log(this.$el);    //但是dom还没有创建--依然是undefined
        }，
        beforeMount(){
            console.log('即将挂载');  //$el和data都已初始化
            console.log(this.$el);  //即将挂载，为虚拟的dom节点，但是里面各元素还没有赋值
        }
      });
    </script>
  </body>
</html>

最后beforeMounte()输出为：

4、载入后（mounted）

mounted阶段，vue实例挂载完成，data.message成功渲染，即可认为$el里面的各元素已经赋值。

<!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">
    <title>vue-demo例子</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div ref="app" id="app">
      <input v-model="number">
      <p>数字：{{ number }}</p>
    </div>

    <script>
      let vm = new Vue({
        el:"#app",
        data:{
          number:"2",
        },
        beforeCreate(){
            console.log('即将创建');    //即将创建
            console.log(this.$data);   //undefined
            console.log(this.$el);     //undefined
        }，
        created(){
            console.log('创建完毕');
            console.log(this.$data);  //变量创建完毕，data的值已经有了
            console.log(this.$el);    //但是dom还没有创建--依然是undefined
        }，
        beforeMount(){
            console.log('即将挂载');  //$el和data都已初始化
            console.log(this.$el);  //即将挂载，为虚拟的dom节点，但是里面各元素还没有赋值
        },
        mounted(){
            console.log('挂载完毕');
            console.log(this.$el);  //dom已经创建，里面各元素已赋值--适用于挂载元素，获取到DOM节点
        },
      });
    </script>
  </body>
</html>

最后mounted()输出结果为：

5、更新前（beforeUpdate）

当数据将要变化时，会触发beforeUpdate()方法。

<!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">
    <title>vue-demo例子</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div ref="app" id="app">
      <input v-model="number">
      <p>数字：{{ number }}</p>
    </div>

    <script>
      let vm = new Vue({
        el:"#app",
        data:{
          number:"2",
        },
        beforeCreate(){
            console.log('即将创建');    //即将创建
            console.log(this.$data);   //undefined
            console.log(this.$el);     //undefined
        }，
        created(){
            console.log('创建完毕');
            console.log(this.$data);  //变量创建完毕，data的值已经有了
            console.log(this.$el);    //但是dom还没有创建--依然是undefined
        }，
        beforeMount(){
            console.log('即将挂载');  //$el和data都已初始化
            console.log(this.$el);  //即将挂载，为虚拟的dom节点，但是el里面各元素还没有赋值
        },
        mounted(){
            console.log('挂载完毕');
            console.log(this.$el);  //dom已经创建，里面各元素已赋值--适用于挂载元素，获取到DOM节点
        },

         beforeUpdate(){
            console.log('=即将更新渲染=');
            let name = this.number;               //更改数据时，这个地方已经是新值了。
            let test = this.$refs.app.innerHTML;  //更改数据时，这个地方还是旧值！
            console.log('name:'+name);            //打印出新值
            console.log('test:'+test);            //打印出旧值
            console.log(this.$el);                //但是$el里面各元素为新值
        }

      });
    </script>
  </body>
</html>

将输入框的值从2改为8，beforeUpdate()输出结果为：

6、更新后（updated）

当数据变化完成时，会触发update()方法。

<!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">
    <title>vue-demo例子</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div ref="app" id="app">
      <input v-model="number">
      <p>数字：{{ number }}</p>
    </div>

    <script>
      let vm = new Vue({
        el:"#app",
        data:{
          number:"2",
        },
        beforeCreate(){
            console.log('即将创建');    //即将创建
            console.log(this.$data);   //undefined
            console.log(this.$el);     //undefined
        }，
        created(){
            console.log('创建完毕');
            console.log(this.$data);  //变量创建完毕，data的值已经有了
            console.log(this.$el);    //但是dom还没有创建--依然是undefined
        }，
        beforeMount(){
            console.log('即将挂载');  //$el和data都已初始化
            console.log(this.$el);  //即将挂载，为虚拟的dom节点，但是el里面各元素还没有赋值
        },
        mounted(){
            console.log('挂载完毕');
            console.log(this.$el);  //dom已经创建，里面各元素已赋值--适用于挂载元素，获取到DOM节点
        },

         beforeUpdate(){
            console.log('=即将更新渲染=');
            let name = this.number;               //更改数据时，这个地方已经是新值了。
            let test = this.$refs.app.innerHTML;  //更改数据时，这个地方还是旧值！
            console.log('name:'+name);            //打印出新值
            console.log('test:'+test);            //打印出旧值
            console.log(this.$el);                //但是$el里面各元素为新值
        },

        updated(){
            console.log('=更新成功=');
            let name = this.number;                //更改数据时，这个地方已经是新值了。
            let test = this.$refs.app.innerHTML;    //更改数据时，这个地方也是新值。
            console.log('name:'+name);              //打印出新值
            console.log('test:'+test);              //也是打印出新值
            console.log(this.$el);                  //$el里面各元素为新值
        }

      });
    </script>
  </body>
</html>

将输入框的值从2改为8，update()输出结果为：

7、销毁前（beforeDestory）

beforeDestory阶段，在执行destory()方法时会触发。

<!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">
    <title>vue-demo生命周期updated</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div ref="app" id="app">
       {{ name }}
    </div>

    <script>
        let vm = new Vue({
          //挂载元素
          el:'#app',
          //实例vm的数据
          data:{
            name:"大帅B"
          },
          beforeDestroy(){
            console.log('销毁之前');
          },
          destroyed(){
            console.log('销毁成功');
          }
        });
//在浏览器控制台修改vm.name='更新视图'
//     输出结果为：
//        更新视图
//在浏览器控制台修改vm.$destroy();
//     输出结果为：
//        销毁之前
//        销毁成功
// 在浏览器控制台再次输入 vm.name='再次测试下'
//    页面没有反应，页面的值没有变化

    </script>
  </body>
</html>

8、销毁后（destoryed）

destoryed阶段，在执行destory()方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

爱睡懒觉的老舅

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
6
评论
Vue学习笔记四：Vue的生命周期

一、Vue的生命周期Vue的生命周期中有多个钩子函数，可以让我们在控制整个Vue实例的过程当中，更容易造成良好的逻辑。Vue的生命周期分为八个：创建前/后，载入前/后，更新前/后，销毁前/后。1、创建前（beforeCreate）beforeCreate阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。<!DOCTYPE html><html lang="en"> <head> <meta ch
复制链接

扫一扫