那么vue 生命周期有哪些阶段呢

一、创建

1、beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el)
使用场景:因为此时data和methods都拿不到,所以通常在实例以外使用
2、created:实例已经创建,仍然不能获取DOM节点(有data,没有el)
使用场景:模板渲染成html前调用,此时可以获取data和methods,so 可以初始化某些属性值,然后再渲染成视图,异步操作可以放在这里

二、载入

1、beforeMount:是个过渡阶段,此时依然获取不到具体的DOM节点,但是vue挂载的根节点已经创建(有data,有el)
2、mounted:数据和DOM都已经被渲染出来了
使用场景:模板渲染成html后调用,通常是初始化页面完成后再对数据和DOM做一些操作,需要操作DOM的方法可以放在这里

三、更新

1、beforeUpdate:检测到数据更新时,但在DOM更新前执行
2、updated:更新结束后执行
使用场景:需要对数据更新做统一处理的;如果需要区分不同的数据更新操作可以使用$nextTick

四、销毁

1、beforeDestroy:当要销毁vue实例时,在销毁前执行
2、destroyed:销毁vue实例时执行

第一次页面加载会触发哪些钩子

beforeCreate、created、beforeMount、mounted

本面试题为前端常考面试题,后续有机会继续完善。我是歌谣,一个沉迷于故事的讲述者。

欢迎一起私信交流。

“睡服“面试官系列之各系列目录汇总(建议学习收藏)

“约见”面试官系列之常见面试题之第八十九篇之vue生命周期作用(建议收藏)相关推荐

  1. “约见”面试官系列之常见面试题之第八十五篇之css响应式(建议收藏)

    响应式布局 一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验. 媒体类型 在何种设备或者软件上将页面打开 1 2 3 4 5 6 7 8 9 all:所有媒体 braille:盲文触觉设备 ...

  2. “约见”面试官系列之常见面试题之第八十四篇之手写promise(建议收藏)

    class Promise{constructor(excutor){this.value = '';this.reason = '';this.status = 'padding'this.onFu ...

  3. “约见”面试官系列之常见面试题之第七十九篇之ES5和ES6(建议收藏)

    什么是JavaScript JavaScript一种动态类型.弱类型.基于原型的客户端脚本语言,用来给HTML网页增加动态功能.(好吧,概念什么最讨厌了) 动态: 在运行时确定数据类型.变量使用之前不 ...

  4. “约见”面试官系列之常见面试题之第五十四篇之语义化标签(建议收藏)

    目录 什么是语义元素? 为什么要语义化? HTML5常用的语义元素 很多面试官会问:谈谈你对 HTML5语义化标签的理解.那么本篇博客专门解答一下这个问题. 什么是语义元素? 语义是指对一个词或者句子 ...

  5. “约见”面试官系列之常见面试题之第八十六篇之nexttick(建议收藏)

    一.用途 应用场景:需要在视图更新之后,基于新的视图进行操作. this.$nextTick()方法主要是用在数据改变,dom改变应用场景中.vue中数据和dom渲染由于是异步的,所以,要让dom结构 ...

  6. “约见”面试官系列之常见面试题之第八十二篇之MVC(建议收藏)

    MVC设计模式 MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller) ...

  7. “约见”面试官系列之常见面试题之第七十五篇之vue中如何使当前css起作用(建议收藏)

    方法很简单,在组件中的style前面加上scoped就可以了,示例: 本面试题为前端常考面试题,后续有机会继续完善.我是歌谣,一个沉迷于故事的讲述者. 欢迎一起私信交流. "睡服" ...

  8. “约见”面试官系列之常见面试题之第六十九篇之document.ready和onload的区别(建议收藏)

    document.ready和onload的区别为:加载程度bai不同du.执行次数不同.执行速度zhi不同. 一.加载程度不同 1.document.ready:在DOM加载完成dao后就可以可以对 ...

  9. “约见”面试官系列之常见面试题之第五十九篇之js中push(),pop(),unshift(),shift()的用法小结 (建议收藏)

    1.push().pop()和unshift().shift() 这两组同为对数组的操作,并且会改变数组的本身的长度及内容. 不同的是 push().pop() 是从数组的尾部进行增减,unshift ...

最新文章

  1. idea JDK安装与配置
  2. PHP7 学习笔记(十一)使用phpstudy快速配置一个虚拟主机
  3. link的属性media的用处
  4. 通俗易懂的来理解Iaas,Paas,SaaS
  5. idea 利用vue.js插件创建vue初始化项目
  6. linux raw格式改名img,4款Linux下的RAW格式图片编辑软件
  7. 问题-[WIN8.132位系统]安装Win8.1 遇到无法升级.NET Framework 3.5.1
  8. java se开发_JAVA_SE基础——3.Java程序的开发流程
  9. sklearn_收入模型
  10. 【对讲机的那点事】维修对讲机你会拆卸电路板上的集成电路块吗?
  11. Leo2DNT(雷傲论坛转DiscuzNT)1.0转换程序发布
  12. [技巧] 论文自动更新参考文献序号
  13. vue+element pagination分页的二次封装,带首页末页功能
  14. 记录:mysql 字符串拼接函数
  15. 安装ubuntu教程
  16. MarkDown学习备忘录
  17. mpeg1,mpeg2,mpeg4
  18. 描述linux shell中单引号,linux shell中单引号、双引号、反引号、反斜杠的区别
  19. CVTE嵌入式应用开发长期实习生线上笔试+线上面试(一面)
  20. [配置] 修改路由器的名称

热门文章

  1. 模拟航班查询及预定系统 编写示例
  2. 前端 == Ajax
  3. 通过JDBK操作数据库
  4. Sublime Text添加插入带当前时间说明
  5. 关于myeclipse打开jsp巨慢解决方案
  6. 本地修改指向服务器,本地修改指向服务器
  7. java参数传入的是一个类名_Java编程细节——泛型的定义(类、接口、对象)、使用、继承...
  8. Linux 字符设备驱动结构(四)—— file_operations 结构体知识解析
  9. Java中array、List、Set互相转换
  10. [JS] Invalid Date