在vue中,实例选项、钩子函数和{{}}表达式可以直接执行,无需手动调用。
vue的生命周期如下:
页面上的第一个加载执行顺序如下:
BeforeCreate //在实例初始化之后和创建之前执行
已创建//在创建实例后执行
在装载开始之前调用BeforeMounted //方法
过滤器//安装前装入过滤器
计算//计算属性
指令-bind //只调用一次,当指令第一次绑定到元素时调用。
指令-插入//当绑定元素插入父节点时调用
激活//keek-alive组件时调用,它在由keep-alive包装的嵌套子组件中触发
挂载//挂载完成后调用
{ { } }//小胡子表情渲染页面
修改页面输入时,自动调用选项的顺序如下:
Watch //首先监控了变更事件
Filters //filter未添加到输入元素,但它也被调用
在数据更新时调用BeforeUpdate //,并在修补虚拟dom之前发生
当directive-update//指令所在组件的vNode更新时调用,但可能在其子vNode更新之前发生
指令-组件已更新//指令所在组件的虚拟代码及其子组件的虚拟代码都已更新并被调用
更新//组件dom已更新
销毁组件时,执行顺序如下:
销毁前//在实例销毁前调用
指令-当指令与元素解除绑定时,只调用一次unbind //指令
停用//保持活动组件时调用
销毁//在实例销毁后调用
以上对vue中每个选项和hook函数执行顺序的详细说明,都是边肖分享的内容,希望能给大家一个参考和支持。