vue高频面试题

来源：B站程序员来了

第一部分：vue基础

1，v-if和v-for的优先级谁更高？同时出现该如何优化性能？

在同级出现的时候，render函数会将v-for和v-if同时渲染在一个名为_l的函数，在该函数的return中有个条件判断，这个条件判断就是v-if，而函数_l就是v-for生成的函数循环，也就是说同时出现v-for优先于v-if。

同时出现的时候，先条件判断，再进行渲染。就是在外层嵌套一个template。此时生成 的源码就是一个三元运算符，先判断条件，条件成立再执行_l函数，否知执行一个_e空函数，表示不渲染。

2，data类型

data分为两个类型：对象和函数

在源码中，当数据进行初始化的时候，首先使用typeof判断data是不是一个函数，如果是，调用getdata挂载到vue实例上，所以组件复用就是这个道理，复用一次调用detdata一次，如果不是函数，执行其本身，对象执行结束就被回收了。

3，key的作用

使用v-for的时候，不使用key，它会将每个标签元素逐一渲染到页面上，使用key之后，由于key使用的diff算法，就是先创建虚拟dom再循环这个虚拟dom，循环好之后在将渲染好的虚拟dom插入到页面上。

key的取值也有讲究，如果数据是不变的，使用index就可以了，如果数据可能会变化，key需要绑定成这个数据唯一标识，这样才能保证重新渲染的时候，使得数据一一对应。

4，vue组件化

从vue组件化的定义，优点，使用场景和注意事项说

定义：

首先会渲染成

最后被vue-loader渲染成一个render函数

5，谈谈你对vue框架设计原理的理解

从两个方面讲：渐进式、易用、灵活和高效

渐进式：vue只是提供一个核心的模块用于满足基本的开发需求，只需要引入vue文件和label文件即可，在需要其他功能的时候，通过npm下载即可，例如路由、vuex等

易用、灵活和高效：vue可以使用很多第三方组件，开发更加简单和高效，同时通过和组件化编程，让vue变得更加灵活。

vue是一个渐进式的JavaScript框架，它只提供开发需要的最基本功能，这个功能就可以满足一般的开发，如果不足以满足开发，可以通过npm下载其他功能，例如路由、vuex等。而且vue有很多的第三方组件，这样开发起来更加高效，通过组件化编程让vue开发变得简单而且灵活。

6，谈谈你对vvm，vpm，mvvm的理解

7，vue组件之间的通信

vue组件之间的通信包括：父子之间的通信，子父之间的通信，兄弟之间的通信，后代组件之间的通信。

父子之间的通信：

props

$on

this.$parent

注入provide（父组件和后代组件）

使用$attrs和$listeners接收父组件转来的属性和方法（只能向下）

子父之间的通信

$emit

refs获取

v-model

插槽（严格意义上说，是父子之间的通信，只是在父页面中将子组件内的数据显示到父组件的插槽内，而父组件不可直接使用该数据）

兄弟之间通信

eventBus

pubsub（发布订阅者模式）

后代组件之间通信：

pubsub（发布订阅者模式）

全部搞定的方式：vuex

但是这个方式主要使用在公共资源上，例如获取用户名密码token，多个页面同时调用同一个接口，购物车的数据共享等可以使用，大型项目为了解耦可以使用，小型项目可以少使用。

8，vue项目优化

i,路由懒加载

ii.keep-alive

iii.使用v-show复用DOM

Ⅳ.避免v-for和v-if同时使用

Ⅴ.无改变的列表数据，请求的时候使用Object.freeze()冻结该数据，有变化的长数据使用分页滚动的方式显示部分数据。

Ⅶ.事件销毁和图片懒加载

Ⅷ.第三方插件按需引入

9，watch和computed的局别、联系和使用场景

10，vue的生命周期

11.nextTick的原理了使用场景

nextTick接收一个回调函数，该回调函数会在DOM加载完毕之后执行。

new Vue({
  methods: {
    example: function () {
      this.message = 'changed'
      this.$nextTick(function () {
        this.doSomethingElse()
      })
    }
  }
})

注意：回调函数不能使用箭头函数，否则可能导致this不指向vue实例对象。

nextTick的原理：

nextTick使用了html提供的api——mutationObserver构造函数，该函数会在DOM加载完成之后调用：

var ob=new MutationObserver(function(){
console.log("dom加载完毕")
})
var dom=document.getElementById('app')
ob.observer(dom)

12，vue双向绑定原理，vue如何实现响应式（vue2）

vue如何实现响应式：之前写的，就不在这写了

vue响应式原理（也是双向绑定原理）

JavaScript手写v-model，v-model原理实现

第二部分：路由