vue常见面试题集-2020整理-持续更新中...

小灰灰 2023-02-19 14:29 8阅读 0赞

#### 1.\[vue-router是怎么传递参数的？ ####

(1)通过在router.js文件中配置path的地方动态传递参数 eg: path: ‘/detail/:id’  
(2).在router-link标签中传递参数

<router-link :to=\{  
params: \{  
x: 1  
\}  
\} />  
获取：this.$route.params.id

#### 2.v-if和v-for一起使用的弊端以及解决办法 ####

v-for的优先级比v-if高，导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。

解决办法：

1.在v-for的外层包裹一个标签来使用v-if

2将需要的判断在computed里处理，然后在放到v-for里

#### 3.beforeDestroyed里面一般进行什么操作 ####

beforedestoryed是组件销毁之前执行的一个生命周期，在这个生命周期里，我们可以进行回调函数或定时器的清除，数据初始化等

#### 4.vue组件传值方式 ####

1.  props
2.  event bus
3.  $emit
4.  vuex
5.  storage
6.  provide/inject(优点是不用层层传递了)

**1.事件总线：**

通过其中一个 e m i t 发 另 一 个 emit发另一个 emit发另一个on接收的方式 实现组件传值，main.js中挂载一下

Vue.prototype.$bus=new Vue() //$bus挂在同一个实例

其中一个页面$emit

//确保dom已经渲染完成
    this.$nextTick(()=>{
    this.$bus.$emit('my',"给父组件传值")
    })

另一个页面$on

mounted(){
    //vue渲染顺序，先渲染父组件--->渲染子组件
    this.$bus.$on('my',params=>{
    consolo.log(params)
    })
    }

**2.provide和inject特性**

在vue2.2.0 中新增provide和inject属性

使用的方式很简单：  
父组件通过provide提供数据，其他组价可以使用inject注入数据

**注意**

不推荐直接用于应用程序代码中。一般使用的场景是自定义组件库的时候，底层组件之间需要通信的时候使用。

> provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

**格式**

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject 选项应该是：

一个字符串数组  
或 一个对象，对象的 key 是本地的绑定名（自定义的一个名字），value 是：  
在provide传过来的值(字符串或 Symbol)，或

一个对象，该对象的：  
from 属性是provide传过来的 (字符串或 Symbol)  
default 属性是降级情况下使用的 value

**例子：**

父组件

<template>
      <div>
        <h1>HelloWorld</h1>
        <One></One>
      </div>
    </template>
    
    <script>
    import One from "./One";
    export default {
      components: { One },
      // provide: {
      //   form: "这是父组件的provide"
      // }
      provide() {
        return {
          form: "这是父组件的provide"
        };
      }
    };
    </script>

子组件1：

<template>
      <div>
        <h2>childOne组件</h2>
        {
       {demo}}
        <Two></Two>
      </div>
    </template>
    
    <script>
    import Two from "./Two.vue";
    export default {
      name: "One",
      // inject: ["form"],
      inject: {
        form: {
          default: () => ({})
        }
      },
      data() {
        return {
          demo: this.form
        };
      },
      components: {
        Two
      }
    };
    </script>

子组件2：

<template>
      <div>
        <h2>childtwo组件</h2>
        {
       {demo}}
      </div>
    </template>
    
    <script>
    export default {
      name: "Two",
      // inject: ["form"],
      inject: {
        for: {
          default: () => ({})
        }
      },
      data() {
        return {
          demo: this.form
          // demo: "childTwo"
        };
      }
    };
    </script>

#### 5.vue中父组件如何获取子组件的属性和方法 ####

在子组件上定义ref属性来获取子组件的属性和方法

代码：

// 这里是父组件
    <templete>
    	<child ref="child"/>
    </templete>
    <script>
    method: {
    	getChild () {
    		this.$refs.child.属性名（方法名）
    	}
    }
    </script>

#### 6.watch和computed的区别 ####

watch：监听数据变化，并执行一个回调函数

computed：对已有的数据进行加工，具有缓存功能，只有数据发生改时，才会重新计算

#### 7.vue父组件和子组件生命周期的顺序 ####

1.渲染过程顺序：  
父组件beforeCreate() -> 父组件created() -> 父组件beforeMount() -> 子组件beforeCreate() ->子组件created() -> 子组件beforeMount() -> 子组件mounted() -> 父组件mounted()  
2.更新过程顺序：  
父组件更新过程：  
父组件beforeUpdate() -> 父组件updated()  
子组件更新过程：  
父组件beforeUpdate() -> 子组件beforeUpdate() -> 子组件updated() -> 父组件updated()  
3.销毁过程  
父组件beforeDestroy() -> 子组件beforeDestroy() -> 子组件destroyed() -> 父组件destroyed()

#### 8.vue中父组件能监听到子组件的生命周期吗 ####

能，通过@hook:进行监听代码如下：

// 这里是父组件
    <template>
    	<child
    	@hook:mounted="getChildMounted"
    	/>
    </template>
    <script>
    method: {
    	getChildMounted () {
    		// 这里可以获取到子组件mounted的信息
    	}
    }
    </script>

#### 9.vue中的事件修饰符主要有哪些？分别是什么作用？ ####

.stop: 阻止事件冒泡  
.native: 绑定原生事件  
.once: 事件只执行一次  
.self:将事件绑定在自身身上，相当于阻止事件冒泡  
.prevent: 阻止默认事件  
.caption: 用于事件捕获

#### 10.介绍下什么是keep-alive ####

keep-alive：组件缓存，只会执行一次，不会被销毁。被keep-alive包裹的组件，有activated和deactivated方法。

#### 11.watch能监听到数组的pop行为吗 ####

能，对于有返回值的数据，watch就能监听到，比如数组的pop，push, unshift,map等行为。

#### 12.watch如何实现深度监听 ####

watch: {
    	obj: {
    		handler: function(val) {
    		},
    		deep: true // 深度监听
    	}
    }

#### 13.vue中如何解决页面不重新渲染问题? ####

(1)修改对象属性后,页面未重新渲染:

this.$set(对象名称, '属性名', '属性值')

(2)使用this.$forceUpdate()方法可重新渲染页面

#### 14.什么是vuex？ ####

vuex是全局状态管理工具，它有以下几个核心部分组成：

state:存储数据；

mutations:更新数据的方法；

actions:调用mutations方法，更新state数据；

getters:对state中的数据进行预处理；

Module： store 分割成**模块**

#### 15.对于MVVM的理解？ ####

M（数据层） V（视图层） VM（view-model）视图模型层）用来连接（数据层）（视图层）

#### 16.vue的生命周期？ ####

beforeCreate: 进行数据和方法的初始化；

created: 已经完成数据和方法的初始化；

beforeMount: 开始渲染dom

mounted:可以渲染dom

beforeUpdate: data中的数据即将被更新；

updated: data中的数据更新完毕；

beforeDestroy: 实例即将销毁；

destroyed:实例已被销毁；

#### 17.vue创建组件的时候data中为什么会被return出一个对象？ ####

防止组件与组件之间变量的局部污染

#### 18.vue路由的几种模式？ ####

两种：

1.hash（默认）

2.history

通过model属性切换路由模式

#### 19.什么是路由懒加载 ####

通过异步的方式来加载对应的路由组件，提高页面的加载速度

#### 20.vue中有哪些内置组件？ ####

1.  transtion
2.  transition-group
3.  keep-alive
4.  slot
5.  component

#### 21.什么是SPA？ ####

SPA是单页面应用程序，vue react angular 都是,整个项目只有一个页面

#### 22.vue-router有哪几种导航钩子（ 导航守卫 ） ####

1.  全局守卫：  
    beforeEach((to, from, next) => \{调用next来resolve这个钩子\} ),  
    beforeResolve((to, from, next) => \{\} ),  
    afterEach((to, from) => \{\} )
2.  路由独享守卫：  
    beforeEnter((to, from, next) => \{\} ),
3.  组件内部守卫：  
    beforeRouteEnter((to, from, next) => \{next可以传回调，回调里面可以用vm访问实例\} ), 内部没有this，因为路由还没confirm  
    beforeRouteUpdate((to, from, next) => \{\})，可以拿到this  
    beforeRouteLeave((to, from, next) => \{\})
    
    他们执行顺序：全局》路由》组件

#### 23.vue-router怎么配置404页面？ ####

{
    // 会匹配所有路径
    // 含有通配符的路由应该放在最后
    path: '*',
    name: '404',
    component: () => import('../views/404.vue')
    }

#### 24. 切换路由时自动或提示保存草稿功能，如何实现？ ####

beforeRouteLeave (to, from, next) {
      if(用户已经输入信息){
        //出现弹窗提醒保存草稿，或者自动后台为其保存 
      }else{
        next(true);//用户离开
      }
    }

#### 25.vue-cli生成的项目可以使用es6、es7的语法吗？为什么？ ####

vue-cli 配置了babel,webpack打包时会将高级语法转为ES5，所以上线的时候没有问题。但是脚手架只是配置了一些默认常见的用法，像装饰器还需另做配置。 （可以根据babel官网配置一些尚在草案中的语法）

#### 26.什么是虚拟DOM？ ####

使用JS来模拟DOM树结构

由于每次查询DOM都会遍历整颗DOM树，相当消耗计算资源。

通过JS以对象嵌套的方式表示DOM树，每次DOM的更改就变成了JS对象属性的修改，这样就会减少性能的开销。

#### 27.$nextTick有什么作用？ ####

处理数据动态变化后，dom还未及时更新的问题。nexttick就可以获取到数据更新后最新的dom变化

#### 28.怎么捕获组件vue的错误信息？ ####

**1.errorCaptured**

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：

1.错误对象

2.发生错误的组件实例

3.包含错误来源信息的字符串。

此钩子可以返回 `false` 以阻止该错误继续向上传播。

注意：只能在父组件中处理子组件的错误，没法直接在Vue的主实例中使用它。

errorCaptured(err,vm,info) {
        console.log(`cat EC: ${err.toString()}\ninfo: ${info}`); 
         return false;
      }

**2.errorHandler**

Vue.config.errorHandler = function(err, vm, info) {
      console.log(`Error: ${err.toString()}\nInfo: ${info}`);
    }
    err：error对象
    info：是一个Vue特有的字符串
    vm：Vue应用本身。
    在一个页面你可以有多个Vue应用。这个error handler作用到所有的应用。

#### 29.为什么vue使用异步更新组件？ ####

批量更新，收集当前的改动一次性更新，节省diff开销

#### 30.vue如何优化首页的加载速度？ ####

1.路由、图片懒加载

2.DNS预解析dns-prefetch

3.CDN分发

4.按需加载三方资源

5.webpack开启gzip压缩