vue中各选项及钩子函数执行顺序详解


Posted in Javascript onAugust 25, 2018

在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的。

vue的生命周期如下图:

vue中各选项及钩子函数执行顺序详解

在页面首次加载执行顺序有如下:

beforeCreate //在实例初始化之后、创建之前执行

created //实例创建后执行

beforeMounted //在挂载开始之前调用

filters //挂载前加载过滤器

computed //计算属性

directives-bind //只调用一次,在指令第一次绑定到元素时调用

directives-inserted //被绑定元素插入父节点时调用

activated //keek-alive组件被激活时调用,则在keep-alive包裹的嵌套的子组件中触发

mounted //挂载完成后调用

{{}} //mustache表达式渲染页面

修改页面input时,被自动调用的选项顺序如下:

watch //首先先监听到了改变事件

filters //过滤器没有添加在该input元素上,但是也被调用了

beforeUpdate //数据更新时调用,发生在虚拟dom打补丁前

directived-update //指令所在的组件的vNode更新时调用,但可能发生在其子vNode更新前

directives-componentUpdated//指令所在的组件的vNode及其子组件的vNode全部更新后调用

updated //组件dom已经更新

组件销毁时,执行顺序如下:

beforeDestroy //实例销毁之前调用

directives-unbind //指令与元素解绑时调用,只调用一次

deactivated //keep-alive组件停用时调用

destroyed //实例销毁之后调用

以上这篇vue中各选项及钩子函数执行顺序详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript与函数式编程解释
Apr 27 Javascript
Javascript Object.extend
May 18 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
jQuery常用选择器详解
Jul 17 jQuery
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 #Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 #Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 #Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 #Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 #Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 #Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 #Javascript
You might like
我的论坛源代码(三)
2006/10/09 PHP
PHP文件上传实例详解!!!
2007/01/02 PHP
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
jquery移动节点实例
2015/01/14 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
Python3 中文文件读写方法
2018/01/23 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
python写程序统计词频的方法
2019/07/29 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
妇产科护士自我鉴定
2013/10/15 职场文书
简短的公司员工自我评价分享
2013/11/13 职场文书
九年级数学教学反思
2014/02/02 职场文书
yy婚礼主持词
2014/03/14 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
英镑符号 £
2022/02/17 杂记