Vue 生命周期的理解

最新推荐文章于 2022-02-08 19:47:19 发布

xianengneng

最新推荐文章于 2022-02-08 19:47:19 发布

阅读量309

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/xianengneng/article/details/84782551

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近做了几个VUE的项目，写写对生命周期的理解，先看图；
vue生命周期图
在这里插入图片描述

<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

在这里插入图片描述
这些图是网络的，侵权必删
beforeCreate:组件刚创建，数据和DOM都未初始化，我们在beforeCreate的时候千万不要去修改data里面赋值的数据，最早也要放在created里面去做（添加一些行为此时的this，并不会指向实例对象
Create：组件实例创建完成，this指向实例对象，数据完成初始化，但是 $e l 未初始化， * * b e f o r e m o u n t ：数据完成初始化，$ el也完成初始化，beforeMount红色矩形框里是{{message}}数据并未渲染，虚拟dom只是占了一个坑，等Mounted钩子函数时把数据用来填上这个坑
mounted：这个时段完成实例的挂载，并完成数据的替换和渲染，在这发起后端请求，拿回数据，配合路由钩子做一些事情
Updated：当数据变化时会触发Updated的生命函数，据更新后调用，由于数据更改导致的虚拟 DOM 重新渲染和打补丁，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之
beforeDestory：在组件销毁之前调用，实例对象还存在
destory:组件被销毁，实例对象不能调用，this在此时已经并不指向实例对象，所有实例绑定的东西都会被解绑，并移除所有的事件监听