vue生命周期和钩子函数
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生命周期和钩子函数的更多相关文章
- vue教程2-01 vue生命周期、钩子函数
vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- vue生命周期、钩子函数
https://segmentfault.com/a/1190000011381906 详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...
- Vue基础进阶 之 Vue生命周期与钩子函数
Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...
- Vue生命周期和钩子函数及使用keeplive缓存页面不重新加载
Vue生命周期 每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期,在这个过程中会有一些钩子函数会得到回调 Vue中能够被网页直接使用的最小单位就是组件,我们经常写的: ...
- 引入jquery利用Vue生命周期的钩子函数mounted操作DOM
html <div id="app"> <div>{{message}}</div> </div> js var vm = new ...
- vue学习之生命周期和钩子函数
参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...
- Vue(3)- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...
- Vue 3 --安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
随机推荐
- shiro框架-配置
才开始学没有什么理解分享一个博客写的比较详细 借鉴大佬的:https://www.cnblogs.com/maofa/p/6407102.html@阿发仔 https://blog.csdn.net ...
- jenkins构建成功,但war包没有发布到tomcat下
如题,jenkins构建成功,在jenkins的workspace中有生成的war包,但没有发布到tomcat的webapps目录. 构建日志 找了很多原因发现应该还是项目相对路径不对导致的,我的wa ...
- 记录几个字符串转html的帮助类,已防忘记
html的帮助类 /// <summary> /// Represents a HTML helper /// </summary> public partial class ...
- jieba库初级应用
1.jieba库基本介绍 (1).jieba库概述 jieba是优秀的中文分词第三方库 - 中文文本需要通过分词获得单个的词语 - jieba是优秀的中文分词第三方库,需要额外安装 - ...
- (转)理解CPU steal time
转自:https://www.cnblogs.com/menkeyi/p/6732020.html Netflix 很关注CPU的Steal Time.他们的策略是:如果是当前虚拟机的Steal Ti ...
- font——文字属性大全
一.字体风格(font-style) <style type="text/css"> /*默认值.浏览器显示一个标准的字体样式.*/ p.normal {font-st ...
- 汇编语言实验1 & macOS下DOSBox的安装
一.macOS下DOSBox的安装 1.在官网下载DOSBox-0.74.dmg 打开,此时默认z盘 一番折腾,终于搞定debug 然后为了不用每次都执行mount,遂更改配置文件自动挂在目录 再次打 ...
- 转:为什么根据IP地址查询物理所在地,而不是mac地址?
来自 https://mp.weixin.qq.com/s/aOZQGMnMI2nkX4-qcJL4WQ 读者 不是说mac地址是计算机网卡唯一的地址吗?这样不是可以直接定位到某一台机器吗?为什么要用 ...
- 此博客不再更新和分享UiPath文章
由于版权问题,将不再分享我的笔记 警告:任何人不得拷贝及挪用我的uipath笔记作为商业用途,一旦发现,立刻发律师函,请知悉及慎重!!!!
- 文科生打开python的大门
作为唯一的一名教育学院的学生,加入python课程,一定要声明我可不是并不是被迫选课的!虽然是文科生,但是是对编程这种东西很感兴趣的文科生.从站在python门口的张望,到现在悄悄把门打开,越来越感觉 ...