vue声明周期_详解Vue生命周期

前言

生命周期是理解Vue的一个非常重要的环节,初学Vue时可能会出现数据渲染的失败的错误,因此打算写两篇博客详细介绍Vue的生命周期:单个组件的Vue生命周期(本文)

多个组件的Vue生命周期

Vue生命周期

1.1 beforeCreate()说明

在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用;data、computed、watch、methods和DOM都不能使用

[JavaScript] 纯文本查看 复制代码

?

注意

如果非要在beforeCreate()取data也不是没有办法,异步方式可以通过this.$nextTick()或seTimeout,同步方式可以通过this.$options。当然一般不会这么操作。

[JavaScript] 纯文本查看 复制代码

?

1.2 created()说明

在实例创建完成后被立即调用,可以操作data、computed、watch、methods,但DOM还没挂载,不能操作。

[JavaScript] 纯文本查看 复制代码

?

通常在此进行页面初始化操作或简单的Ajax请求(此时页面还未呈现,过多的请求会导致白屏)

1.3 beforeMount()说明

在挂载开始之前被调用:相关的 render 函数首次被调用。这一步没啥特别的,很少在此进行操作。

[JavaScript] 纯文本查看 复制代码

?

1.4 mounted()说明

实例被挂载到DOM上。通常用于执行Ajax请求。

[JavaScript] 纯文本查看 复制代码

?

注意

mounted 不保证所有子组件都一起被挂载了。若想要等整个视图都渲染完毕再操作,可以使用 this.$nextTick

[JavaScript] 纯文本查看 复制代码

?

1.5 beforeUpdate()

只有数据更新时才调用,发生在虚拟 DOM 打补丁之前。适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。

[HTML] 纯文本查看 复制代码

?

[JavaScript] 纯文本查看 复制代码

?

1.6 updated()说明

虚拟 DOM 重新渲染和打补丁之后调用,组件DOM已经更新,可以执行依赖于DOM的操作。

[JavaScript] 纯文本查看 复制代码

?

注意

updated 不保证所有子组件都被重绘了。若想要等到整个视图都重绘完毕再操作,可以用 this.$nextTick

1.7 beforeDestroy()说明

实例销毁前调用,这里没什么特殊的,该用的仍然可用

[JavaScript] 纯文本查看 复制代码

?

1.8 destroyed()说明

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

这里我一开始的理解是数据不能用了,结果还依然打印了数据,不解中……

[JavaScript] 纯文本查看 复制代码

?

总结Vue的生命周期可以总结为3个阶段:初始化阶段(执行1次):beforeCreate、created、beforeMount、mounted

数据更新阶段(执行多次):beforeUpdate、updated

销毁阶段/切换组件(执行1次):beforeDestory、destroyed

用得比较多的就是 created 和 mounted 了

更多免费技术资料可关注:annalin1203

你可能感兴趣的:(vue声明周期)