生命周期就是 vue 从开始创建到销毁的过程,分为四大步(创建,挂载, 更新,销毁),每一步又分为两小步,如 beforeCreate,created。beforeCreate 前,也就是 new Vue 的时候会初始化事件和生命周期;beforeCreate 和 created 之间会挂载 Data,绑定事件;接下来会根据 el 挂载页面元素,如 果没有设置 el 则生命周期结束,直到手动挂载;el 挂载结束后,根据 templete/outerHTML(el)渲染页面;在 beforeMount 前虚拟 DOM 已经创建完 成;之后在 mounted 前,将 vm.$el 替换掉页面元素 el;mounted 将虚拟 dom 挂载到真实页面(此时页面已经全部渲染完成);之后发生数据变化时 触发 beforeUpdate 和 updated 进行一些操作;最后主动调用销毁函数或者 组件自动销毁时 beforeDestroy,手动撤销监听事件,计时器等;destroyed 时仅存在 Dom 节点,其他所有东西已自动销毁。这就是我所理解的 vue 的一个完整的生命周期。生命周期就是 vue 从开始创建到销毁的过程,分为四大步(创建,挂载, 更新,销毁),每一步又分为两小步,如 beforeCreate,created。beforeCreate 前,也就是 new Vue 的时候会初始化事件和生命周期;beforeCreate 和 created 之间会挂载 Data,绑定事件;接下来会根据 el 挂载页面元素,如 果没有设置 el 则生命周期结束,直到手动挂载;el 挂载结束后,根据 templete/outerHTML(el)渲染页面;在 beforeMount 前虚拟 DOM 已经创建完 成;之后在 mounted 前,将 vm.$el 替换掉页面元素 el;mounted 将虚拟 dom 挂载到真实页面(此时页面已经全部渲染完成);之后发生数据变化时 触发 beforeUpdate 和 updated 进行一些操作;最后主动调用销毁函数或者 组件自动销毁时 beforeDestroy,手动撤销监听事件,计时器等;destroyed 时仅存在 Dom 节点,其他所有东西已自动销毁。这就是我所理解的 vue 的一个完整的生命周期。

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这个挂载还不是很清楚. ...

  10. vue笔记 - 生命周期第二次学习与理解

    对于刚接触vue一两个月.才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期, 直到前两天去面试,面试官让我说一下vue的生命周期... 其实我的心中是有那张图的,但是 ...

随机推荐

  1. 卸载K8s集群及k8s命令自动补全

    一.配置命令自动补全 yum install -y bash-completion source /usr/share/bash-completion/bash_completion source & ...

  2. composer 换源

    #首先把默认的源给禁用掉 composer config -g secure-http false #再修改镜像源 这里我使用阿里的源 composer config -g repo.packagis ...

  3. 堆QAQ

    L2-012 关于堆的判断 将一系列给定数字顺序插入一个初始为空的小顶堆H[].随后判断一系列相关命题是否为真.命题分下列几种: x is the root:x是根结点: x and y are si ...

  4. CI2454国产8位RISC核SoC芯片

    Ci2454是一款集成无线收发器和8位RISC(精简指令集)MCU的SOC芯片.主要应用在遥控玩具.智能灯控.数据透传.工业控制等领域.无线收发器主要特性 工作在 2.4GHz ISM 频段. 调制方 ...

  5. linux下启动rabbitmq,redis,nginx

    这只是其中一种启动方法,也是我自己安装好后试过多次可以用的, 1,启动rabbitmq rabbitmqctl start_app rabbitmq程序端口是5672,可视化界面入口端口是15672, ...

  6. Spring Boot--自定义异常类

    1.业务异常 /** * @Description: 业务异常 * @Author: Yaoson * @Create: 2022/4/21 0:05 **/ public class Busines ...

  7. 常见Linux命令二

    常见Linux命令二 一:shutdown命令--用来系统关机命令. 语法:shutdown(选择)(参数) 常见选项:-r:shutdown之后重启 -h:将系统关机 二:reboot命令-- 重新 ...

  8. vue3 门户网站搭建1-路由

    从 0 到 1搭建门户网站,记录一下. 因为需求不大,所以比较简单,门户和后台管理直接一个项目出来,路由配置则想的是: 1.门户,用  /portal 标识 2.后台管理,用 /admin 标识 3. ...

  9. RealSenseD435的一些参数整理

    一.深度相机D435 二.自校准功能 https://www.intelrealsense.com/self-calibration-for-depth-cameras/ https://dev.in ...

  10. jmeter分布式压测配置

    首选 压力机A,压力机B,压力机C,   压力机A作为控制台    压力机B,压力机C作为分布式的测试机 压力机Aip:172.16.23.69, 压力机Bip:192.168.184.128 压力机 ...