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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
php中explode函数用法分析
2014/11/15 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
php简单获取复选框值的方法
2016/05/11 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
前端路由&webpack基础配置详解
2019/06/10 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
python实现异步回调机制代码分享
2014/01/10 Python
python实现根据月份和日期得到星座的方法
2015/03/27 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
详解Python中for循环的使用方法
2015/05/14 Python
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
工业自动化毕业生自荐信范文
2014/01/04 职场文书
外联部演讲稿
2014/05/24 职场文书
学生党员批评与自我批评
2014/10/15 职场文书