下面是分步骤解释vue生命周期

1、开始:new Vue()

创建vue对象过程还是比较繁琐的,所以创建vue对象是异步执行的。

回调函数:beforeCreate

2、Observe Data

监控模型层的数据

3、Init Events

初始化事件

回调函数:created

4、验证是否有el和template

回调函数:beforeMount

5、Create vm.$el and replace el with it

创建vue对象里的属性和方法

回调函数:mountend

6、Mounted    

初始化工作结束后,进入工作状态,我们看到他在监控视图层,监控模型层,数据变化要对应的变化,所以这是一个循环的。

回调函数:beforeUpdate 和updated

销毁时机:调用函数vm.$destroy

回调函数:beforeDestroy

7、Teardown watchers,child components and event listeners

销毁时,不再监控

8、Destroyed

回调函数:destroyed

此时vue对象被彻底的销毁。

4、VUE生命周期的更多相关文章

  1. vue生命周期的介绍

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

  2. vue 生命周期

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

  3. 详解vue生命周期

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

  4. 关于vue生命周期

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

  5. vue生命周期的理解

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

  6. Vue生命周期,面试常见问题

    一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...

  7. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

  8. 面试题之(vue生命周期)

    在面试的时候,vue生命周期被考察的很频繁. 什么是vue生命周期呢? Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这 ...

  9. [转] Vue生命周期

    Vue生命周期 这是Vue文档里关于实例生命周期的解释图 那么下面我们来进行测试一下 <section id="app-8"> {{data}} </sectio ...

  10. vue生命周期、钩子函数

    https://segmentfault.com/a/1190000011381906    详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...

随机推荐

  1. frameset frame 页面空白

    <html style="background:#213039;"> <head> <title>网站后台管理中心</title> ...

  2. Nginx 高级配置-https 功能

    Nginx 高级配置-https 功能 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTTPS工作过程 1>.SSL/TLS SSL(Secure Socket Lay ...

  3. Redis五大数据类型详解

    关于Redis的五大数据类型,它们分别为:String.List.Hash.Set.SortSet.本文将会从它的底层数据结构.常用操作命令.一些特点和实际应用这几个方面进行解析.对于数据结构的解析, ...

  4. tf.gather_nd()

    tf.gather_nd( params, indices, name=None, batch_dims=0) TensorFlow链接:https://tensorflow.google.cn/ap ...

  5. POJ 3694Network(Tarjan边双联通分量 + 缩点 + LCA并查集维护)

    [题意]: 有N个结点M条边的图,有Q次操作,每次操作在点x, y之间加一条边,加完E(x, y)后还有几个桥(割边),每次操作会累积,影响下一次操作. [思路]: 先用Tarjan求出一开始总的桥的 ...

  6. 微信2.1 for Windows发布 微信群可多人语音或视频通话

    5月31日,windows电脑版微信发布更新,微信2.1 for Windows带来最主要的功能是微信群可以多人语音或视频通话了,建个家庭群组,常年在外工作的家人也可以每天见面了,多亲切! 除了可以建 ...

  7. 每天一道Rust-LeetCode(2019-06-02)

    每天一道Rust-LeetCode(2019-06-02) Z 字形变换 坚持每天一道题,刷题学习Rust. LeetCode原题 Z 字形变换 题目描述 将一个给定字符串根据给定的行数,以从上往下. ...

  8. MacOS下IDEA设置智能提示不区分大小写

    本文只针对,IDEA-2019.2.3版本 目录地址: Edit -> General -> Code Completion -> Match case -> 勾选去掉 截图如 ...

  9. selenium--表格和复选框的定位

    表格定位 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  10. Pandas之csv文件对列行的相关操作

    1.Pandas对数据某一列删除 1.删除列 import pandas as pd df = pd.read_csv(file) #axis=1就是删除列 df.drop(['列名1','列名2'] ...