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 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 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
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
php中static和const关键字用法分析
2016/12/07 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
python实现斗地主分牌洗牌
2020/06/22 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
小学一年级评语大全
2014/04/22 职场文书
技术支持岗位职责
2015/02/13 职场文书
承诺书模板大全
2015/05/04 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
《包身工》教学反思
2016/02/23 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL