生命周期示意图

值得注意的几个钩子函数

activated
deactivated
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 生命周期的应用的更多相关文章

  1. Vue.js 生命周期、计算属性及侦听器

    一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...

  2. vue.js生命周期钩子函数及缓存

    在使用vue.js进行开发时,使用最多的就是created.mounted.activated. 由于有些情况下,我们需要复用某些组件,因此需要用到keep-alive. 当引入keep-alive时 ...

  3. vue.js 生命周期

    boforeCreate   创建之前 created            创建之后 boforeMount    实例化之前 mounted          实例化之后 话不多说,直接上代码 & ...

  4. 8.vue的生命周期

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

  5. vue的生命周期的理解

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

  6. vue笔记-生命周期

    生命周期钩子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. Vue:生命周期

    一.什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreat ...

  8. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  9. Vue实例生命周期+vueRoter

    Vue实例生命周期 vue生命周期之beforeCreate 实例创建之前除标签外,所有的vue需要的数据,事件都不存在 vue生命周期之created 实例创建之后,data和事件已经被解析到,el ...

随机推荐

  1. JavaScript函数及作用域

    知识内容: 1.JavaScript函数 2.JavaScript全局函数及特殊函数 3.JavaScript作用域 4.本节练习 参考资料:<JavaScript高级程序设计> 一.Ja ...

  2. tensorflow data's save and load

    note: if you'll load data,the data shape should be similar with saved data's shape.    -- 中式英语,天下无敌 ...

  3. sparkcontext 和 sparkconf

    http://spark.apache.org/docs/latest/rdd-programming-guide.html The first thing a Spark program must ...

  4. ubuntu 安装 环境

    svn   https://blog.csdn.net/leibris/article/details/72982804         https://blog.csdn.net/frankchen ...

  5. 24.OGNL与ValueStack(VS)-集合对象初步

    转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 首先在LoginAction中增加如下字段并提供相应的get/set方法: ...

  6. delphi RAD Studio新版本及路线图 及官方网站 官方 版本发布时间

    delphi  RAD Studio Berlin 10.1 主要是FireMonkey 移动开发的改动,VCL确实没有多大变化. http://docwiki.embarcadero.com/RAD ...

  7. SourceTree使用方法

    一 .SourceTree简介 SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端,拥有可视化界面,容易上手操作.同时它也是Mercurial和Subve ...

  8. 怎样在本地windows安装和配置zookeeper

    Zookeeper是什么?有什么用? Zookeeper是一个分布式协调服务. 作用:为用户的分布式应用程序提供协调服务.  zookeeper在底层其实只提供了两个功能: 1.管理(存储,读取)用户 ...

  9. ABAP-SAP的LUW和DB的LUW的区别

    转载:http://www.cnblogs.com/helileng/archive/2010/10/14/1851409.html LUW是Logical Unit of Work,也就是逻辑工作单 ...

  10. LayeruI Loadding Custom word

    var getTableResult = function (pageIndex, pageSize) { var index = layer.load(2, { content: '加载中..... ...