[vue]初探生命周期
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]初探生命周期的更多相关文章
- 8.vue的生命周期
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- 如何解释vue的生命周期才能令面试官满意?
当面试官问:"谈谈你对vue的生命周期的理解",听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate.created.beforeMount.mounte ...
- vue之生命周期
vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...
- vue的生命周期的理解
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- vue笔记-生命周期
生命周期钩子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- vue 关于生命周期
序言: 1. vue 单组件的生命周期: 2. vue 父子组件的生命周期: 3. axios 异步请求 与 vue 的组件周期: 一.vue 每个组件的生命周期 关于每个组件的生命周期,官方文档里也 ...
- Vue:生命周期
一.什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreat ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- 深入理解Vue的生命周期
谈到Vue的生命周期,相信许多人并不陌生.但大部分人和我一样,只是听过而已,具体用在哪,怎么用,却不知道.我在学习vue一个多礼拜后,感觉现在还停留在初级阶段,对于mounted这个挂载还不是很清楚. ...
随机推荐
- 领扣(LeetCode)翻转二叉树 个人题解
翻转一棵二叉树. 示例: 输入: 4 / \ 2 7 / \ / \ 1 3 6 9 输出: 4 / \ 7 2 / \ / \ 9 6 3 1 备注:这个问题是受到 Max Howell的 原问题 ...
- TreeMap的源码学习
TreeMap的源码学习 一).TreeMap的特点 根据key值进行排序. 二).按key值排序的两种排序算法实现 1).在构造方法中传入比较器 public TreeMap(Comparator& ...
- Google Chrome浏览器的编码格式的修改步骤
Chrome Charset插件 大二萌新正在学JavaEE,当学到TomCat时,用到浏览器,但是呢,出现了中文乱码的情况,而又用的是Google,可烦恼了,由于Google Chrome的更新, ...
- Laravel 菜鸟的晋级之路
第一阶段:简单的增删改查 这是最开始接触Laravel的一个阶段.如果有PHP经验,那么应该能很快找到MVC的路径,然后驾轻就熟的开始写起来.虽然还显得有些笨拙,不过很快就能做出一些内容了.如果没有P ...
- Handler+Looper+MessageQueue深入详解
概述:Android中的异步处理机制由四部分组成:Handler+Looper+MessageQueue+message,用于实现线程间的通信. 用到的概念: Handler: 主要作用是发送消息和处 ...
- /etc/security/limits.conf 详解与配置
目录 一. /etc/security/limits.conf 详解 /etc/security/limits.conf 配置解析 /etc/security/limits.d/ 目录 二. ulim ...
- CTF比赛时准备的一些shell命令
防御策略: sudo service apache2 start :set fileformat=unix1.写脚本关闭大部分服务,除了ssh 2.改root密码,禁用除了root之外的所 ...
- vue 中使用 watch 的各种问题
报错: Method "watch" has type "object" in the component definition. Did you refere ...
- 痞子衡嵌入式:恩智浦i.MX RTxxx系列MCU启动那些事(3)- Serial ISP模式(blhost)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的Serial ISP模式. 在上一篇文章 Boot配置(ISP Pin, OTP) 里痞子衡为大家 ...
- 负载均衡集群介绍、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 ...