20190309-vue学习笔记7--vue生命周期

最新推荐文章于 2023-06-05 15:05:40 发布

喵呜噢

最新推荐文章于 2023-06-05 15:05:40 发布

阅读量188

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/zwj1537/article/details/88369289

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

20190309-vue学习笔记7–vue生命周期

什么是VUE的生命周期：

**vue实例从创建到销毁的过程**称之为vue的生命周期。
简单的说生命周期就是事物从产生到消失的一个时间过程。

VUE生命周期的八大阶段：

开始创建、初始化数据、编译模板、挂载dom（渲染），渲染->更新->渲染、销毁（卸载）。
在这里插入图片描述

流程图来源于网络，仅供学习参考使用。

Vue挂载 $mount 和 el的区别

el ，用于指明 Vue 实例的挂载目标。下图为官网解释：
在这里插入图片描述

如果在实例化vue的时候指定el，则该vue将会渲染在此el对应的dom中，反之，若没有指定el，则vue实例会处于一种“未挂载”的状态，此时可以通过$mount来手动执行挂载。

///el测试

<div id="app">
  <h3>{{ message }}</h3>
</div>
<script>
new Vue({
  el :'#app'
  data: {
    message: 'el测试!',
  }
})
</script>

在这里插入图片描述
//$mount()

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

<script>
new Vue({
  data: {
    message: '$mount 测试!',
  }
}).$mount('#app')	//挂载
</script>

在这里插入图片描述
二者从使用效果上没有区别，目的都是将vue实例化的对象挂载到DOM元素上；

VUE钩子函数：

钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。

在系统级对所有消息进行过滤，是说钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作。一段用以处理系统消息的程序，用以处理系统消息的程序，是说钩子函数是用于处理系统消息的。

总结下：
1、是个函数，在系统消息触发时被系统调用（类似与触发器） 2、不是用户自己触发的。

在VUE生命周期里分为以下8个钩子函数（包括代码案例）：

beforeCreate（创建前）
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置、生命周期初始化配置之前被调用。data 和 $el 都没有初始化，且无法调用方法 全部为 undefined。

export default{
        el: '#app',
        data(){   
            return{
                msg:'OK',
            }
        },
        methods: {
            life_show:function () {
                console.log('执行了methods：名为“life_show”方法 ');
                console.log('data 中的 msg 变量值是：' + this.msg);
            }
        },
        beforeCreate: function () {
           console.group("%c%s", "color:blue",'beforeCreate 创建前状态===============》1');
            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.msg);
            this.life_show();
        },
        ｝

注意：
1、钩子函数跟data()，methods，computed同个级别；
2、console.group与console.log 同为输出方法，group以组的形式输出打印；
3、%c%s把字符串按照你提供的样式格式化后输出打印， “color:red” 字体要红色输出打印，可搜索 console方法；

created（创建后）
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测，属性和方法的运算，事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
data 初始化完成，但 $el 没有初始化，可以调用方法。

created:function () {
            console.group('created 创建前状态===============》2');
            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","msg: " + this.msg);
            this.life_show();
        },

在这里插入图片描述

beforeMount（挂载前）
在挂载开始之前被调用：相关的 render 函数首次被调用，此时有了虚拟DOM。data 和 $el 均已存在，但 DOM 为虚拟DOM 仍未完全加载 。
有了el,编译了template|/outerHTML，能找到对应的template,并编译成render函数

先在template 的DIV里面，创建名为ID='h3’的标题标签，看下beforeMount与mounted区别：

<div id="app2">
            <h3 id="h3">这是H3的标题内容：{{ msg }}</h3>
        </div>

beforeMount: function () {
            console.group("%c%s", "color:blue",'beforeMount 挂载前状态===============》3');
            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","msg: " + this.msg); //已被初始化
            this.life_show();
            console.log(document.getElementById('h3').innerText);///将ID=H3的dom,加载到内存，建立虚拟的DOM
            ｝，

console.log(document.getElementById(‘h3’).innerText);///将ID=H3的dom,加载到内存，建立虚拟的DOM

在这里插入图片描述

mounted（挂载后）
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子，渲染为真实DOM。data 和 $el 均已存在，并且 DOM 加载完成，完成挂载。

mounted: function () {
            console.group('mounted 挂载结束状态===============》4');
            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","msg: " + this.msg); //已被初始化
            
            console.log(document.getElementById('h3').innerText);//加载完成，DOM渲染成功，也就是实体化。
            this.life_show();
            },

在这里插入图片描述

当data中数据发生改变时触发update相关函数，beforeUpdate与updated。

beforeUpdate（更新前）
渲染完成，并监测到data发生变化，在变化的数据重新渲染视图之前会触发，这也是重新渲染之前最后修改数据的机会，可以在这个钩子中进一步地更改状态，但这不会触发附加的重渲染过程。 会更新当前组件数据，但未在页面渲染出来。

//先在template 的DIV里面，创建button，与H3标签，进行更新前后的变量对比。

<div>
            <p>以下是调用组件信息</p>
            <input type="button" value="修改msg" @click="msg='No'">
            <h3 id="h3">这是H3的标题内容：{{ msg }}</h3>
        </div>

msg:‘OK’,//初始值，
点击按钮后，msg值会变成“NO”。

beforeUpdate() {
            console.group("%c%s", "color:blue",'beforeUpdate 更新前状态===============》5');

            console.log(this.PrintTimes());
            // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了】
//            this.msg='数据已经更新了；';
             console.log('界面上元素的内容：' + document.getElementById('h3').innerText);
             console.log('data 中的 msg 数据是：' + this.msg) ;
        },

在这里插入图片描述

updated（更新后）
这个状态下监测到data发生变化并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行。

//为了更好看出效果，分别在beforeUpdate和updated添加alert，体现数据的变化：

beforeUpdate() {
            console.group("%c%s", "color:blue",'beforeUpdate 更新前状态===============》5');

            console.log(this.PrintTimes());
            // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了】
//            this.msg='数据已经更新了；';
             console.log('界面上元素的内容：' + document.getElementById('h3').innerText);
             console.log('data 中的 msg 数据是：' + this.msg) ;
        },

updated() {
            console.group('updated 更新完成状态===============》6');
            alert('3 将要执行updated');
            console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
            console.log('data 中的 msg 数据是：' + this.msg)
            alert('updated执行完毕，data 中的 msg 数据是'+ this.msg);
        },

图一、
在这里插入图片描述
图二、

图三、

图四、

五、

得出结论：
1、当执行beforeUpdate的时候（图一），后台值就已经发生变化，但是页面中的显示的值还是旧的，所以在调用beforeUpdate函数，页面还没与最新的数据保持同步。
2、 updated 事件执行要完全结束后（图四、图五），页面跟data的数据才会进行同步，将dom重新渲染，这时数据才是最新的。

beforeDestroy（销毁前）
实例销毁之前调用。
destroyed（销毁后）
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
该钩子函数在服务器端渲染期间不被调用。

注意：这里的销毁并不指代’抹去’，而是表示’解绑’。

beforeDestroy: function () {
            console.group("%c%s", "color:blue",'beforeDestroy 销毁前状态===============》 7');
            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","msg: " + this.msg);
            alert('7 beforeDestroy 执行完毕，msg = '+ this.msg);
            this.life_show();
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》 8');
            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","msg: " + this.msg);
            alert('8 destroyed 执行完毕，msg = '+ this.msg + ' ,即将离开此页面!');
            this.life_show();
        },

在这里插入图片描述

vue生命周期在真实场景下的业务应用

created：进行ajax请求异步数据的获取、初始化数据，
mounted：挂载元素内dom节点的获取，
nextTick：针对单一事件更新数据后立即操作dom，
updated：任何数据的更新，如果要做统一的业务逻辑处理，
watch：监听具体数据变化，并做相应的处理，
destroyed ：我们常用来销毁一些监听事件及定时函数，如：

// 销毁监听事件
destroyed() {
  window.removeEventListener('resize', this.resizeWin)
}
//原文：https://blog.csdn.net/gaoxin666/article/details/84240843

上述资料来源网络，仅供自学。

喵呜噢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录