vue中各选项及钩子函数执行顺序分析

这篇文章主要为大家详细介绍了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中各选项及钩子函数执行顺序详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/5783-0.html

注：关于vue中各选项及钩子函数执行顺序分析的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js