Vue生命周期详解
Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文,因此this与你期待的Vue实例不同。 1、beforeCreate 在实例初始化之后,数据观测和event/watcher时间配置之前被调用。
2、created 实例已经创建完成之后被调用。在这一步,实例已经完成以下的配置:数据观测,属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。
3、beforeMount 在挂载开始之前被调用:相关的render函数首次被调用。 该钩子在服务器端渲染期间不被调用。
4、mounted el被新创建的vm.$el替换,并挂在到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内。 该钩子在服务端渲染期间不被调用。
5、beforeUpdate 数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。 你可以在这个钩子中进一步第更改状态,这不会触发附加的重渲染过程。 该钩子在服务端渲染期间不被调用。
6、updated 由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。 当这个钩子被调用时,组件DOM已经更新,所以你现在可以执行依赖于DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。 该钩子在服务端渲染期间不被调用。
7、activated keep-alive组件激活时调用。 该钩子在服务器端渲染期间不被调用。
8、deactivated keep-alive组件停用时调用。 该钩子在服务端渲染期间不被调用。
9、beforeDestroy 【类似于React生命周期的componentWillUnmount】 实例销毁之间调用。在这一步,实例仍然完全可用。 该钩子在服务端渲染期间不被调用。
10、destroyed Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务端渲染不会被调用。
Vue生命周期详解的更多相关文章
- VUE 生命周期 详解
beforeCreate vue中的第一个生命周期,在vue实列被完全创建出来之前会执行.注意:在beforeCreate生命周期函数执行时,data.methods.中的数据都还没有初始化. cra ...
- vue 生命周期详解
- ASP.NT运行原理和页面生命周期详解及其应用
ASP.NT运行原理和页面生命周期详解及其应用 1. 下面是我画的一张关于asp.net运行原理和页面生命周期的一张详解图.如果你对具体不太了解,请参照博客园其他帖子.在这里我主要讲解它的实际应用. ...
- ASP.NET生命周期详解
最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...
- ASP.NET生命周期详解 [转]
最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...
- ASP.NET生命周期详解(转)
看到好文章需要分享. 最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多 ...
- React—组件生命周期详解
React—组件生命周期详解 转自 明明的博客 http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...
- VUE二 生命周期详解
vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实 ...
- vue实例生命周期详解
每个 Vue 实例在被创建之前都要经过一系列的初始化过程. 例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM . 在这个过程中,实 ...
随机推荐
- 应用中对APK进行安装
权限 <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES"/> //允 ...
- 微服务框架——SpringCloud(二)
1.Feign声明式服务调用(负载均衡+熔断器) a.概念:Feign是一个声明式的Web Service客户端,它的目的就是让Web Service调用更加简单.Feign整合了Ribbon和Hys ...
- 生产环境,vue页面跳转的时候,js报404的问题
最近上线的一个vue项目,需要各种路由跳转,在开发和测试环境都没问题,但是在生产环境,发现后期更新代码的时候,有些机型(ios机型,暂未发现android有问题)跳转路由的时候,标题修改了,但是内容并 ...
- less是什么?直接用css好还是less好
问:Less是一个动态CSS语言框架,Less扩展了CSS的动态特性 [1]:从实现角度来说,直接用css看起来能方便一些,而less还要编译? [2]:技术上好像灵活,但是从使用者的角度来说,css ...
- Android像素密度单位解析
Android应用程序 res/drawable-hdpi drawable-xxhdpi 显示的不同 对比实验: 创建项目后,默认在相关文件目录中生成以下图标: hdpi --> 72px m ...
- mysql数据库 ,java 代码巧妙结合提升系统性能。
查询频繁的表t_yh_transport_task 保证数据量最少,增加查询效率, 常用于查询的字段增加索引, 每日定时移动数据 <!-- 医院系统预约任务历史删除定时器 --> & ...
- ZOJ4043 : Virtual Singers
将所有$A$和$B$混在一起排序,那么每个$B$要匹配一个$A$,从左往右依次考虑每个数: 如果是一个$B$: 如果左边没有多余的$A$,那么将其放入堆$q_C$中,表示这个$B$还未匹配. 否则选择 ...
- 微信跳转,手机WAP浏览器一键超级跳转微信指定页面
微信跳转,手机WAP浏览器一键超级跳转微信指定页面 这篇文章主要介绍了如何在手机浏览器wap网页中点击链接跳转到微信界面,需要的朋友可以参考下 先说第一种,最简单的唤起微信协议,weixin://主流 ...
- C++ otlv4 连接 sql server 数据库小记
otlv4介绍: http://otl.sourceforge.net/ 测试代码 // testotlv4.cpp : 定义控制台应用程序的入口点. // #include "stdafx ...
- spring创建bean的三种方式
spring创建bean的三种方式: 1通过构造方法创建bean(最常用) 1.1 spring默认会通过无参构造方法来创建bean,如果xml文件是这样配置,则实体类中必须要有无参构造方法,无参构造 ...