生命周期就是
vue实例从创建、初始化数据、编译模板、挂载DOM、数据变化时更新DOM、卸载等一系列过程。
钩子函数:
是一种系统在不同阶段自动执行,用户无需干预的函数。
过程:
beforeCreate 实例刚在内存中被创建(初始化),this指向创建的实例,数据没有初始化,不能访问到data和methods;
Created 实例创建完成,可以访问到data和methods,模版没有编译{{}}
beforeMount 完成模板的编译,但是没有挂载到页面
Mounted 将编译好的模板,挂载到页面中
beforeUpdate 状态更新前执行此函数,此时data中的状态值是最新的,界面显示的值是旧的,没有重新渲染dom
update 实例更新完毕后调用此函数,dom重新渲染
beforeDestory 实例销毁前调用,实例仍然可用
destroy 实例销毁后调用,所有都销毁
在哪个生命周期可以操作dom:
mounted:只有在此时,模块才挂载到容器中
在哪个生命周期可以请求数据:
Created、beforeMount、Mounted均可
关于异步请求数据:(都可以,推荐created)
1.对于作为子组件被调用的组件里,异步请求应当在mounted中调用,因为这个时候子组件可能涉及到对dom的操作;
2.对于页面级,当我们需要使用ssr的时候,只有created是可用的,所以这个时候请求数据只能用created
3.对于页面级组件,当我们做异步操作时,涉及到访问dom的操作,只能使用mounted
数据请求在created和mounted的区别:
Created是在组件实例 一旦创建完成的时候调用,此时dom节点并未生成;
Mounted是在页面dom节点渲染完之后立即执行的;触发时机上created是比mounted更早的;
如果我们的请求不需要获取、借助、依赖、改变dom,可以将请求放在created中,反之放在mounted中;
在created中调用异步请求的好处:
1.能更快获取到服务端数据,减少页面loading时间;
2.ssr不支持beforeMount、mounted;