对Vue生命周期简单的理解

最新推荐文章于 2025-02-14 14:52:46 发布

原创最新推荐文章于 2025-02-14 14:52:46 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Vue.js的生命周期，包括从创建实例到销毁的各个阶段。关键阶段如beforeCreate、created、beforeMount、mounted等被逐一解释，并说明了它们的用途及应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生命周期    找错误  解决需求

new Vue()   实例vue对象
init Event & Lifecycle

beforeCreate()  没有创建对象之前就拥有的个方法
可以执行logind

init injections & reactivity

created() 组件被创建好了    属性也成功的被绑定了    dom还没有生成
在此方法中 可以从服务端获取初始化页面需要的数据    

Has `el` option 
判断是否有 element  例如el:'#app'

No when vm.$mount(el) is called
或者在 new Vue 最后面有 .$mount("#app") 也可以
如果两者都没有  至此生命周期结束

Yes
`template` option 
有 element 再检查是否有template

Yes
Compile template into render function 
有组件 或者html内容 
执行 render渲染 组件中的内容

No Compile el`s outerHtml as template 
如果两者都没有  至此生命周期也结束了

beforeMount()
挂载    开始编译template中的内容    在虚拟dom中执行的
此方法没有将真实的内容渲染到页面上去
此方法可以用来做一些基础的工作

Create vm.$el and replace 'el' with it

mounted()
模板已经编译完成 开始挂载   此方法结束  页面就显示出来了
如果有操作时要在页面加载出来之后执行的
可以写在此方法当中

Mounted 

when data changes 

以下方法执行的是 页面的增删改查
beforeUpdate()
组件更新之前    执行的函数


Virtual Dom and patch

updated()
组件更新之后    此方法执行完页面就展示

when vm.$destroy()

beforeDestroy()
销毁之前

Teardown watchers, child components and event listeners

destroyed()
销毁之后

Destroyed