Vue生命周期钩子

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Vue生命周期钩子" title="生命周期钩子">生命周期钩子

beforeCreate

​ 在此之前完成Vue对象实例化，实例事件，生命周期的初始化等

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

created

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

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

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

beforeMount

​ 在此之前判断是否有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视为模板。

mountd

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

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

beforeUpdate

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

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

updated

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

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

beforeDestroy

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

destroyed

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

官网生命周期图：

参考：

  1. https://blog.csdn.net/jian_xi/article/details/79249300

  2. Vue官网

以上是 Vue生命周期钩子 的全部内容， 来源链接： utcz.com/z/377680.html

回到顶部