Vue中生命周期的理解

2019-11-01 admin

代码及结果截图

HTML

<div id="app">
    <p>{{ message }}</p>
    <h1>{{message + '这是在outer HTML中的'}}</h1>
</div>

js

 var app = new Vue({
    el: '#app',
    data: {
        message : "xuxiao is boy"
    },
    template:"<h1>{{message +'这是在template中的'}}</h1>",
    // render: function(createElement) {
    //     return createElement('h1', 'this is createElement')
    // },
    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)
    }
})

最终结果

20190520142852951.png 20190520142920131.png 20190520142946922.png

初始化阶段

beforecreate

在这个阶段,完成实例初始化,

初始化非响应式变量 this指向创建的实例; 

可以在这加个loading事件;

data computed watch methods上的方法和数据均不能访问,这个时候的Vue实例还什么都没有,但是在这个阶段$route对象是存在的,可以根据路由信息进行重定向之类的操作;

这个阶段的data对象未完成初始化,el也没有完成初始化;

DOM还没有开始

created 【创建完成】

在模板渲染成HTML前调用,即通常初始化一些属性值,然后再渲染成视图, 未挂载DOM;created时还没完成挂载,无法通过id等获得DOM元素

实例创建完成 完成数据(data props computed)的初始化 导入依赖项。

可访问data computed watch methods上的方法和数据 ;

不能访问el【初始化还未完成】,ref为空数组 ;不能对元素进行操作;

可在这结束loading,

还做一些初始化,实现函数自执行,

可以对data数据进行操作,可进行一些请求,请求不易过多,避免白屏时间太长。
el还是undefined,

而数据已经与data中的属性进行绑定(放在data中属性当值发生改变的同时,视图也会发生变化),


在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,**一般可以在这里做初始数据的获取**

**若在此阶段进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中;因为created() 钩子函数执行的时候 DOM 其实并未进行任何渲染**

Vue.nextTick( [callback, context] ):在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

模板编译阶段

beforemount & mount

在created后,beforemount前,会检查el选项,没有就会调用vm.$mount(),然后就会继续检查template,没有的话就绑定el选项的html,进入beforemount后,编译模板为虚拟的DOM,,开始render,将虚拟DOM渲染到页面上;

从created到beforeMount的过程中,

     var app = new Vue({
            el: '#app',
            data: {
                message : "xuxiao is boy"
            },
            template:"<h1>{{message +'这是在template中的'}}</h1>",
            // render: function(createElement) {
            //     return createElement('h1', 'this is createElement')
            // },

首先会判断vue实例中有没有el选项,如果有的话则进行下面的编译,但是如果没有el选项,则停止生命周期,直到vue实例上调用vm.$mount(el)。

如果有el,再判断是否有template参数,如果有,则把其当作模板编译成render函数, 20190520143735512.png

如果没有,则把外部的html作为模板编译。template中的模板优先级高于outer HTML模板。

20190520143925157.png 这是把outerHTML当作模板编译了

<div id=“app”>

<p>{{ message }}</p>
<h1>{{message + '这是在outer HTML中的'}}</h1>

</div>

如果把实例中render function选项的注释去掉,则直接用render function里的,得到网页如下

2019052014420087.png

所以按优先级来说 render function>template>outerHTML ————————————————

在vue对象中还有一个render函数,它是以createElement作为参数,然后做渲染操作,而且我们可以直接嵌入JSX. 综合排名优先级:render函数选项 > template选项 > outer HTML.

挂载阶段

beforeMount【挂载之前】

载入前(完成了data和el数据初始化),

但是页面中的内容还是vue中的占位符

$el属性已存在,是虚拟dom,只是数据未挂载到模板中。

data中的message信息没有被挂在到Bom节点中,

在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

mounted 【成功挂载】

完成创建vm,

完成el的双向绑定,完成挂载dom和渲染,可以在这个阶段对挂载的DOM进行操作;

ref 可在这发起后端请求,拿回数据,配合路由钩子做一些事情; 可对DOM 进行操作

载入后html已经渲染(ajax请求可以放在这个函数中),把vue实例中的data里的message挂载到BOM节点中去

[转载]原文链接:https://segmentfault.com/a/1190000020875954

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78735.html

文章标题:Vue中生命周期的理解

相关文章
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
回到顶部