[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这个挂载还不是很清楚. ...
随机推荐
- Spring Boot2 系列教程(二十四)Spring Boot 整合 Jpa
Spring Boot 中的数据持久化方案前面给大伙介绍了两种了,一个是 JdbcTemplate,还有一个 MyBatis,JdbcTemplate 配置简单,使用也简单,但是功能也非常有限,MyB ...
- mysql中int、bigint、smallint、tinyint 长度
mysql中int.bigint.smallint.tinyint 长度 bigint -2^63 (-9223372036854775808) 到 2^63-1 (92233720368547758 ...
- nyoj 349 (poj 1094) (拓扑排序)
Sorting It All Out 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 An ascending sorted sequence of distinct ...
- hdu 1068 Girls and Boys (最大独立集)
Girls and BoysTime Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- ZeroC ICE的远程调用框架 ServantLocator与Locator
ServantLocator定位的目标是Servant,而Locator定位的目标是“Ice Object”,即一个可定位的“Ice Object”代理.Servant是::Ice::Object的继 ...
- Excel的常用函数
1.查找重复内容=IF(COUNTIF(A:A,A2)>1,"重复","") 2.重复内容首次出现时不提示=IF(COUNTIF(A$2:A2,A2)&g ...
- PowerMock学习(六)之Mock Final的使用
Mock Final mockfinal相对来说就比较简单了,使用powermock来测试使用final修饰的method或class,比较简单,接口调用部分,还是service调用dao. 对于接口 ...
- 【Elasticsearch 7 探索之路】(四)Analyzer 分析
上一篇,什么是倒排索引以及原理是什么.本篇讲解 Analyzer,了解 Analyzer 是什么 ,分词器是什么,以及 Elasticsearch 内置的分词器,最后再讲解中文分词是怎么做的. 一.A ...
- Elasticsearch系列---全面了解Document
概要 本篇主要介绍一下document的知识,对document的元数据和基本的语法进行讲解. document核心元数据 前面入门实战一节有简单介绍过document数据示例,这次我们来详细了解一下 ...
- ES6扩展运算符...
对象的扩展运算符理解对象的扩展运算符其实很简单,只要记住一句话就可以: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 let bar = { a: 1, b: 2 ...