new Vue
创建vue实例
init events & liftcycle
开始初始化
beforeCreate
组件刚被创建,组件属性计算之前,如data属性等
init injections & reactivity
通过依赖注入导入依赖选项
created
组件实例创建完成,属性已绑定,此时DOM还未生成
el属性
检查vue配置,即new Vue{}里面的el项是否存在,有就继续检查template项。没有则等到手动绑定vm.$mount();
template
检查配置的template项,如果没有template进行填充被绑定区域,则被绑定区域的el对象的outerHTML(即整个app DOM对象,包括<div id="app">和</div>标签)都作为被填充对象替换掉填充区域
beforeMount
模板编译、挂载之前
create vm.$el and replace 'el' with it 
编译,并替换了被绑定元素
mounted
编译、挂载
Before update
组件更新之前
updated
组件更新之后
destroy
当vm.$destroy()被调用,开始拆分组件和监听器,生命周期终结

vue生命周期和钩子函数的更多相关文章

  1. vue教程2-01 vue生命周期、钩子函数

    vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...

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

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

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

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

  4. Vue生命周期和钩子函数及使用keeplive缓存页面不重新加载

    Vue生命周期 每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期,在这个过程中会有一些钩子函数会得到回调 Vue中能够被网页直接使用的最小单位就是组件,我们经常写的: ...

  5. 引入jquery利用Vue生命周期的钩子函数mounted操作DOM

    html <div id="app"> <div>{{message}}</div> </div> js var vm = new ...

  6. vue学习之生命周期和钩子函数

    参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...

  7. Vue(3)- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

    一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...

  8. Vue 3 --安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

    一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...

  9. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

随机推荐

  1. 数据流中的中位数 Find Median from Data Stream

    2019-04-17 16:34:50 问题描述: 问题求解: class MedianFinder { PriorityQueue<Integer> smaller; PriorityQ ...

  2. Axure 矩形交互样式与单选按钮组设置

    矩形交互样式: 场景:当点击昵称的时候,密码栏会显示红框,当点击密码的时候,昵称会显示红框 补充:昵称栏和密码栏的组成其实是一个矩形框和一个文本框,这样才可以设置出场景所示的样式 这里的设置只是简单的 ...

  3. Python字符编码与转换

          需知: .在python2默认编码是ASCII, python3里默认是unicode .unicode 分为 utf-(占4个字节),utf-(占两个字节),utf-(占1-4个字节), ...

  4. 'ascii' codec can't decode byte 0xe5 in position 10: ordinal not in range(128)

    python2.7 向Excel中写入数据中含有中文就一直报错 'ascii' codec can't decode byte 0xe5 in position 10: ordinal not in ...

  5. C# 指定程序打开指定文件

    Process process = new Process(); process.StartInfo.FileName = 指定程序exe文件路径: process.StartInfo.Argumen ...

  6. SpringBoot关于SpringDataJpa中findOne()方法报错问题

    问题描述: 首先用的SpringDataJPA的1.11版本,可以使用findOne()方法根据id查询 然后我使用了2.0.5版本,发现findOne()方法报错了,不能用来当作根据id查询了. 当 ...

  7. 找到多个与名为“Home”的控制器匹配的类型

    “/”应用程序中的服务器错误. 找到多个与名为“Home”的控制器匹配的类型.如果为此请求(“{controller}/{action}/{id}”)提供服务的路由没有指定命名空间以搜索与此请求相匹配 ...

  8. 浏览器中打开PDF链接

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

  9. java操作svn工具类SvnUtil

    直接上代码,工作中使用的版本,记录下. public class SvnUtil { private static Logger logger = Logger.getLogger(SvnUtil.c ...

  10. Qt 适合做界面

    确实感觉的Qt的界面开发相比MFC方便了许多,不用为设计和实现窗口烦恼.不需要太细研究界面的实现,从Qt自带的例子中就能轻松学习和应用.在界面开发上Qt的实用比MFC前进了许多.做C++开发不管怎样如 ...