Vue.js 生命周期的应用
生命周期示意图
值得注意的几个钩子函数
activated
类型:
Function
详细:
keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。
参考:
deactivated
类型:
Function
详细:
keep-alive 组件停用时调用。
该钩子在服务器端渲染期间不被调用。
参考:
updated
类型:
Function
详细:
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。
注意
updated
不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉updated
:updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}该钩子在服务器端渲染期间不被调用。
一般情况下,如果采用 jQuery 对加载完成的元素进行处理时,可以将代码写入此钩子函数中则比较适宜。如:内容页中的图片过大,我们可以将所有图片加上一个 .img-responsive 的 class,利用 BootStrap 的便利性,让图片的显示更加的符合我们的期望。
Vue.js 生命周期的应用的更多相关文章
- Vue.js 生命周期、计算属性及侦听器
一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...
- vue.js生命周期钩子函数及缓存
在使用vue.js进行开发时,使用最多的就是created.mounted.activated. 由于有些情况下,我们需要复用某些组件,因此需要用到keep-alive. 当引入keep-alive时 ...
- vue.js 生命周期
boforeCreate 创建之前 created 创建之后 boforeMount 实例化之前 mounted 实例化之后 话不多说,直接上代码 & ...
- 8.vue的生命周期
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- vue的生命周期的理解
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- vue笔记-生命周期
生命周期钩子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- Vue:生命周期
一.什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreat ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- Vue实例生命周期+vueRoter
Vue实例生命周期 vue生命周期之beforeCreate 实例创建之前除标签外,所有的vue需要的数据,事件都不存在 vue生命周期之created 实例创建之后,data和事件已经被解析到,el ...
随机推荐
- JavaScript函数及作用域
知识内容: 1.JavaScript函数 2.JavaScript全局函数及特殊函数 3.JavaScript作用域 4.本节练习 参考资料:<JavaScript高级程序设计> 一.Ja ...
- tensorflow data's save and load
note: if you'll load data,the data shape should be similar with saved data's shape. -- 中式英语,天下无敌 ...
- sparkcontext 和 sparkconf
http://spark.apache.org/docs/latest/rdd-programming-guide.html The first thing a Spark program must ...
- ubuntu 安装 环境
svn https://blog.csdn.net/leibris/article/details/72982804 https://blog.csdn.net/frankchen ...
- 24.OGNL与ValueStack(VS)-集合对象初步
转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 首先在LoginAction中增加如下字段并提供相应的get/set方法: ...
- delphi RAD Studio新版本及路线图 及官方网站 官方 版本发布时间
delphi RAD Studio Berlin 10.1 主要是FireMonkey 移动开发的改动,VCL确实没有多大变化. http://docwiki.embarcadero.com/RAD ...
- SourceTree使用方法
一 .SourceTree简介 SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端,拥有可视化界面,容易上手操作.同时它也是Mercurial和Subve ...
- 怎样在本地windows安装和配置zookeeper
Zookeeper是什么?有什么用? Zookeeper是一个分布式协调服务. 作用:为用户的分布式应用程序提供协调服务. zookeeper在底层其实只提供了两个功能: 1.管理(存储,读取)用户 ...
- ABAP-SAP的LUW和DB的LUW的区别
转载:http://www.cnblogs.com/helileng/archive/2010/10/14/1851409.html LUW是Logical Unit of Work,也就是逻辑工作单 ...
- LayeruI Loadding Custom word
var getTableResult = function (pageIndex, pageSize) { var index = layer.load(2, { content: '加载中..... ...