面试题系列--vue的生命周期

Posted 程序媛...

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了面试题系列--vue的生命周期相关的知识,希望对你有一定的参考价值。

vue的生命周期

vue实例从创建到销毁的过程就是vue的生命周期

一共有八个生命周期

1.beforeCreate

1.创建之前:什么都是undefined

2.实例初始化之后,this指向创建的实例,不能访问到data、computed、watch、methods上的方法和数据

2.created

1.创建完成:vue对象创建完成,但是挂载点还没找

2.实例创建完成,可访问data、computed、watch、methods上的方法和数据,未挂载到DOM,不能访问到$el属性,$ref属性内容为空数组

3.常用于简单的ajax请求,页面的初始化

3.beforeMount

1.如果有el,就会触发挂载期;如果没有,挂载期就不执行
挂载之前:找到了要挂载的标签(el),但是指令、{{}}还没有解析

2.在挂载开始之前被调用,beforeMount之前,会找到对应的template,并编译成render函数

3.如果Vue没有template选项,那么就解析的是el对应的节点
如果Vue有tempalte选项,那么解析的就是template,把template替换el

4.mounted

1.挂载完成:指令、{{}}解析完成,DOM节点加载完成
2.操作DOM、打开计时器、一进到页面做数据交互、给document、window加事件

3.实例挂载到DOM上,此时可以通过DOM API获取到DOM节点,$ref属性可以访问

5.brforeUpdate

数据变了,页面重新更新之前和更新之后取到的都是新值
页面重新更新之前

6.updated

页面重新更新完成

7.beforeDestory

vm.$destroy() 触发,会引起销毁--
销毁之前-善后工作 :清除计时器、清除document、window上的事件。

8.destoryed

销毁完成

vue第一次页面加载会触发哪几个钩子函数?

beforeCreate、created、beforeMount、mounted

DOM 渲染在哪个周期中就已经完成?

mounted

以上是关于面试题系列--vue的生命周期的主要内容,如果未能解决你的问题,请参考以下文章

vue常见面试题

前端面试题总结

vue面试题大全

Java面试题-前端Vue

Java面试题-前端Vue

Java面试题-前端Vue