2023年Vue2前端面试题（全面）

1.v-if与v-show区别？

v-show通过css display控制显示和隐藏，v-if组件真正的渲染和销毁，而不是显示和隐藏，频繁切

换状态使用v-show ，否则使用v-if

2.为何v-for要使用key?

快速查找到节点，减少渲染次数，提升渲染性能

3.简单描述vue组件生命周期？

单组件生命周期：

        挂载：beforeCreate==>created==>beforeMount==>mounted

        更新：beforeUpdate==>updated

        销毁：beforeDestory==>destoryed

父子组件生命周期：

        挂载：parent beforeCreate==>parent created==>parent beforeMount==>child

beforeCreate==>chlid created==>chlid beforeMount==>child mounted==>parent mounted

        更新：parent beforenUpdata==>chlid beforeUpdate==>child updated==>parent updated

        销毁：parent beforeDestory==>child beforeDestory==>child destoryed==>parent detoryed

从以上可以看出：

挂载时：子组件是在父组件beforeMount后开始挂载，并且子组件先mounted，父组件随后

更新时：子组件是在父组件beforeUpdate后开始更新，并且子组件先于父组件更新

销毁时：子组件是在父组件beforeDestory后开始销毁，并且子组件先于父组件销毁

4.vue组件如何进行组件通信？

1）父组件向子组件传递数据--使用props

功能：让组件接收外部传过来的数据 ；

        传递数据: 直接在组件标签内写属性

        接收数据：

第一种方式：（只接收）

props: ['name']

第二种接收方式：（限定类型）

props:{
  name:String
}

第三种接收方式：（限定类型+限制必要性+指定默认值）

props:{
 name: {
      type:String, //类型
      required:true, //必要性
      default:'老王' // 默认值
     }
   }

备注：props是只读的，Vue底层会监视你对props的修改，如果进行了修改，就会发出警告，若业

务需 求确实需 要修改那么复制props的内容到data中一份，然后去修改data中的数据

父组件：

子组件：

2）子组件向父组件传递数据--可以通过自定义事件

父组件：

子组件：

3）ref 链：父组件要给子组件传值，在子组件上定义一个 ref 属性，这样通过父组件的 $refs 属性

就可以获取子组件的值了，也可以进行父子，兄弟之间的传值($parent / $children与 ref类似)

4）兄弟组件通信--使用全局事件总线（$bus）

安装全局事件总线:

new Vue({
    .....
beforeCreate() {
Vue.prototype.$bus = this//安装全局事件总线，$bus就是当前应用的vm
 },
    ....
})

示例代码如下：

// 在main.js中安装全局事件总线
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
 
//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线
	},
})

接收数据的组件：

接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

methods:{
 demo(data) {.....}
 },
 mounted() {
 this.$bus.$on('xxx', this.demo)// 或者是写箭头函数的回调
 
}

示例代码如下：

提供数据 ：this.$bus.$emit('xxx', 数据)

示例代码如下：

5）使用消息订阅与发布--使用于任意组件通信

使用步骤

        1).安装pubsub:npm i pubsub-js

        2).引入：import pubsub from 'pubsub-js'

        3).接收数据：A组件想要接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

        4).提供数据：pubsub.publish('xxx',数据)

接收数据的组件示例代码如下：

提供数据的代码如下：

6）provide inject组件通信

7）vuex

5.双向绑定v-model的实现原理

双向数据绑定最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据

变动的目的。

首先是从data里面的数据通过绑定到input控件和p标签上，然后在input上通过input监听控件，触发

change事件，调用方法都可以默认获取e事件，e.target.value是获取调用该方法的dom对象上的

value值，把value值赋给data里面的初始数据，从而实现双向数据绑定的原理

6.对MVVM的理解？

M==>mode(数据模型)，V==>vie(代表UI组件，负责将数据转换为UI展现出来)，

VM==>ViewModel，在MVVM架构下，View和Model没有直接的关系，而是通过ViewModel进行交

互的，Model和ViewModel之间的交互是相互的，所以view数据的变化会同步到Model上，而Model

的变化也会同步到View上

7.computed（计算属性）与watch（侦听器）的区别？

1）计算属性可以被缓存，侦听属性不能被缓存

2）侦听属性可以包含异步任务，而计算属性不行

3）计算属性通常是由一个或多个响应式数据计算出一个值返回；而侦听属性通常是监听一个数据

的变化，由这一个数据的变化可能影响到另外的一个或多个数据的变化

4）是否调用return：计算属性中的函数必须要用return返回，而侦听器不用

5）computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一

次加载做监听，添加immediate属性，设置为true（immediate:true）

8.data为什么必须是一个函数？

如果data是一个对象，则任意一个实例对data中的数据进行修改时其他的示例都会收到影响，而将

data定义为一个函数，在该函数体内部返回一个函数，这样，在创建组件实例时，会调用data()方

法，获取返回的新的数据对象，则各个组件实例就会有自己独立的数据对象，组件间互不影响

9.何时使用keep-alive?

缓存组件不需要重复渲染，多个静态tab页切换，优化性能

10.何时使用beforeDestory?

1）解绑自定义事件

2）清零定时器

3）解绑自定义dom事件，如window.scroll等

11.vue为何是异步渲染？$nextTick有何用？

因为如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以考虑性能问题，

Vue会在本轮数据更新之后，再去异步更新视图

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可

以在回调中获取更新后的 DOM

12.vue常见的性能优化有哪些？

1）合理使用v-if和v-show

2）合理使用computed

3）使用v-for的时候动态添加key

4）自定义事件，dom事件在beforeDestory中及时销毁

5）合理使用异步组件

6）合理使用keep-alive

7）data层级不要太深

8）使用vue-loader在开发环境做编译模板

9）前端通用性能优化（图片懒加载/减少HTTP请求/合理设置HTTP缓存/资源合并与压缩/合并CSS

图片/将CSS放在header中/避免重复的资源请求/切分到多个域名）

10）使用ssr

代码层面：

        v-if 和 v-show 区分使用场景

        computed 和 watch  区分使用场景

        v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

        长列表性能优化

        事件的销毁 addEventlisenter 事件监听

        图片资源懒加载

        路由懒加载

        第三方插件的按需引入

        优化无限列表性能

        服务端渲染 SSR or 预渲染

Webpack 层面的优化

        Webpack 对图片进行压缩

        减少 ES6 转为 ES5 的冗余代码

        提取公共代码

        模板预编译

        提取组件的 CSS

        优化 SourceMap

        构建结果输出分析

        Vue 项目的编译优化

基础的 Web 技术的优化

        开启 gzip 压缩

        浏览器缓存

        CDN 的使用

        使用 Chrome Performance 查找性能瓶颈

13.vuex是什么？怎么使用？使用场景有哪些？

vuex 是一个专门为 vue 构建的状态管理工具，主要是为了解决 多组间之间状态共享问题。强调的

是集中式管理，（组件与组件之间的关系变成了组件与仓库之间的关系）。

vuex 的核心包括：state（存放状态）、mutations（同步的更改状态）、actions（发送异步请求，

拿到数据）、getters（根据之前的状态派发新的状态）、modules（模块划分）。

state 发布一条新的数据，在 getters 里面根据状态派发新的状态，actions 发送异步请求获取数

据，然后在 mutations 里面同步的更改数据。

应用场合：购物车的数据共享、登入注册

14.vue指令？

v-html   // html

v-text   // 元素里要显示的内容

v-bind：data    // 绑定动态数据   ：data

v-on：click      // 绑定事件       @click

        .stop 阻止事件继续传播

        .prevent  阻止默认时间

        .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行

处理

        .self 只当在 event.target 是当前元素自身时触发处理函数

        .once 事件将只会触发一次

        .passive 告诉浏览器你不想阻止事件的默认行为

v-for  // 循环，vue2中v-for的优先级高于v-if，不推荐一起使用

v-if   //  条件渲染指令  如果是真则渲染节点，否则不渲染节点

v-if、v-else 和 v-else-if ：类似js的if...else判断语句

v-show：通过display:none;控制元素显示隐藏

v-model    //  双向绑定，用于表单

        .lazy 默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change

事件再同步。

        .number 自动将用户的输入值转化为数值类型

        .trim 自动过滤用户输入的首尾空格

v-pre ：主要用来跳过这个元素和它的子元素编译过程。

v-cloak ：保持在元素上直到关联实例结束时进行编译。

v-once ：关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内

容跳过，这可以用于优化更新性能

15.vue.js两个核心是什么？

数据驱动和组件化

16.说说vue动态组件？

多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组

件。

17.$router和$route的区别是什么？

$router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。

$route 是路由信息对象或者是跳转的路由对象，每一个路由都会有一个route对象，是一个局部对

象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。

18.路由钩子（路由守卫）有哪些？

全局路由守卫

        router.beforeEach(to, from, next),全局前置守卫

        router.beforeResolve(to, from, next),全局的解析守卫

        router.afterEach(to, from ,next) 全局的后置守卫

组件内守卫    路由独享的守卫

        beforeRouteEnter

        beforeRouteUpdate

        beforeRouteLeave

路由独享守卫

        beforeEnter   组件内的守卫

从a页面进入b页面时触发的生命周期

1）beforeRouteLeave：路由组件的组件离开路由钩子，可取消路由离开；

2）beforeEach：路由全局前置守卫，可用于登录验证，全局路由loading等；

3）beforeEnter：独享路由守卫；

4）beforeRouteEnter：路由的组件进入路由前钩子；

5）beforeResolve：路由全局解析守卫；

6）afterEach：路由全局后置钩子；

7）beforeCreate：组件生命周期，不能访问this；

8）created：组件生命周期，可以访问this，不能访问dom；

9）beforeMount：组件生命周期；

10）deactivated：离开缓存组件a，或者触发a的beforeDestory和destoryed组件销毁钩子

11）mounted：访问/操作dom；

12）activated：进入缓存组件，进入a的嵌套子组件（如果有的话）；

13）执行beforeRouteEnter回调函数next

19.对keep-alive的理解？

keep-alive缓存vue实例，提高性能是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免

重新渲染 。

提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组

件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include

高；对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当

组件被移除时，触发钩子函数 deactivated。

20.computed、watch（自动监听、深度监听）、methods区别？

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同

的。

不同点：

computed：计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求

值。

methods：只要发生重新渲染， method 调用总会执行该函数。

watch监听对象需要深度监听，默认是浅监听

当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性computed。

watch用于观察和监听页面上的vue实例，如果要在数据变化的同时进行异步操作或者是比较大的

开销，那么watch为最佳选择。

21.vue中对象更改检测的注意事项？

由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 `Vue.set(object,

key, value)`方法向嵌套对象`添加响应式属性`。为已有对象赋予多个新属性，比如使用

`Object.assign()`或 `_.extend()`。在这种情况下，你应该用两个对象的属性创建一个新的对象

22.ref的作用？

获取dom元素 this.$refs.box

获取子组件中的data this.$refs.box.msg

调用子组件中的方法 this.$refs.box.open()

23.路由传参的方式?

query传参和params传参

1）声明式导航

不带参跳转 对应的地址为/foo

url字符串拼接传参 对应的地址为/foo?id=123

query方式对象形式传参 对应的地址为/foo?id=123

params方式对象形式传参 对应地址为 /path/123 , 注意params和query一起使用params会失效，

params与name一起使用

2）编程式导航(路由实例对象router=new VueRouter())

字符串router.push('home')

对象router.push({ path: 'home' })

命名的路由 对应路径为/path/123

router.push({ name: 'user', params: { userId: '123' }})

带查询参数，变成 /register?plan=123

router.push({ path: 'register', query: { plan: '123' }})

接收参数

this.$route.params.id

this.$route.query.xxx

24.vuex页面刷新数据丢失的问题怎么解决？

问题：F5页面刷新，页面销毁之前的资源，重新请求，因此写在生命周期里的vuex数据是重新初

始化，无法获取的，这也就是为什么会打印出空的原因。

解决思路1：

使用localStorage sessionStorage或者是cookie

实际使用vuex值变化时，H5刷新页面，vuex数据重置为初始状态，所以还是要用到localStorage

解决思路2：

使用插件vuex-persistedState

vuex-persistedState默认持久化所有的state，可以指定需要持久化的state

25.vue生命周期在哪些场景中使用？

beforeCreate

创建前，访问不到data当中的属性以及methods当中的属性和方法，可以在当前生命周期创建一个

loading，在页面加载完成之后将loading移除

created

创建后，当前生命周期执行的时候会遍历data中所有的属性，给每一个属性都添加一个getter、

setter方法,将data中的属性变成一个响应式属性

beforeMount

模板与数据进行结合，但是还没有挂载到页面上。因此我们可以在当前生命周期中进行数据最后的

修改

mounted

当前生命周期数据和模板进行相结合，并且已经挂载到页面上了，因此我们可以在当前生命周期中

获取到真实的DOM元素，在这发起后端请求，拿回数据，配合路由钩子做一些事情

beforeUpdate

当数据发生改变的时候当前生命周期就会执行，因此我们可以通过当前生命周期来检测数据的变化

当前生命周期执行的时候会将更新的数据与模板进行相结合，但是并没有挂载到页面上，因此我们

可以在当前生命周期中做更新数据的最后修改

updated

数据与模板进行相结合，并且将更新后的数据挂载到了页面上。因此我们可以在当前生命周期中获

取到最新的DOM结构

beforeDestory

当前生命周期中我们需要做事件的解绑  监听的移除  定时器的清除等操作

destoryed

当前生命周期执行完毕后会将vue与页面之间的关联进行断开

当包裹动态组件的时候会触发两个新的生命周期

 activated     当组件为活跃状态的时候触发(活跃状态：进入页面的时候)

deactivated     缓存状态的时候触发

26.$set是干什么用的？

当数据变化但没有更新视图时使用，例如对象新增加的属性，数组新增加的成员

this.$set(obj,"key","value")

27.$nextTick的作用是什么？

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的

DOM。

例如：在created生命周期中想要操作dom就可以使用

this.$nextTick(()=>{ ... })

可以在mounted之前的生命周期中操作dom

28.mixin是干什么的？

mixin提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意

组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}
​
new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

29.具名插槽，作用域插槽的使用？

// 比如新建一个 组件

  

    
  
  

    
  
  

    
  

// 使用插槽