vue面试题8|[2024-11-14]

问题1：什么是渐进式框架?

vue.js        router        vuex        element        ...插件

vue.js 渐0        router 渐1        vuex 渐2

vue.js只是一个核心库，比如我再添加一个router或者vuex，不断让项目壮大，就是渐进式框架带来的好处。 

问题2：vue2.x生命周期

1.有哪些生命周期

        系统自带（8个）：

                beforeCreate

                created

                beforeMount

                mounted

                beforeUpdate

                updated

                beforeDestroy

                destroyed 

2.一旦进入到页面或者组件，会执行哪些生命周期，顺序是什么？

          beforeCreate

          created

          beforeMount

          mounted

3.在哪个阶段有$el，在哪个阶段有$data

          beforeCreate 啥也没有

          created          有data，没有el

          beforeMount  有data，没有el

          mounted         都有

4.如果加入keep-alive会多两个生命周期

        activated、deactivated

5.如果加入了keep-alive，第一次进入组件会执行哪些生命周期？        

        beforeCreate

        created

        beforeMount

        mounted

        activated

6.如果加入了keep-alive，第二次或第N次进入组件会执行哪些生命周期？

        只执行一个生命周期：activated

7.场景

8.源码

class Vue{constructor(option){options.beforeCreate.bind(this)()this.$data = options.dataoptions.created.bind(this)()options.beforeMount.bind(this)()this.$el = document,querySelector(options.el)options.mounted.bind(this)()}
}

 问题3：谈谈你对keep-alive的了解

1.是什么

        是vue系统自带的一个组件，功能：是用来缓存组件的。  ====>  提升性能

2.使用场景

        就是用来缓存组件，提升项目的性能。具体实现比如：首页进入到详情页，如果用户在首页每次点击都是相同的，那么详情页就没有必要请求N次了，直接缓存起来就可以了，当然如果点击的不是同一个，那么就直接请求。

问题4：v-if和v-show区别

1.展示形式不同

        v-if是创建一个dom节点

        v-show是display:none、 block

2.使用场景不同

        初次加载v-if要比v-show好，页面不会多加载盒子

        频繁切换v-show要比v-if好，创建和删除的开销太大了，显示和隐藏的开销较小

 问题5：v-if和v-for优先级

v-for的优先级高于v-if

***是在源码中体现的：function getElement

问题6：ref是什么？

来获取dom的

<img ref='imgs' src='../assets/logo.png' id='img'>mounted(){console.log(document.getElementById('img')) // 一种获取dom的方式console.log(this.$refs.imgs)
}

问题7：nextTick是什么？

来获取更新后的dom内容

对于组件，是先执行同步的，再执行异步的

created(){console.log(11)this.$nextTick(() => {console.log(333)})
}mounted(){conosle.log(22)this.$nextTick(() => {console.log(444)})
}// 输出的结果为
11
22
333
444

 组件中会出现这样的情况：数据更新了，但是视图没有更新

<button @click='btn' ref='box'> {{ str }} </button>data(){return {str: '123'}
}methods:{btn () {this.str = 'bbbbbb'console.log(this.$refs.box.innerHTML)  // '123',这里获取的是视图里面的数据，视图还没有更新// 使用$nextTick就可以解决这个问题，获取更新后的dom数据this.$nextTick(() => {console.log(this.$refs.box.innerHTML)  // 'bbbbbb'})}
}