Vue生命周期

原创

已于 2023-04-27 14:24:11 修改 · 936 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-04-27 14:19:28 首次发布

文章详细介绍了Vue实例从创建到销毁的各个生命周期钩子函数，如beforeCreate、created、beforeMount、mounted等，以及它们在不同阶段对data、method和DOM的访问情况。在beforeCreate阶段，data和method无法访问；created阶段，data和method已初始化；beforeMount和mounted分别对应虚拟DOM和真实DOM的渲染。此外，文章还讨论了更新周期的beforeUpdate和updated，以及销毁阶段的beforeDestroy和destroyed。

在这里插入图片描述

beforeCreate( 创建前 )

这个时候，在实例被完成创建出来，el和data都没有初始化，不能访问data、method，一般在这个阶段不进行操作。

beforeCreate() {
    console.log('----beforeCreate----')
    console.log(this.msg) //undefined
    console.log(this.$el) //undefined
  },

created( 创建后 )

这个时候，vue实例中的data、method已被初始化，属性也被绑定，但是此时还是虚拟dom，真是dom还没生成，$el 还不可用。这个时候可以调用data和method的数据及方法，created钩子函数是最早可以调用data和method的，故一般在此对数据进行初始化。

created() {
    console.log('----created----')
    console.log(this.msg)	//msg
    console.log(this.$el)	//undefined
  },

beforeMount( 挂载前)

此时模板已经编译完成，但还没有被渲染至页面中（即为虚拟dom加载为真实dom），此时el存在则会显示el。在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。
当vue实例中，el为挂载目标，未对el进行定义，则this.el显示undefined，但页面中存在template也能识别挂载目标，因为template可以被看成占位符。如果对其进行