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节点添加或删除元素，会触发页面回流，并且导致重绘