vue常见面试题汇总

1.v-if 和 v-show有什么区别

（1）相同点：都是判断 DOM 节点的显示和隐藏

（2）不同点：
v-if 是从 DOM 树上删除或重建节点，v-show 是通过修改display 的属性值来控制元素的显隐。

v-if 是惰性的，初始条件为假就什么也不做，为真才会编译，v-show 在任何条件下都被编译。

v-if有更高的切换消耗，不适合做频繁的切换，v-show 有更高的初始渲染消耗，适合做频繁的切换。

2.v-on可以监听多个方法

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

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

解决办法：在v-for的外层或内层包裹一个元素来使用v-if。

4.beforeDestroy 里面一般进行什么操作

beforeDestroyed 是组件销毁前执行的一个生命周期，在这个生命周期里，我们可以进行回调函数或定时器的清除，不用的 dom 元素的清除等。

5.vue 组件间的传值有几种方式

（1）兄弟间传值：小项目通过eventBus

eventBus.js

// 定义一个新的vue实例专门用于传递数据，并导出
import Vue from 'vue'
export default new Vue()

兄弟A：定义传递的方法名和传输内容，点击事件或钩子函数触发$emit事件

<template>
  <div class="A">
    <h2>我是A</h2>
    <p @click="toBClick">点击向兄弟B传递数据</p>
    <child1></child1>
  </div>
</template>

<script>
// 引入eventBus，其实就是引入另一个vue实例
import eventBus from '../../common/js/eventBus'

import child1 from './Child1'

export default {
  components: {child1},
  methods: {
    toBClick () {
      // 定义方法名，和要传输的数据
      eventBus.$emit('fromA', '我是小可爱，来自A火星')
    }
  }
}
</script>
<style scoped>
.A{
  width: 260px;
  height: 300px;
  margin: 50px 50px;
  padding: 10px 10px;
  border: 1px solid blue;
}
p{
  margin-top: 15px;
  padding: 10px 10px;
  background: palegreen;
}
</style>

兄弟B：显示传过来的值，在mounted执行。

<template>
 <div class="B">
     <h2>我是B</h2>
    <p>来自兄弟A的值：{{content}}</p>
 </div>
</template>

<script>
// 引入
import eventBus from '../../common/js/eventBus'

export default{
  data () {
    return {
      content: ''
    }
  },

  // 在这里执行数据获取的方法
  mounted () {
    this.getA()
  },
  methods: {
    getA () {
      let that = this
      eventBus.$on('fromA', function (val) {
        // 这里的that指的是项目vue的实例，用that接收，与eventBus的vue作区分
        that.content = val
      })
    }
  }
}
</script>

<style scoped>
.B{
  width: 200px;
  height: 200px;
  margin: 30px 30px;
  border: 1px solid green;
}
p{
    margin-top: 20px;
    line-height: 15px;
}
</style>

效果：

（2）父传子：父组件使用props向子组件传递数据（在父组件内定义，在子组件里用props接收）

父组件

<template>
  <div class="parent">
    <h2>{{ msg }}</h2>
    <child1 psMsg="父传子的内容:我是你爸爸"></child1> <!-- 子组件绑定psMsg变量-->
  </div>
</template>

<script>
import child1 from './Child1'
export default {
  components: {child1},
  name: 'Index',
  data () {
    return {
      msg: '父组件'
    }
  },
  methods: {
  }
}
</script>
<style>
.parent{
  width: 260px;
  height: 300px;
  margin: 50px 50px;
  padding: 10px 10px;
  border: 1px solid blue;
}
</style>

子组件

<template>
 <div class="son">
    <p>{{ sonMsg }}</p>
    <p>子组件接收到内容：{{ psMsg }}</p>
 </div>
</template>

<script>
export default{
  name: 'Child1',
  data () {
    return {
      sonMsg: '子组件'
    }
  },
  props: ['psMsg']
}
</script>

<style>
.son{
  width: 200px;
  height: 200px;
  margin: 30px 30px;
  border: 1px solid green;
}
p{
    margin-top: 20px;
    line-height: 15px;
}
</style>

效果图

（3）子传父：子组件主要通过事件传递数据给父组件，在子组件中通过$emit来自定义一个事件，在父组件中调用该事件，从而得到从子组件中传给父组件的值。

子组件

<template>
 <div class="son">
    <p>子组件</p>
    <p @click="chuanClick()">点击向父组件传值</p>
 </div>
</template>

<script>
export default{
  name: 'Child1',
  data () {
    return {
      sonMsg: '儿子来了'
    }
  },
  methods: {
    chuanClick () {
      this.$emit('sonMsg1', this.sonMsg)
    }
  }
}
</script>

<style scoped>
.son{
  width: 200px;
  height: 200px;
  margin: 30px 30px;
  border: 1px solid green;
}
p{
    margin-top: 20px;
    line-height: 15px;
}
p:nth-child(2){
    padding: 10px 10px;
    border: 1px solid palegreen;
    background: palegreen;
}
</style>

父组件

<template>
  <div class="parent">
    <h2>父组件</h2>
    <p>父组件接收的内容：{{getMsg}}</p>
    <!-- 绑定自定义事件 -->
    <child1 @sonMsg1='getsonMsg'></child1>
  </div>
</template>

<script>
import child1 from './Child1'
export default {
  components: {child1},
  name: 'Index',
  data () {
    return {
      getMsg: ''
    }
  },
  methods: {
    getsonMsg (sonMsg) {
      this.getMsg = sonMsg
    }
  }
}
</script>
<style scoped>
.parent{
  width: 260px;
  height: 300px;
  margin: 50px 50px;
  padding: 10px 10px;
  border: 1px solid blue;
}
p{
  margin: 15px;
}
</style>

效果图

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：对子组件的生命周期进行监听。

9.vue 中的事件修饰符主要有哪些以及作用

.stop：阻止事件冒泡
.native：绑定原生事件
.self：将事件绑定在自身身上，相当于阻止事件冒泡
.prevent：阻止默认事件
.caption：用于事件捕获

10.什么是 keep-alive

keep-alive 是用于做组件缓存的，只会执行一次，不会被销毁。
被 keep-alive 包裹的组件，没有 create 和 beforeDestroyed 等方法，但是有 activated 和 deactivated 方法。

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

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

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

（1）修改对象属性后页面未重新渲染可以使用 this.$set(对象名称，‘属性名’，‘属性值’)

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

13.跳转方法

（1）根据路由跳转：this.$router.push({ path:’ ',，query：{ set:123 } })

（2）标签带参跳转：<router-link to=’“{path：’ '，query：{ set:123} }”>

14.vue 中 key 值的作用

（1）给每一个节点做一个唯一标识

（2）主要是为了高效的更新虚拟 DOM

15.什么是 vuex？在那种场景下使用？

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

state:存储数据；

mutations:更新数据的方法；

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

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

16.对于 MVVM 的理解？

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

17.vue 的生命周期

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

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

beforeMount: 开始渲染dom

mounted:可以渲染dom

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

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

beforeDestroy: 实例即将销毁；

destroyed:实例已被销毁；

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

可以保证组件的每一次调用都是创建一个新对象，组件之间不会产生影响；

19.vue 中常见的命令

v-text 可以覆盖已有的内容，不会解析带标签的数据

v-html 可以解析带标签的数据

v-on 绑定事件（例：v-on：click（“”））双击事件：@dblclick=“”方法中通过this获取数据

v-show 本质是控制元素的display

v-if 本质操作的是dom树，直接从dom树中删除了

v-show 和 v-if 都是控制元素的显隐

v-for 本质是把数据拷贝若干份

v-model 双向数据绑定

v-bind 设置元素的属性比如（class，src）

// 简写
<img  :src=" show? '' : '' " > 
// 全写
<img v-bind:src="">

20.el 挂载点

1.vue会管理el选项命中的元素及其内部的后代元素。

2.可以使用其他的选择器，但是建议使用ID选择器。

3.可以使用其他的双标签，不能使用HTML和BODY。

21.ssr是什么

服务端渲染

什么是SPA

SPA是单页面应用程序，vue react angular 都是,整个项目只有一个页面；局部刷新而来；

22.vue中有哪些内置组件

component slot transtion fliters

23.什么是路由懒加载

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

24.vue如何优化页面加载

使用cdn,不要打包一些公共的文件和组件库