每个vue实例被创建时都会经历一系列初始化的过程,像是一个生命从无到有的过程,所以叫生命周期,而这个过程都有对应的不同阶段,也就对应了生命周期不同的钩子函数,这些生命周期函数,作为vue实例的属性使用,只有到了这一过程的时候,对应的函数才会被调用,总结下来有如下方法:

  beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用;

  created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始;

  beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用;

  mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子;

  beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器;

  updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

  具体的介绍,可以到官网看详细的内容(生命周期钩子

  在官网讲vue实例的时候,给了一张生命周期的图片,我这里也附一张,帮助理解生命周期的过程:

vue 生命周期钩子的更多相关文章

  1. Vue生命周期 钩子函数和组件传值

    Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

  2. 对vue生命周期/钩子函数的理解

    对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...

  3. vue生命周期钩子

    转载自:https://segmentfault.com/a/1190000008010666?utm_source=tag-newest https://segmentfault.com/a/119 ...

  4. vue生命周期 钩子函数

    首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...

  5. vue 生命周期钩子函数

    实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...

  6. vue 生命周期钩子 过滤器 计算属性

    每一个Vue实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测.编译模板.挂载实例到DOM,然后在数据变化时更新DOM,在这个过程中,实例也会调用一些生命周期钩子,这就给我们提供了 ...

  7. Vue生命周期钩子---3

    vue生命周期流程图:4张图 : 生命周期的解析和应用: Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue ...

  8. Vue生命周期钩子---2

    vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...

  9. 关于 vue 生命周期 钩子函数 事件

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

随机推荐

  1. BZOJ3507 [Cqoi2014]通配符匹配 【哈希 + 贪心】

    题目 几乎所有操作系统的命令行界面(CLI)中都支持文件名的通配符匹配以方便用户.最常见的通配符有两个,一个 是星号(""'),可以匹配0个及以上的任意字符:另一个是问号(&quo ...

  2. CentOS7 Failed to start iptables.解决方法

    Shit, CentOS怎么这么多bug.... 公司机房周日突然掉电,之前的Openstack环境就不能用了. 重新Run了一遍安装脚本,发现这个错误: iptables 咋又起不来了呢..... ...

  3. 关于python数据类型的一些举例

    if True: name2=1 print(name2) 输出:1 if False: name1=1 print(name1) 报错: NameError: name 'name1' is not ...

  4. JS中使用EL表达式方法与获取工程名字

    关键: 在js中使用el表达式一定要使用双引号      分两种情况 1. JS代码在JSP页面中, 这可以直接使用EL表达式. 如: <script type="text/javas ...

  5. WebRTC 介绍 (转)

    google开源了WebRTC项目,网址是:http://code.google.com/p/webrtc/. WebRTC实现了基于网页的视频会议,标准是WHATWG 协议,目的是通过浏览器提供简单 ...

  6. 网易2016 实习研发工程师 [编程题]寻找第K大 and leetcode 215. Kth Largest Element in an Array

    传送门 有一个整数数组,请你根据快速排序的思路,找出数组中第K大的数. 给定一个整数数组a,同时给定它的大小n和要找的K(K在1到n之间),请返回第K大的数,保证答案存在. 测试样例: [1,3,5, ...

  7. linux内核栈与用户栈【转】

    转自:http://19880512.blog.51cto.com/936364/274610 最近linux内核的中断部分,总是被书里的栈弄晕,一会儿内核栈,一会儿用户栈的……很是崩溃,在网上goo ...

  8. Yii框架Yiiapp()的理解

    Yii::app() 是一个实例化的对象,是我们在当前框架里边可以直接操作的对象,        我们可以把这个对象理解成请求应用的第一个对象. Yii框架是纯OOP面向对象框架,也就是利用对象调用类 ...

  9. Revolving Digits

    题面 [题目描述]: 有一天,Silence对可以旋转的正整数十分感兴趣.在旋转操作中,他可以把后面的数字按照原位置不动地搬到剩下位置的前面.当然,他也可以完全不动这串数字.比如,他可以把123变为1 ...

  10. PyTorch学习笔记之n-gram模型实现

    import torch import torch.nn as nn from torch.autograd import Variable import torch.nn.functional as ...