面试题系列--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的生命周期的主要内容,如果未能解决你的问题,请参考以下文章