Vue2面试题1|[2024-11-04]

1.描述对Vue生命周期的理解

        对于生命周期，就是Vue中实例 在创建 -> 销毁：

                1. 创建 2.初始化数据 3.编译template 4.挂载DOM 5.渲染 6.更新渲染 7.卸载

        生命周期函数：        

          在beforeCreate阶段，dom和data都是undefined；在created和beforeMount阶段，dom是undefined，data是可以获取的；在mounted阶段，dom和data可以获取。

        详解：

new Vue() const vm = new Vue(){}  // 创建空的实例对象
init events lifecycle

// beforeCreate
init reactivity data injection methods

// created
option
- yes 
- no el option vm.$mount(el)

template
- yes compile
- no el outerHTML as template

// beforeMount 此时，模版已经编译好 但是页面未更新
vm.$el replace $el

// mounted 在DOM上进行渲染完成
// beforeUpdate
DOM re-render patch

// updated
// beforeDestory
data methods filter directive 可用

// destoryed

问题1：生命周期有哪些？发送请求在created还是mounted？

        生命周期有哪些？ 

        Vue2.x系统自带有8个，分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy，destroyed。

        发送请求在created还是mounted？

        这个问题具体要看项目和业务端的情况，因为组件的加载顺序是，父组件引入了子组件，那么先执行父组件的前3个生命周期（beforeCreate、created、beforeMount），再执行子组件的前4个生命周期，那么如果我们的业务是父组件引入子组件，并且优先加载子组件的数据，那么在父组件中，当前的请求要放在mounted中；如果当前组件没有依赖关系，那么放在哪个生命周期中请求都是可以的。

问题2：为什么发送请求不在beforeCreate里？beforeCreate和created有什么区别？

        为什么发送请求不在beforeCreate里？

        因为：如果请求是在methods中封装好了，在beforeCreate调用的时候，beforeCreate阶段是拿不到methods里面的方法的（会报错）。这个阶段根本没有this。

        beforeCreate和created有什么区别？

         beforeCreate没有$data，created中有$data

        beforeCreate拿不到methods中的方法，created是可以拿到methods中的方法的

问题3：在created中如何获取dom？

        1.只要写异步代码，获取dom是在异步中获取的，就可以了。

           例如：setTimeout、请求、Promise.xxx()等等...

        2.使用vue系统内置的this.$nextTick

问题4：一旦进入组件会执行哪些生命周期？

        beforeCreate、created、beforeMount、mounted

问题5：第二次或者第N次进去组件，会执行哪些生命周期？

        如果当前组件加入了keep-alive，只会执行一个生命周期 

        activated

        如果没有加入keep-alive

         beforeCreate、created、beforeMount、mounted

问题6：父组件引入子组件，那么生命周期执行的顺序是？ 

        父：beforeCreate、created、beforeMount

        子：beforeCreate、created、beforeMount、mounted

                ......

                【若是父组件中引入了多个子组件，顺序执行所有子组件】

        父：mounted

问题7：加入keep-alive会执行哪些生命周期？

         如果使用了keep-alive组件，当前的组件会额外增加2个生命周期（系统8+2）

        activated、deactivated

        如果当前组件加入keep-alive第一次进入这个组件会执行5个生命周期

         beforeCreate、created、beforeMount、mounted、activated

问题8：keep-alive

        keep-alive是什么 ： 缓存当前组件

问题9：你在什么情况下用过哪些生命周期？说一说生命周期使用场景

        created        ===>   单组件请求

        mounted      ===>   同步可以获取dom，如果子组件请求后父组件请求

        activated      ===>   判断id是否相等，如果不相同发送请求（例如商品的详情页）

        destroyed     ===>  关闭页面，记录视频播放的时间，初始化的时候从上一次的历史开始播放