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. asp.net以流导出Excel

    废话不多说,直接上代码 这是点击导出的事件函数,因为我是从前端获取的Table的json数据,所以需要转换一下,大家直接用查询出来的DataTable即可 protected void bt_expo ...

  2. Hadoop2.8.2 运行wordcount

    1 例子jar位置 [hadoop@hadoop02 mapreduce]$ pwd /hadoop/hadoop-2.8.2/share/hadoop/mapreduce [hadoop@hadoo ...

  3. dbstructsync 多套mysql环境表、字段、索引的差异sql产出(原创)

    最近写了一个工具(比较两套测试环境数据库表.表字段.索引的差异) 功能:可以比较两套环境中mysql指定库中表.表字段及索引的差异,返回具体需要同步的执行sql A环境的数据库db 作为sourced ...

  4. windows 10安装和配置caffe教程 | Install and Configure Caffe on windows 10

    本文首发于个人博客https://kezunlin.me/post/1739694c/,欢迎阅读! Install and Configure Caffe on windows 10 Part 1: ...

  5. Alibaba Nacos 学习(一):Nacos介绍与安装

    Alibaba Nacos 学习(一):Nacos介绍与安装 Alibaba Nacos 学习(二):Spring Cloud Nacos Config Alibaba Nacos 学习(三):Spr ...

  6. Head First设计模式——适配器和外观模式

    前言:为什么要一次讲解这两个模式,说点骚话:因为比较简单(*^_^*),其实是他们两个有相似和有时候我们容易搞混概念. 讲到这两个设计模式与另外一个“装饰者模式”也有相似,他们三个按照结构模式分类都属 ...

  7. day 26 约束、自定义异常、加密hashlib、logging

    一.约束 建议使用: class BaseMessage(object): def send(self): """ 必须继承BaseMessage,然后其中必须编写sen ...

  8. 解决配置vim中文乱码的问题

    解决linux下vim乱码的情况:(修改vimrc的内容) 全局的情况下:即所有用户都能用这个配置 文件地址:/etc/vimrc 在文件中添加: set fileencodings=utf-8,uc ...

  9. mysql数据库终端上的增删改查及权限等相关操作

    ctrl + c 终止 [linux] service mysql start 启动mysql service mysql stop 停止mysql service mysql restart 重启m ...

  10. Java集合框架 10 连问,你有被问过吗?

    首先要说一下,本文对这些Java集合框架的面试题只做了一个总结式的回答,对每一道题目,都值得深入去了解一下(什么是扎实基本功,这些就是基本功~~),后续可能对每一道题目拆开独立篇章来深入讲解一下. 大 ...