1、什么是 vue 生命周期?有什么作用?
答:每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数,这给了用户在不同阶段添加自己的代码的机会。(ps:生命周期钩子就是生命周期函数)例如,如果要通过某些插件操作DOM节点,如想在页面渲染完后弹出广告窗, 那我们最早可在mounted 中进行。
2、created和mounted的区别
created一般是在html渲染前的操作,此时el还是undefined,data已经存在。这里不能对dom进行操作。(如果想对DOM操作,就在异步中获取DOM。)
mounted一般是在html渲染完成后的操作,此时el,data都已经加载完成,一般对dom的操作都写在mounted中,例如获取innerHTML,初始化echarts的时候。
3、第一次页面加载会触发哪几个钩子?
答:beforeCreate, created, beforeMount, mounted
4、简述每个周期具体适合哪些场景
1).beforeCreate:在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法。
2).created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer)、属性和方法的运算,watch/event 事件回调;然而,挂载阶段还没开始,
e
l
属性目前不可见。
d
a
t
a
和
m
e
t
h
o
d
s
都已经被初始化好了,如果要调用
m
e
t
h
o
d
s
中的方法,或者操作
d
a
t
a
中的数据,最早可以在这个阶段中操作
3
)
.
b
e
f
o
r
e
M
o
u
n
t
:在内存中已经编译好了模板了,但是还没有挂载到页面中
4
)
.
m
o
u
n
t
e
d
:
e
l
被新创建的
v
m
.
el 属性目前不可见。data 和 methods都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作 3).beforeMount:在内存中已经编译好了模板了,但是还没有挂载到页面中 4).mounted:el 被新创建的 vm.
el属性目前不可见。data和methods都已经被初始化好了,如果要调用methods中的方法,或者操作data中的数据,最早可以在这个阶段中操作3).beforeMount:在内存中已经编译好了模板了,但是还没有挂载到页面中4).mounted:el被新创建的vm.el 替换,并挂载到实例上去之后调用该钩子。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行。
5).beforeUpdate:当执行这个钩子时,页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
6).updated:当这个钩子被调用时,组件 DOM 已经更新,所以现在可以执行依赖于 DOM 的操作,然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之(PS:计算属性与 watcher 会在后面的篇幅中进行介绍)。
7).beforeDestroy:实例销毁之前调用,在这一步,实例仍然完全可用。
8).destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
5.父到子的生命周期
挂载阶段
执行顺序为:
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
更新阶段
执行顺序为:
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
销毁阶段
执行顺序为:
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
6.加入keep-alive会执行哪些生命周期?
1)如果使用了keep-alive组件,当前的组件会额外你增加2个生命周期
activated deactivated
2)如果当前组件加入了keep-alive第一次进入这个组件会执行5个生命周期
beforeCreate -> created -> beforeMount -> mounted -> activated
3)如果当前组件加入了keep-alive,第二次或第N次进去组件,只会执行一个生命周期
activated
7.生命周期的使用场景。
created
无父子依赖关系,也不需要同步DOM
mounted
同步获取DOM
如果父组件使用了子组件,并且优先加载子组件的数据,那么父组件请求要放在mounted里。
activated
判断id是否相等,如果不等发起请求。
destroyed
关闭页面记录视频播放时间,初始化的时候从上一次的历史开始播放。
8.在created中怎么获取DOM
1)只要写异步代码,在异步中获取DOM。
例如:setTimeout、请求、Promise.xxx()
2)使用vue系统内置this.$nextTick
9.为什么发送请求不在beforeCreate里?beforeCreate和created的区别?
如果请求封装在method封装好了,beforeCreate调用的时候拿不到method里的方法(会报错)。