vue中的生命周期
vue中的生命周期
1,vue生命周期简介:
1、beforeCreate在实例初始化之后,数据观测和event/watcher时间配置之前被调用。
2、created实例已经创建完成之后被调用。在这一步,实例已经完成以下的配置:数据观测,属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。
3、beforeMount在挂载开始之前被调用:相关的render函数首次被调用。该钩子在服务器端渲染期间不被调用。
4、mountedel被新创建的vm.$el替换,并挂在到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内。该钩子在服务端渲染期间不被调用。
5、beforeUpdate数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。你可以在这个钩子中进一步第更改状态,这不会触发附加的重渲染过程。该钩子在服务端渲染期间不被调用。
6、updated由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件DOM已经更新,所以你现在可以执行依赖于DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务端渲染期间不被调用。
7、activatedkeep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。
8、deactivatedkeep-alive组件停用时调用。该钩子在服务端渲染期间不被调用。
9、beforeDestroy 【类似于React生命周期的componentWillUnmount】实例销毁之间调用。在这一步,实例仍然完全可用。该钩子在服务端渲染期间不被调用。
10、destroyedVue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务端渲染不会被调用。
vue中的生命周期的更多相关文章
- Vue 中的生命周期和钩子函数
生命周期: beforeCreate:el 和 data 并未初始化 (此方法不常用) created:完成了 data 数据的初始化,el的初始化未完成.用来发送ajax beforeMount:( ...
- vue中的生命周期事件和钩子函数
vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期.通俗的将就是vue实例从创建到销毁的 ...
- Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- 详解Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- Vue js 的生命周期详解
Vue 实例的生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列 过程,我们称这是 Vue 的生命周期.通俗说就是 Vue ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- vue组件的生命周期
先来张组件生命周期的示意图: 文档里是这样描述的:你不需要立马弄明白所有的东西,不过以后它会有帮助.传送门. Vue2.0的生命周期钩子一共有10个,同样结合官方文档作出了下表 生命周期钩子 详细 b ...
- Vue.js-07:第七章 - Vue 实例的生命周期
一.前言 在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...
- vue实例的生命周期
Vue实例的生命周期也就是这个实例从出生到死亡的过程,所以我在文档原图上把这个周期大致分为创建过程 | 运行过程 | 销毁过程三个阶段,不同结果或又分为一些小的阶段 在第一个阶段,创建阶段,会完成Vu ...
随机推荐
- VS2015 C#取消最大化按钮,设置鼠标不可调整窗体大小
取消最大化按钮设置 设置窗体不可被鼠标调整大小
- iis配置问题报错 -- Could not load file or assembly 'Oracle.DataAccess' or one of its dependencies
具体提示: Could not load file or assembly 'Oracle.DataAccess' or one of its dependencies. 试图加载格式不正确的程序. ...
- add Admob with Cocos2d-x on iOS
add Admob with Cocos2d-x on iOS (2013-02-27 14:12:00) 转载▼ 标签: c=blog&q=it&by=tag" targe ...
- 菜鸟的mongoDB学习---(六)MongoDB 索引
MongoDB 索引 ps:大概有半个月木有更新了,因为前一阶段的出差和这几天突然来的项目.导致上网时间急剧降低,实在是sorry,以后预计会好一点. 索引通常可以极大的提高查询的效率.假设没有索引. ...
- Java中使用多线程、curl及代理IP模拟post提交和get訪问
Java中使用多线程.curl及代理IP模拟post提交和get訪问 菜鸟,多线程好玩就写着玩.大神能够路过不吝赐教.小弟在这受教.谢谢! 很多其它分享请关注微信公众号:lvxing1788 ~~~~ ...
- MVC/MVP/MVVM区别——MVVM就是angular,视图和数据双向绑定
摘自:http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html 一.MVC MVC模式的意思是,软件可以分成三个部分. 视图(View):用户界面 ...
- Linux中文件上传使用rz
1.首先,要是服务器不支持rz命令的话,需要安装执行 sudo yum -y install lrzsz 2.再输入rz -be命令,选择需要上传的本地文件 sudo rz 从服务端发送文件到客户端: ...
- [转]C#事件-使用事件需要的步骤
事件是C#中另一高级概念,使用方法和委托相关.奥运会参加百米的田径运动员听到枪声,比赛立即进行.其中枪声是事件,而运动员比赛就是这个事件发生后的动作.不参加该项比赛的人对枪声没有反应. 从程序员的角度 ...
- RedHat/CentOS(Linux)双网卡bond(mode=6)
1. 将/etc/sysconfig/network-scripts/ifcfg-ens1f0和ifcfg-ens1f1文件备份到root目录下2. 修改/etc/sysconfig/network- ...
- Win10 UI入门 导航滑动条 求UWP工作
借鉴了 段博琼 大哥写的导航滑动,自己实现了一个类似安卓 IOS 导航滑动条 支持等比例 分割 tabView 支持动画滑动 效果如下图 WYGrid 你可以想象一个GridView itemsWr ...