1. vue的生命周期的了解
vue生命周期的钩子函数
- beforeCreate
实例刚在内存中创建出来,还没有初始化data和methods
- created
实例已经在内存中创建完成,此时data和methods已经创建完成
- beforeMount
此时完成了模板的编译,但没有渲染到界面中
- mounted
模板已经渲染到浏览器,创建阶段完成,即将进入运行阶段
- beforeUpdate
数据更新时调用,适合在更新前访问现有DOM
- updated
页面重新渲染完毕,页面中数据和data保持一致
- beforeDestroyed
实例销毁前调用,这时实例依然可用
- destroyed
实例销毁后调用,该钩子函数如果被调用,对应vue实例的所有的指令都被解绑,所有时间监听器被移除,子实例也被销毁
2. vue父子组件生命周期调用顺序
- 加载渲染过程
父beforeCreate -> 父created -> 父beforedMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
- 子组件更新过程
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
- 销毁过程
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
3. keep-alive组件的了解
- keep-alive组件: 它是一个抽象组件,自身不会渲染DOM元素,使用keep-alive包裹的动态组件时,会缓存不活动的组件实例而不是销毁他们
- 场景: 我们在使用动态组件切换内容时,直接切换会导致之前的组件状态恢复默认,我们要缓存之前的状态可以通过keep-alive组件包裹动态组件
4. vue在哪个生命周期内调用异步请求
- created、beforeMount、mounted
- 推荐在created钩子函数中调用异步请求
- 相比beforeMount、mounted能更快获取到服务器的数据、减少页面loading时间
- ssr(服务端渲染)不支持beforeMount、mounted钩子函数
5. vue-if和v-show的区别
- 相同点: 控制元素的显示和隐藏
- 不同点:
- v-show第一次渲染都会编译出来,会把元素添加到DOM节点上,通过display: none控制隐藏,会触发页面重绘
- v-if会根据条件真假确定是否编译,每次条件改变都会向DOM节点添加或删除元素,会触发页面回流,并且导致重绘