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 相关文章推荐
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
php短信接口代码
2016/05/13 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
Python使用Supervisor来管理进程的方法
2015/05/28 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
python reduce 函数使用详解
2017/12/05 Python
python实现树形打印目录结构
2018/03/29 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
pytorch 修改预训练model实例
2020/01/18 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
实习生自我评价
2014/01/18 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
小学生倡议书范文
2014/05/13 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
学雷锋宣传标语
2014/06/25 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python