vue组件生命周期详解
、beforeCreate
在实例初始化之后,数据观测和event/watcher时间配置之前被调用。
、created
实例已经创建完成之后被调用。在这一步,实例已经完成以下的配置:数据观测,属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。
、beforeMount
在挂载开始之前被调用:相关的render函数首次被调用。
该钩子在服务器端渲染期间不被调用。
、mounted
el被新创建的vm.$el替换,并挂在到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内。
该钩子在服务端渲染期间不被调用。
、beforeUpdate
数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。
你可以在这个钩子中进一步第更改状态,这不会触发附加的重渲染过程。
该钩子在服务端渲染期间不被调用。
、updated
由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件DOM已经更新,所以你现在可以执行依赖于DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
该钩子在服务端渲染期间不被调用。
、activated
keep-alive组件激活时调用。
该钩子在服务器端渲染期间不被调用。
、deactivated
keep-alive组件停用时调用。
该钩子在服务端渲染期间不被调用。
、beforeDestroy 【类似于React生命周期的componentWillUnmount】
路由跳转加载的时候会调用。(有时用到eventBus事件总线事件不触发的时候,放到此生命周期里问题就解决了。)
实例销毁之间调用。在这一步,实例仍然完全可用。
该钩子在服务端渲染期间不被调用。
需要注意的是当组件使用了<keep-alive>进行缓存组件数据时,beforeDestroy生命周期也不会执行。
、destroyed
Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
该钩子在服务端渲染不会被调用。

vue组件生命周期详解的更多相关文章
- React—组件生命周期详解
React—组件生命周期详解 转自 明明的博客 http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...
- VUE二 生命周期详解
vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实 ...
- vue实例生命周期详解
每个 Vue 实例在被创建之前都要经过一系列的初始化过程. 例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM . 在这个过程中,实 ...
- Vue组件通信方式全面详解
vue组件通信方式全面详解 众所周知,Vue主要思想就是组件化开发.因为,在实际的项目开发中,肯定会以组件的开发模式进行.形如页面和页面之间需要通信一样,Vue 组件和组件之间肯定也需要互通有无.共享 ...
- 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中的很多 ...
- ASP.NT运行原理和页面生命周期详解及其应用
ASP.NT运行原理和页面生命周期详解及其应用 1. 下面是我画的一张关于asp.net运行原理和页面生命周期的一张详解图.如果你对具体不太了解,请参照博客园其他帖子.在这里我主要讲解它的实际应用. ...
- Vue 组件生命周期钩子
Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...
随机推荐
- SE91 SAP消息类型
SE91 SAP消息类型 E:Error W:Warning I :Information A :Abortion S :Success 标准 : MESSAGE ID sy-msgid TYPE ...
- C++通过jsoncpp类库读写JSON文件-json用法详解
介绍: JSON 是常用的数据的一种格式,各个语言或多或少都会用的JSON格式. JSON是一个轻量级的数据定义格式,比起XML易学易用,而扩展功能不比XML差多少,用之进行数据交换是一个很好的选择. ...
- 线程中为控件赋值Winform
this.Invoke(new MethodInvoker(() => { //TO DO })); this.Invoke(new Action(()=>{ // TO DO }));
- xdg-open命令智能打开各种格式的文件
在linux中,通常用命令行打开文本文件,比如用命令gedit.more.cat.vim.less.但当需要打开其他格式文件时,比如pdf.jpg.mp3格式文件,咱们通常做法是进入到文件所在的目录, ...
- 利用angularjs完成注册表单
ng-init="username = 'first'"设置初始显示first字段 ng-class="{'error':signUpForm.username.$inv ...
- Video 对象方法 canPlayType()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 【转】构造自己的DIB类
ZC: 搜索"DIB_HEADER_MARKER"时,看到的这个文章 http://blog.csdn.net/yyyuhan/article/details/2026652 ...
- conda-使用手册
conda remove -n tf --all ##删除环境 conda env export -- name ##首先导出配置文件: conda env create -f name.yml ## ...
- ionic+微信js-sdk集成初步融合,在子路由页引入js操作dom节点
.controller('yaoheCtrl',['$scope',function ($scope) { $scope.$watch('$viewContentLoaded',function(ev ...
- sublime编辑器
1.完全卸载sublime的方法. 打开preferences->browse packages 这个包,打开的那个目录,然后删除完整的sublime Text3目录就行. 2.sublime的 ...