博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue生命周期
阅读量:5350 次
发布时间:2019-06-15

本文共 1910 字,大约阅读时间需要 6 分钟。

Vue生命周期

有时候,我们需要在实例创建过程中进行一些初始化的工作,以帮助我们完成项目中更复杂更丰富的需求开发,针对这样的需求,Vue提供给我们一系列的钩子函数。

本文详细介绍了Vue实例在创建和销毁的过程中,我们可以利用的钩子函数。

下面,我们结合官方文档提供的Vue实例生命周期图,来进行钩子函数的解析。

1451970-20190903100209679-1931821155.png

一、beforeCreate

在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

    
Title
{
{ name }}

二、created

在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

    
Title
{
{ name }}

三、beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用。

    
Title
{
{ name }}

四、mounted

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

    
Title
{
{ name }}

五、beforeUpdate

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

该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行

    
Title
{
{ name }}

六、updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher取而代之。

    
Title
{
{ name }}

七、activated

keep-alive 组件激活时调用。<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们

该钩子在服务器端渲染期间不被调用。

    
Title

七、deactivated

keep-alive 组件停用时调用。

该钩子在服务器端渲染期间不被调用。

    
Title

八、beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。频繁的创建和销毁组件对性能的影响很大,因此可以使用activated和deactivated。

该钩子在服务器端渲染期间不被调用。

    
Title

九、destroyed

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

该钩子在服务器端渲染期间不被调用。

    
Title

好了,关于Vue.js实例的生命周期就介绍到这里。

转载于:https://www.cnblogs.com/wangyueping/p/11451320.html

你可能感兴趣的文章
YUI3自动加载树实现
查看>>
kettle导数到user_用于left join_20160928
查看>>
较快的maven的settings.xml文件
查看>>
随手练——HDU 5015 矩阵快速幂
查看>>
malloc() & free()
查看>>
Java变量类型,实例变量 与局部变量 静态变量
查看>>
mysql操作命令梳理(4)-中文乱码问题
查看>>
Python环境搭建(安装、验证与卸载)
查看>>
一个.NET通用JSON解析/构建类的实现(c#)
查看>>
关于这次软件以及pda终端的培训
查看>>
如何辨别一个程序员的水平高低?是靠发量吗?
查看>>
新手村之循环!循环!循环!
查看>>
线程安全问题
查看>>
linux的子进程调用exec( )系列函数
查看>>
MySQLdb & pymsql
查看>>
zju 2744 回文字符 hdu 1544
查看>>
【luogu P2298 Mzc和男家丁的游戏】 题解
查看>>
前端笔记-bom
查看>>
上海淮海中路上苹果旗舰店门口欲砸一台IMAC电脑维权
查看>>
Google透露Android Market恶意程序扫描服务
查看>>