vue实例从创建到销毁的过程我们成为vue的声明周期。vue声明周期大致可以分为4个阶段8大生命周期函数,分别为:

创建前后:beforeCreate created

挂载前后:beforeMount mounted

更新前后:beforeUpdate updated

销毁前后:beforeDestory destoryed

一、beforeCreate阶段: vue实例还未创建,数据观测和事件初始化还未开始

二、created阶段: vue实例已创建,实例配置的options:datat methods watch computed等初始化配置完成,但此阶段渲染的节点还未挂载到DOM上去,所以不能访问el属性。在此阶段可以完成数据初始化、对初始化数据绑定事件的相关操作、以及发送ajax请求等

三、beforeMount阶段:在这个阶段已经编译好模板,并将data里面的数据和模板生成html,但此时还未挂载html到页面上

四、mounted阶段: 完成将模板中的html渲染到页面,在此阶段可以操作DOM元素,获取渲染元素对应的dom节点

五、beforeUpdate阶段: 在监听到数据变化之后触发,此阶段虽然已经拿到最新的数据,但还未渲染到视图上去

六、Updated阶段: 执行时已经将更新后的数据渲染到页面,在页面中可以看到最新的数据

七、beforeDestory阶段: 在实例销毁前调用,这一阶段vue实例及其配置项都还是可用状态,在这阶段可以做最后的移除定时器和事件绑定操作

八、destoryed阶段: 该阶段vue实例已完全销毁,vue所指示的所有东西都会解除绑定,事件监听器被移除,所有vue实例也会被销毁

另外还有 keep-alive 独有的生命周期,分别为 activateddeactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数,命中缓存渲染后会执行 activated 钩子函数。

errorCapured: 当捕获一个来自子孙组件的错误时调用 【三个参数 : 错误对象 发生错误的组件实例 以及包含错误信息来源的字符串 】 返回fals以组织错误继续向上传播

Vue的生命周期及使用场景相关推荐

  1. “约见”面试官系列之常见面试题之第九十一篇之简述Vue的生命周期适用于哪些场景(建议收藏)

    答:beforeCreate:在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建.在beforeCreate生命周期执行的时候,data和methods中的数据都还没 ...

  2. 11、Vue的生命周期

    首先,我们了解一下"生命周期"这个词.通俗的来说,生命周期就是一个事务从出生到消失的过程.例如,一个人从出生到去世.在vue中,vue的生命周期是指,从创建vue对象到销毁vue对 ...

  3. Vue.js 生命周期

    2019独角兽企业重金招聘Python工程师标准>>> 每个 Vue 实例在被创建之前都要经过一系列的初始化过程 vue在生命周期中有这些状态, beforeCreate,creat ...

  4. vue避免重新渲染_小白也能懂的VUE的生命周期探寻

    Vue生命周期作为vue的核心之一,生命周期不管是文档还是面试都是高频知识点今天我们从什么是生命周期,生命周期的内容,如何利用生命周期出发,做一些探究生命周期的理解 官方:Vue 实例从创建到销毁的过 ...

  5. js字符串替换_浅析Vue的生命周期以及JS异步

    前言 Vue的生命周期和JS异步都是有很多文章的知识点,我之前也是一知半解,基本够用. 但是直到我在开发的时候真的遇到了问题,才发现如果不把这些知识点融汇到一起,很难解决实际问题. 我甚至觉得这是我离 ...

  6. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子 知乎上近日有人发起了一个 "react 是不是比 vue 牛皮,为什么?" 的问题,Vue.js 作者尤雨溪12月4日正面回应了该 ...

  7. vue 生命周期_深入理解Vue实例生命周期

    ‍vue实例生命周期与生命周期钩子‍ 每个 Vue 实 例在被创建时都会经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 为了让开发者在 ...

  8. [vue] 请描述下vue的生命周期是什么?

    [vue] 请描述下vue的生命周期是什么? 生命周期就是vue从开始创建到销毁的过程,分为四大步(创建,挂载,更新,销毁),每一步又分为两小步,如beforeCreate,created.befor ...

  9. Vue第一部分(6):Vue的生命周期

    每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板.销毁等.Vue为生命周期中的每个状态都设置了钩子函数(监听函数).当Vue实例处于不同的生命周期时,对应的函数就 ...

最新文章

  1. Python网络爬虫--urllib
  2. B/S软件超越C/S软件的优势在哪里?
  3. 设计ADuC845低噪声信号采集版
  4. 非root用户编译安装源码包
  5. PHP7 serialize_precision 配置不当导致 json_encode() 浮点小数溢出错误
  6. 开发者新春回血大礼包助你2021畅行无压力!
  7. android发送网络请求没反应,Android无法使用HttpURLConnection发送GET请求
  8. PHP 递归删除目录中文件
  9. ArcGIS Flex API 中的 Flex 技术(一)--事件
  10. 简单安装ELK分析日志及使用心得
  11. Mysql 5.7 错误号码1862 Your password has expired. To log in you must change it using a client...
  12. 偏振模色散及保偏光纤的正确理解
  13. 【Java】_2_Java程序入门第五课
  14. CoreAnimation-CATransaction
  15. opengl 矩阵投影代码 shade_LookAt、Viewport、Perspective矩阵
  16. Oracle Library cache 内部机制 说明
  17. edui 富文本编辑_百度umeditor富文本编辑器插件扩展
  18. Java UDP编程
  19. mysql select 列名_Mysql查询出所有列名
  20. 计算机网络ip地址在哪里设置,网络ip地址设置多少_电脑ip地址一般设置多少-win7之家...

热门文章

  1. 开发手机rpg类型游戏用素材合集,人物行走图片
  2. 第八届蓝桥杯大赛省赛真题-填空题-购物单(Java实现)
  3. 使用PHP免费发送定时短信
  4. 爬取2020东京奥运会的所有赛事的情况,并分类输出,使用Python实现
  5. Mac OS X的火狐上安装Burp's CA Certificate
  6. vimplus快捷键大全
  7. Vue进阶(七十八):Vue 定时器与 JS 定时器
  8. 小米AI实验室六篇论文获 ICASSP 2022收录,多模态语音唤醒挑战赛夺冠
  9. 7.node.js的3DES 加密和解密的方法封装
  10. cudaMemcpy() 犯错误