Vue生命周期钩子

最新推荐文章于 2022-07-04 23:38:24 发布

CodingBugs

最新推荐文章于 2022-07-04 23:38:24 发布

阅读量427

点赞数

分类专栏： Vue 文章标签： Vue生命周期

本文链接：https://blog.csdn.net/qq_33061377/article/details/83894971

版权

4 篇文章 0 订阅

订阅专栏

在此之前完成Vue对象实例化，实例事件，生命周期的初始化等
Vue对象用新方法实例化。它创建一个Vue类的对象来处理DOM元素。对象的这个生命阶段可以通过beforeCreated 挂钩来访问。我们可以在这个钩子中插入我们的代码，在对象初始化之前执行。

在此之前完成Vue中data属性，方法的绑定

在这个生命阶段，对象及其事件完全初始化。 created 是访问这个阶段并编写代码的钩子。

这个阶段可以进行数据的操作（获取后台数据，数据转换等）

在此之前判断是否有el选项, 是否有template, 如果没有el则会在实例挂载el后调用vm.$mount(el)

没有template则编译el选项指定的元素，有的话编译template，通过渲染函数render生成虚拟的DOM

new Vue({
	el: '#app', 	// 对应页面DOM上id="#app"
	router,
	store,
	template: '<App/>',
	components: { App }
});

这个钩子被调用 beforeMounted。在这个阶段，它检查是否有任何模板可用于要在DOM中呈现的对象。如果没有找到模板，那么它将所定义元素的外部HTML视为模板。

在此之前完成template编译的html挂载到指定位置替换el指定的元素

一旦模板准备就绪。它将数据放入模板并创建可呈现元素。用这个新的数据填充元素替换DOM元素。这一切都发生在mounted钩子上。整个生命周期只会执行一次。（也可以在这里初始化数据）

实时监听data的数据的变化，更新前触发

在外部事件/用户输入beforeUpdate发生更改时，此钩子即在反映原始DOM元素的更改之前被触发。

在此之前如果有更新会重新渲染虚拟DOM(re-render),然后对比真实DOM更新变化的部分

通过实际更新DOM对象并触发updated，屏幕上的变化得到呈现

就在Vue对象被破坏并从内存中释放之前， deforeDestroy 钩子被触发，并允许我们在其中处理我们的自定义代码。销毁前实例依旧可用

该 destroyed 钩子被成功运行销毁对象上调用。

官网生命周期图：

在这里插入图片描述

参考：

关注

专栏目录