Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段,每个阶段都会给一些“钩子”让我们来做一些我们想实现的动作。

分为以下几个阶段

1、beforeCreate

  此阶段为实例初始化之后,数据观测 (data observer) 和 事件配置(event/watcher)之前被调用。

  我们试着console一下实例的数据data和挂载元素el,代码如下:

<div id="app">{{name}}</div>
<script>
let app = new Vue({
el:"#app",
data:{
name:"Sarah"
},
beforeCreate(){
console.log('即将创建');
console.log(this.$data);
console.log(this.$el);
}
});
</script>

  结果为:

即将创建
undefined
undefined

此时的实例中的data和el还是undefined,不可用的。

2. created

  在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

  beforeCreate之后紧接着的钩子就是创建完毕created,我们同样打印一下数据data和挂载元素el, 在上一段代码的基础上,加上下面这段代码:

created(){
console.log('创建完毕');
console.log(this.$data);
console.log(this.$el);
}
结果为:
创建完毕
{
name:"Sarah"
},
undefined

  此时,我们能读取到数据data的值,但是DOM还没生成,所以属性el还不存在,输出$data为一个Object对象,而$el的值为undefined。

3. beforeMount

  在挂载开始之前被调用:相关的 render 函数首次被调用。

上一个阶段我们知道DOM还没生成,属性el还为undefined,那么,此阶段为即将挂载,我们打印一下此时的$el是什么?

beforeMount(){
console.log('即将挂载');
console.log(this.$el);
}

  我们看到打印结果:

即将挂载
undefined

  此时的$el不再是undefined,而是成功关联到我们指定的dom节点

,但此时{{ name }}还没有被成功地渲染成我们data中的数据。没事,我们接着往下看。

4. mounted

  el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted:

mounted也就是挂载完毕阶段,到了这个阶段,数据就会被成功渲染出来,我们编写mounted的钩子,打印$el 看看:

打印结果:

挂在完毕
<div id="app">Sarah</div>

如我们所愿,此时打印属性el,我们看到{{ name }}已经成功渲染成我们data.name的值:“前端君”。

5. beforeUpdate

我们知道,当修改vue实例的data时,vue就会自动帮我们更新渲染视图,在这个过程中,vue提供了beforeUpdate的钩子给我们,在检测到我们要修改数据的时候,更新渲染视图之前就会触发钩子beforeUpdate。

html片段代码我们加上ref属性,用于获取DOM元素(后期会讲到)。


<div ref="app" id="app">
{{name}}
</div> Vue实例代码加上beforeUpdate钩子代码: beforeUpdate(){
console.log('=即将更新渲染=');
let name = this.$refs.app.innerHTML;
console.log('name:'+name);
},

我们试一下,在控制台修改一下实例的数据name,在更新渲染之前,我们打印视图中文本innerHTML的内容会是多少:

(gif图,加载需要点时间)

我们在控制台把app.name的值从原来的 “前端君” 修改成 “web前端教程”,在更新视图之前beforeUpdate打印视图上的值,结果依然为原来的值:“前端君”,表明在此阶段,视图并未重新渲染更新。

6. updated

  由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉 updated

  此阶段为更新渲染视图之后,此时再读取视图上的内容,已经是最新的内容,接着上面的案例,我们添加钩子updated的代码,如下:

 updated(){
console.log('==更新成功==');
let name = this.$refs.app.innerHTML;
console.log('name:'+name);
}

结果如下:

(gif图,多看2遍,注意视图变化)

大家注意两个不同阶段打印的name的值是不一样,updated阶段打印出来的name已经是最新的值:“web前端教程”,说明此刻视图已经更新了。

7. beforeDestroy

调用实例的destroy( )方法可以销毁当前的组件,在销毁前,会触发beforeDestroy钩子。

8. destroyed

成功销毁之后,会触发destroyed钩子,此时该实例与其他实例的关联已经被清除,它与视图之间也被解绑。

案例:我们通过在销毁前通过控制台修改实例的name,和销毁之后再次修改,看看情况。

 beforeDestroy(){
console.log('销毁之前');
},
destroyed(){
console.log('销毁成功');
}

效果如下图:

(gif图,多看2遍,注意视图变化)

销毁之前,修改name的值,可以成功修改视图显示的内容为:“更新视图”,一旦效用实例的$destroy( )方法销毁之后,实例与视图的关系解绑,再修改name的值,已于事无补,视图再也不会更新了,说明实例成功被销毁了。

9. actived

keep-alive组件被激活的时候调用。

10. deactivated

keep-alive 组件停用时调用。

关于keep-alive组件的激活和停用,我们后面讲到具体案例再介绍,在这里你只需要知道vue提供了keep-alive组件激活和停用的钩子就可以了。

以后最为常用的钩子是:created 成功创建。

vue 实例的生命周期的更多相关文章

  1. Vue.js-07:第七章 - Vue 实例的生命周期

    一.前言  在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...

  2. vue实例的生命周期

    Vue实例的生命周期也就是这个实例从出生到死亡的过程,所以我在文档原图上把这个周期大致分为创建过程 | 运行过程 | 销毁过程三个阶段,不同结果或又分为一些小的阶段 在第一个阶段,创建阶段,会完成Vu ...

  3. 浅析vue实例的生命周期(生命周期钩子)

    “每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...

  4. 从零开始学 Web 之 Vue.js(三)Vue实例的生命周期

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  6. 关于Vue实例的生命周期(2)

     关于Vue实例的生命周期(2) 创建(create)->挂载(mount)->更新(update)->销毁(destory) 钩子函数触发事件 beforeCreate 在实例初始 ...

  7. 7.Vue实例的生命周期

    1.Vue实例的生命周期: 什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子 = 生命周期函数 = 生命周期事件 2. 主要的生命 ...

  8. 黑马vue---37-38、vue实例的生命周期

    黑马vue---37-38.vue实例的生命周期 一.总结 一句话总结: created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板 moun ...

  9. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  10. Vue 实例以及生命周期

    最简单的 Vue 实例 //html <div id="app"> {{message}} </div> //javascript var vm = new ...

随机推荐

  1. nil / Nil / NULL / NSNull VS objc_msgSend

    [NSNull null]是一个对象,其类为NSNULL(isa):里面没有任何变量.函数.和实现. nil的处理展示出消息机制的优越性,相对于函数调用的空指针处理. ENTRY objc_msgSe ...

  2. Example of working with a dump.

    Let's say that you are looking at a crash dump, so following the first command from this page you do ...

  3. jumpserver 新建用户收不到邮件

    在设置邮件开启pop3/smtp/imap 时 会提示要设置授权码 重启jumpserver 遇到错误  163 邮箱没有收到密码 点击更新没有效果 测试连接成功以后 ,删除用户 ,然后 重新 创建一 ...

  4. caioj 1078 动态规划入门(非常规DP2:不重叠线段)(状态定义问题)

    我一开始想的是前i个区间的最大值 显然对于当前的区间,有不选和选两种情况 如果不选的话,就继承f[i-1] 如果选的话,找离当前区间最近的区间取最优 f[i] = max(f[i-1, f[j] + ...

  5. Unity 性能优化(力荐)

    开始之前先分享几款性能优化的插件: 1.SimpleLOD : 除了同样拥有Mesh Baker所具有的Mesh合并.Atlas烘焙等功能,它还能提供Mesh的简化,并对动态蒙皮网格进行了很好的支持. ...

  6. unity调用Android的两种方式:其二,调用aar包

    上一篇我们讲了unity如何调用jar包 http://www.cnblogs.com/Jason-c/p/6743224.html, 现在我们介绍一下怎么生成aar包和unity怎么调用aar 一. ...

  7. java无依赖读取Excel文件

    说到Java读取Excel文件,用得多的当然是POI或jxls,但今天在看一本书的时候.当中提到使用JdbcOdbcDriver这个驱动类在不依赖第三方库的情况下也能够完毕对Excel文件的读取操作, ...

  8. thinkphp5项目--企业单车网站(二)

    thinkphp5项目--企业单车网站(二) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise Websitehttps:/ ...

  9. @Transactional 事务注解

    @Transactional(propagation = Propagation.REQUIRED, isolation = Isolation.SERIALIZABLE, rollbackFor = ...

  10. POJ 1636 DFS+DP

    思路: 先搜索出来如果选这个点 其它哪些点必须选 跑个背包就好了 //By SiriusRen #include <cstdio> #include <cstring> #in ...