1、vue的生命周期是什么
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom->渲染、更新->渲染、卸载等一系列过程,称之为Vue的生命周期
2、Vue的生命周期的八个生命周期有哪些
-
beforeCreat() 创建前 在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在此生命周期执行的时候,data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
-
created()被创建 data 和 methods都已经被初始化好了,可以调用了
-
beforeMount() 挂载前 在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的
-
mounted()已挂载 Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行
-
beforeupdate()更新前 页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步
-
updated()更新 页面显示的数据和data中的数据已经保持同步了,都是最新的
-
beforeDestroy() 销毁前 Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁
-
destroyed()被销毁 这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。
-
keep-alive是一个独有的生命周期,它分别为activated和deactivated。用keep-alive包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行deactivated钩子函数,命中缓存后会执行activated钩子函数。
3、created和mounted的区别有哪些
- created:在模板渲染成html前调用,通常初始化某些属性值,然后在渲染成视图
- mounted:在模板渲染成html后调用,通常是初始化页面完成后,在对html的dom节点进行一些需要的操作
4、一般那个生命周期请求异步数据
我们可以在钩子函数created、beforeMount、mounted中进行调用,因为在这三个钩子函数中,data已经创建,可以将服务端返回的数据进行赋值
推荐使用created钩子函数调用异步请求因为:
- 能更快获取到服务端数据,减少页面加载时间,用户体验更好
- SSR不支持beforeMount、mounted钩子函数、放在created中有助于一致性