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 从开始创建到销毁的过程,分为四大步(创建,挂载, 更新,销毁),每一步又分为两小步,如 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 的生命周期的更多相关文章
- 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这个挂载还不是很清楚. ...
- vue笔记 - 生命周期第二次学习与理解
对于刚接触vue一两个月.才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期, 直到前两天去面试,面试官让我说一下vue的生命周期... 其实我的心中是有那张图的,但是 ...
随机推荐
- 在SublimeText3中想使用快捷键调出插件ColorPicker不起作用办法解决
在SublimeText3中快速打开插件ColorPicker的快捷健是Ctrl+Shift+C,但是我试了却不管用,后来发现是跟插件ConvertToUTF8插件中的快捷键冲突导致,知道原因就好办了 ...
- C# 变量和表达式
变量的命名: 第一个字符必须是字母.下划线或@: 其后的字符可以是字母.下划线或数字. 注意:区分大小写. 变量的类型: 数值类型 1.整数类型 byte.short.int.long sbyte.u ...
- HJ77 火车进站
描述 给定一个正整数N代表火车数量,0<N<10,接下来输入火车入站的序列,一共N辆火车,每辆火车以数字1-9编号,火车站只有一个方向进出,同时停靠在火车站的列车中,只有后进站的出站了,先 ...
- element table组件列表固定列后横向滚动条的问题
使用el-table的fixed属性固定表格列的时候滚动条被固定列覆盖部分无法拖动 可以使用下面配置来解决 .el-table__fixed { height: auto !important; // ...
- mysql中的InnoDB和MyISAM
InnoDB:支持事务,支持表级锁,行级锁,支持外键,是非聚集索引. MyISAM:不支持事务,支持表级锁,不支持外键,聚集索引. 聚集索引和非聚集索引的区别:InnoDB是聚集索引,使用B+Tree ...
- 亲测:一个完整Vue开发环境搭建。
参考博客飞机: https://www.cnblogs.com/zhaomeizi/p/8483597.html
- XenForo论坛安装
1.下载安装程序,程序可以到qq群里面找,或者是联系我 2.域名+/install安装 3.汉化后台,访问https://www.cnxfans.com/resources/xenforo-2-x.1 ...
- ChainofResponsibility Pattern
责任链模式: 参考:https://www.runoob.com/design-pattern/chain-of-responsibility-pattern.html 避免请求发送者与接收者耦合在一 ...
- stl仿函数集合
- uni-app 声音/震动提示,播放系统默认消息声音 安卓(Android)测试通过
可以跟据自己需求使用,有不足的地方希望大家帮忙补充 参数 type Options vibrate:震动 othre:铃声 1 msg_remind(type) 2 { 3 if(type=='vib ...