生命周期钩子

生命周期钩子=生命周期函数=生命周期事件

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

实例创建期间的生命周期函数

beforeCreate：实例刚刚在内存中创建，还没有初始化好实例中的data与methods

Created：实例已经创建完成，data与methods已经创建完成，但是还没有编译模板

beforeMount：此时完成了模板的编译，但是模板在内存中，还没有挂载到页面中

mounted：此时已经将编译好的模板挂载到页面中

实例运行期间的生命周期函数

beforeUpdate：实例中的数据每更新一次便执行一次此函数，此时data中的数据是最新的，但是还没有渲染到页面中，所以页面数据是旧的

updated：实例中的数据每更新一次便执行一次此函数，此时data和页面中的数据都是最新的，页面已经渲染完毕

实例销毁期间的生命周期函数

beforeDestroy：实例销毁之前调用，此时实例仍然可用

destroyed：vue实例销毁之后调用，此时实例指示的所有东西会被解绑，事件监听也会移除，子实例也会被销毁

生命周期图示

vue.js（15）--vue的生命周期的更多相关文章

  1. Vue.js的指令、生命周期钩子与数据选项

    vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.常用指令 v-if ... v-else: 作用:控制元素是 ...

  2. Vue.js（4）- 生命周期

    当new的时候,就创建了一个vue实例,这个实例就是vue框架的入口,也是VM层 <!DOCTYPE html> <html lang="en"> < ...

  3. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  4. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

  5. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  6. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  7. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  8. Vue基础进阶 之 实例方法--生命周期

    在上一篇博客中我们知道生命周期的方法: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听: vm.$nextTick:将方法中的 ...

  9. Vue入门系列（五）Vue实例详解与生命周期

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  10. Vue实例详解与生命周期

    http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己 ...

随机推荐

  1. Math.min() Math.max() Math.min().apply() Math.max() .apply()该如何使用？？？

    Math.min()和 Math.max()  语法: Math.min(x,y) Math.max(x,y) 虽然能取到最小值和最大值,但是不支持数组. 那么如何计算数组中的大小值呢???????? ...

  2. 洛谷P1310 表达式的值——题解

    题目传送 题的难点:1.有运算优先级,不好判断.2.有破坏整体和谐性的讨厌的括号.3.不知道哪里要填数.4.要求方案数很大,搜索不会做呐. 发现难点1和2都是中缀表达式的缺点.转成后缀表达式后难点1. ...

  3. Sonys TRC save data plolicy

    帖子地址:https://forums.unrealengine.com/showthread.php?130820-Sonys-TRC-save-data-plolicy we had severa ...

  4. 【转】vux （scroller）上拉刷新、下拉加载更多

    1)比较关键的地方是要在 scroller 组件上里加一个 ref 属性 <scroller :lockX="true" height="-170" :p ...

  5. 大数据笔记（十八）——Pig的自定义函数

    Pig的自定义函数有三种: 1.自定义过滤函数:相当于where条件 2.自定义运算函数: 3.自定义加载函数:使用load语句加载数据,生成一个bag 默认:一行解析成一个Tuple 需要MR的ja ...

  6. 大数据笔记（十）——Shuffle与MapReduce编程案例（A）

    一.什么是Shuffle yarn-site.xml文件配置的时候有这个参数:yarn.nodemanage.aux-services:mapreduce_shuffle 因为mapreduce程序运 ...

  7. 测试markdorn

    专业主义 描述:这本书着重阐释了真正的专家必须具备的四种能力:**先见能力**.构思能力.讨论的能力.适应矛盾的能力,以丰富的案例和深刻的洞见警示人们重新思考专业的内涵与效用,培养并吸纳专业人才. 状 ...

  8. Linux中相关知识（atexit()，fork(),粘滞位）

    1.atexit()函数 函数名: atexit 头文件:#include<stdlib.h> 功 能: 注册终止函数(即main执行结束后调用的函数) 用 法: int atexit(v ...

  9. Phaser 源码分析

    Phaser 一个可重用的同步屏障,功能上与 CyclicBarrier 和 CountDownLatch 类似,但是支持更灵活的使用. 把多个线程协作执行的任务划分为多个阶段,编程时需要明确各个阶段 ...

  10. 编程字体Source Code Pro 免费下载

    对于程序员来说,好的字体应该满足的基本条件: 字母和数字易于分辨,如: 英文字母o 和 阿拉伯数字 0 ,或者 英文字母 l 和 阿拉伯数字 1 ,两个单引号 '' 和双引号 ”. 字体等宽,保持对齐 ...