Vue实例从创建到销毁的过程,就是生命周期。

Vue的生命周期包括:开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

在Vue的整个生命周期中,提供了一系列的事件,可以注册JavaScript方法,达到控制整个过程的目的,在这些JavaScript方法中的this直接指向的是vue的实例。

在Vue的整个生命周期中,实例可以调用一些生命周期钩子,这提供了执行自定义逻辑的机会。

Vue提供的生命周期钩子如下:

① beforeCreate

在实例初始化之后,数据观测(data observer,开始监控Data对象数据变化)和初始化事件(init event,Vue内部初始化事件)之前被调用。

② created

在实例已经创建完成之后被调用。实例已完成以下的配置:数据观测(data observer),属性和方法的运算,event事件回调。挂载阶段尚未开始,$el 属性不可见。

③ beforeMount

在挂载开始之前被调用。相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

④ mounted

在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。此时模板中的html渲染到了html页面中,此时一般可以做一些Ajax操作。注意mounted只会执行一次。

⑤ beforeUpdate

在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。

⑥ updated

在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

⑦ beforeDestroy

在实例销毁之前调用。实例仍然完全可用。

⑧ destroyed

在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

vue生命周期的基础部分的更多相关文章

  1. Vue基础进阶 之 Vue生命周期与钩子函数

    Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...

  2. 深入 Vue 生命周期

    深入 Vue 生命周期 这篇博客将会从下面四个常见的应用诠释组件的生命周期,以及各个生命周期应该干什么事 1.单组件的生命周期 2.父子组件的生命周期 3.兄弟组件的生命周期 4.宏mixin的生命周 ...

  3. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  4. Vue生命周期整理

    这篇博客将会从下面四个常见的应用诠释组件的生命周期,以及各个生命周期应该干什么事 单组件的生命周期 父子组件的生命周期 兄弟组件的生命周期 宏mixin的生命周期 生命周期:Vue 实例从开始创建.初 ...

  5. vue生命周期的介绍

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. vue 生命周期

    一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...

  7. 详解vue生命周期

    vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...

  8. 关于vue生命周期

    官网给出的实例的生命周期图如下: beforeCreate(页面创建前),created(页面创建后),beforeMount(页面载入前),mounted(页面载入后),beforeUpdate(页 ...

  9. vue生命周期的理解

    我从官网上下载了一张vue生命周期的图,接下来实际分析一波vue到底执行了什么东西. 1.我们在使用vue时必不可少的操作就是 var vm = new Vue({}),这样我们就创建了一个vue的实 ...

随机推荐

  1. easyui获取当前点击对象tabs的title和Index

    观察上面打开的tabs选项卡,肯定会有一个目前是被选中状态,而这个状态的class属性也肯定是和其他tabs不一样的,有个class等于tabs-selected的 var title = $('.t ...

  2. ASP.NET CORE--WIN10上无法单步调试解决方法

    参考这篇文章 http://www.cnblogs.com/artech/p/debug-in-vs-code.html In order to be able to debug cross-plat ...

  3. G - Arctic Network

    G - Arctic Network   #include<cmath> #include<cstdio> #include<cstring> #include&l ...

  4. Linux中在主机上实现对备机上文件夹及文件的操作的C代码实现

    需求描写叙述 编敲代码.完毕在主机上实现对备机上文件夹及文件的操作. 比如,主机为A,备机为B,要求编写的程序运行在A机上,该程序实如今B机上创建文件文件夹及复制文件的操作. 需求分析 我们先不考虑用 ...

  5. Android-自己定义标题栏

    Android-自己定义标题栏 2014年4月25日 分享知识点 最近也比較多事情,想发发博客就是心有余而力不足,本篇博文主要教大家怎样实现自己定义标题栏,非常easy.那么聪明的你一下就看懂. 有兴 ...

  6. [MFC]透明图展示

    (Owed by: 春夜喜雨 http://blog.csdn.net/chunyexiyu 转载请标明来源) 一般我们可见的图形RGB三元色.对Alpha通道的话.它不一定会显示到窗口中来. 在Wi ...

  7. 0x31 质数

    poj2689 算根号R的质数,然后把L~R区间(这个很小啊)的合数判下 #include<cstdio> #include<iostream> #include<cst ...

  8. BZOJ 3160: 万径人踪灭 FFT+快速幂+manacher

    BZOJ 3160: 万径人踪灭 题目传送门 [题目大意] 给定一个长度为n的01串,求有多少个回文子序列? 回文子序列是指从原串中找出任意个,使得构成一个回文串,并且位置也是沿某一对称轴对称. 假如 ...

  9. malloc和new出来的地址都是虚拟地址 你就说内存管理单元怎么可能让你直接操作硬件内存地址!

    malloc的实现与物理内存自然是无关的,内核为每个进程维护一张页表,页表存储进程空间内每页的虚拟地址,页表项中有的虚拟内存页对应着某个物理内存页面,也有的虚拟内存页没有实际的物理页面对应.无论mal ...

  10. Java RTTI(类型信息)(.class 类对象)

    RTTI:Run-Time Type Information,关键词在 Run-Time,运行时的,而非编译期确定的关于类型的信息.运行时的类型信息(RunTime Type Information) ...