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

一.创建/销毁,缓存

1.created & beforeCreate

beforeCreate 实例未创建,调用不到data数据

created 实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载

应用:

beforeCreate,加loading事件;

created, 写一些用于初始化完成的事件;结束loading事件,ajax 异步请求获取数据

2.destroyed & beforeDestroy

beforeDestroy 实例销毁之前调用

destroyed 实例销毁之后调用

在父组件中使用v-if来控制实例的销毁和创建

应用: 主要在实例销毁之前解绑一些使用addEventListener 监听的事件等;可以做一个确认停止事件的确认框

补充说明,actived & deactive

使用内置组件 keep-alive 来缓存实例,而不是频繁创建和销毁(开销大)

actived 实例激活

deactived 实例失效

在父组件中使用keep-alive来实现实例的缓存

此时v-if不再控制实例的销毁和创建,而是配合控制缓存实例的激活和失效

应用:性能优化

初始化的时候,undefined(对应的是beforeCreate事件),'000'(对应的created事件),'激活了'(对应的是actived事件);

注意到之后再点击两次button,相继出现 '失效了' '激活了' ,此时控制的不再是销毁(destroyed)/创建(created),而是 失效(对应的是deactived事件)和激活(对应的是actived事件);

从而达到通过缓存来进行性能优化的目的

二.挂载,更新

1.mounted & beforeMount

beforeMount (实例创建完)el未挂载到实例上,获取的是vue启动前的最初DOM

mounted (实例创建完)并且el挂载到实例上后调用,获取的是vue启动后的DOM(执行一次,之后的vue数据变化触发updated)

2.updated & beforeUpdate

beforeUpdate 获取数据更新前的原DOM

updated 获取数据更新后的DOM;

挂载之后,vue的数据改变会引起页面视图的改变,此时触发的是updated事件,而不是mounted(mounted只会在挂载实例的时候调用一次)

应用:获取调试前后的DOM;对数据统一处理,可以在这里写上相应函数

mounted只在初始化挂载实例的时候调用一次,之后所有到数据变化都会调用beforeUpdate事件和updated事件(而不是mounted事件)

最后结合官网的图示,能够理出一个比较清晰的思路来

[vue]初探生命周期的更多相关文章

  1. 8.vue的生命周期

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

  2. 如何解释vue的生命周期才能令面试官满意?

    当面试官问:"谈谈你对vue的生命周期的理解",听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate.created.beforeMount.mounte ...

  3. vue之生命周期

    vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...

  4. vue的生命周期的理解

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

  5. vue笔记-生命周期

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

  6. vue 关于生命周期

    序言: 1. vue 单组件的生命周期: 2. vue 父子组件的生命周期: 3. axios 异步请求 与 vue 的组件周期: 一.vue 每个组件的生命周期 关于每个组件的生命周期,官方文档里也 ...

  7. Vue:生命周期

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

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

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

  9. 深入理解Vue的生命周期

    谈到Vue的生命周期,相信许多人并不陌生.但大部分人和我一样,只是听过而已,具体用在哪,怎么用,却不知道.我在学习vue一个多礼拜后,感觉现在还停留在初级阶段,对于mounted这个挂载还不是很清楚. ...

随机推荐

  1. 领扣(LeetCode)翻转二叉树 个人题解

    翻转一棵二叉树. 示例: 输入: 4 / \ 2 7 / \ / \ 1 3 6 9 输出: 4 / \ 7 2 / \ / \ 9 6 3 1 备注:这个问题是受到 Max Howell的 原问题  ...

  2. TreeMap的源码学习

    TreeMap的源码学习 一).TreeMap的特点 根据key值进行排序. 二).按key值排序的两种排序算法实现 1).在构造方法中传入比较器 public TreeMap(Comparator& ...

  3. Google Chrome浏览器的编码格式的修改步骤

    Chrome  Charset插件 大二萌新正在学JavaEE,当学到TomCat时,用到浏览器,但是呢,出现了中文乱码的情况,而又用的是Google,可烦恼了,由于Google Chrome的更新, ...

  4. Laravel 菜鸟的晋级之路

    第一阶段:简单的增删改查 这是最开始接触Laravel的一个阶段.如果有PHP经验,那么应该能很快找到MVC的路径,然后驾轻就熟的开始写起来.虽然还显得有些笨拙,不过很快就能做出一些内容了.如果没有P ...

  5. Handler+Looper+MessageQueue深入详解

    概述:Android中的异步处理机制由四部分组成:Handler+Looper+MessageQueue+message,用于实现线程间的通信. 用到的概念: Handler: 主要作用是发送消息和处 ...

  6. /etc/security/limits.conf 详解与配置

    目录 一. /etc/security/limits.conf 详解 /etc/security/limits.conf 配置解析 /etc/security/limits.d/ 目录 二. ulim ...

  7. CTF比赛时准备的一些shell命令

    防御策略: sudo service apache2 start :set fileformat=unix1.写脚本关闭大部分服务,除了ssh       2.改root密码,禁用除了root之外的所 ...

  8. vue 中使用 watch 的各种问题

    报错: Method "watch" has type "object" in the component definition. Did you refere ...

  9. 痞子衡嵌入式:恩智浦i.MX RTxxx系列MCU启动那些事(3)- Serial ISP模式(blhost)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的Serial ISP模式. 在上一篇文章 Boot配置(ISP Pin, OTP) 里痞子衡为大家 ...

  10. 负载均衡集群介绍、LVS介绍、LVS调度算法、LVS NAT模式搭建

    7月4日任务 18.6 负载均衡集群介绍18.7 LVS介绍18.8 LVS调度算法18.9/18.10 LVS NAT模式搭建 扩展lvs 三种模式详解 http://www.it165.net/a ...