李沧网站建设,怎样做网站开发,宠物网站页面设计模板,曲靖网站制作Vue 实例的生命周期可以分为创建阶段、挂载阶段、更新阶段和销毁阶段。下面是每个阶段具体干了什么的说明和对应的代码示例#xff1a;
创建阶段
beforeCreate#xff1a; 此阶段在实例初始化之后#xff0c;数据观测 (data observer) 和 event/watcher 事件配置之前被调用…Vue 实例的生命周期可以分为创建阶段、挂载阶段、更新阶段和销毁阶段。下面是每个阶段具体干了什么的说明和对应的代码示例
创建阶段
beforeCreate 此阶段在实例初始化之后数据观测 (data observer) 和 event/watcher 事件配置之前被调用。主要用于在实例初始化之后但是在实例准备好之前执行一些逻辑。
new Vue({beforeCreate: function () {console.log(Before create hook);}
});
created 在实例创建完成后被立即调用。在这一步实例已经完成了 data 的观测和属性方法的运算但是挂载阶段还没开始。
new Vue({created: function () {console.log(Created hook);}
});
挂载阶段
beforeMount 在挂载开始之前被调用。相关的render函数首次被调用。
new Vue({beforeMount: function () {console.log(Before mount hook);}
});
mounted 在实例被挂载到DOM后调用。如果根实例挂载到了一个文档内的元素上当 mounted 被调用时 vm.$el 也在文档内。
new Vue({mounted: function () {console.log(Mounted hook);}
});
更新阶段
beforeUpdate 数据更新时调用发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中进一步地更改状态不会触发附加的重渲染过程。
new Vue({beforeUpdate: function () {console.log(Before update hook);}
});
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁在这之后会调用该钩子。
new Vue({updated: function () {console.log(Updated hook);}
});
销毁阶段
beforeDestroy 在实例销毁之前调用。实例仍然完全可用。
new Vue({beforeDestroy: function () {console.log(Before destroy hook);}
});
destroyed 在实例销毁后调用。此时实例的所有指令都已解绑所有的事件监听器已移除所有的子实例也已被销毁。
new Vue({destroyed: function () {console.log(Destroyed hook);}
});
以上是Vue实例生命周期各个阶段的具体说明和对应的代码示例希望对你有所帮助。
