面试前端工程师的关于vue框架常见面试题总汇，分享给正在面试的程序员朋友。希望对你有所帮助

对 MVVM 的理解

MVVM分为Model、View、ViewModel三者。

Model：代表数据模型
View：代表视图
ViewModel：连接视图和模型，实现数据的双向绑定

说说你对SPA单页面的理解，它的优缺点分别是什么？

SPA（ single page application ）仅在 Web 页面初始化时加载相应的 html、JavaScript 和 css。
一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转
而页面的变化是利用路由机制实现 HTML 内容的变换，避免页面的重新加载。
优点
用户体验好，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染
减少了不必要的跳转和重复渲染，这样相对减轻了服务器的压力
前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理
缺点
初次加载耗时多
不能使用浏览器的前进后退功能，由于单页应用在一个页面中显示所有的内容，所以，无法前进后退

不利于搜索引擎检索：由于所有的内容都在一个页面中动态替换显示，所以在 seo 上其有着天然的弱势。

SPA首屏加载速度慢的怎么解决？

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容；
加载慢的原因

网络延时问题
资源文件体积是否过大
资源是否重复发送请求去加载了
加载脚本的时候，渲染内容堵塞了

常见的几种SPA首屏优化方式

减小入口文件积
静态资源本地缓存
UI框架按需加载
图片资源的压缩
组件重复打包
开启GZip压缩
使用SSR

Vue的优点

Vue 实现数据双向绑定的原理

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。当把一个普通的 JavaScript 对象传给 Vue 作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转化为 getter/setter，用户看不到getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

Vue的响应式原理

什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。
Object.defineProperty 为对象中的每一个属性，设置 get 和 set 方法，每个声明的属性，都会有一个 专属的依赖收集器 subs，当页面使用到 某个属性时，触发 ObjectdefineProperty - get函数，页面的 watcher 就会被 放到 属性的依赖收集器 subs 中，在 数据变化时，通知更新；
当数据改变的时候，会触发Object.defineProperty - set函数，数据会遍历自己的 依赖收集器 subs，逐个通知 watcher，视图开始更新；

Vue3.x响应式数据原理

Vue3.x改用Proxy替代Object.defineProperty。
因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。
Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？
判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。
监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

Vue初始化过程中（new Vue(options)）都做了什么？

1.处理组件配置项
    初始化根组件时进行了选项合并操作，将全局配置合并到根组件的局部配置上
    初始化每个子组件时做了一些性能优化，将组件配置对象上的一些深层次属性放 到 vm.$options 选项中，以提高代码的执行效率
2.初始化组件实例的关系属性，比如 $parent、$children、$root、$refs 等
3.处理自定义事件
4.调用 beforeCreate 钩子函数
5.初始化组件的 inject 配置项，得到 ret[key] = val 形式的配置对象，然后对该配置对象进行响应式处理，并代理每个 key 到 vm 实例上
6.数据响应式，处理 props、methods、data、computed、watch 等选项
7.解析组件配置项上的 provide 对象，将其挂载到 vm._provided 属性上
8.调用 created 钩子函数
9.如果发现配置项上有 el 选项，则自动调用 $mount 方法，也就是说有了 el 选项，就不需要再手动调用 $mount 方法，反之，没提供 el 选项则必须调用 $mount
10.接下来则进入挂载阶段

// core/instance/init.js
export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
      const vm: Component = this
      vm._uid = uid++
      
      // 如果是Vue的实例，则不需要被observe
      vm._isVue = true
      
      if (options && options._isComponent) {
        // optimize internal component instantiation
        // since dynamic options merging is pretty slow, and none of the
        // internal component options needs special treatment.
        initInternalComponent(vm, options)
      } else {
        vm.$options = mergeOptions(
          resolveConstructorOptions(vm.constructor),
          options || {},
          vm
        )
      }
      
      if (process.env.NODE_ENV !== 'production') {
        initProxy(vm)
      } else {
        vm._renderProxy = vm
      }

      vm._self = vm

      initLifecycle(vm)
      initEvents(vm)
      callHook(vm, 'beforeCreate')
      initInjections(vm) // resolve injections before data/props

      initState(vm)
      initProvide(vm) // resolve provide after data/props
      callHook(vm, 'created')
      
      if (vm.$options.el) {
        vm.$mount(vm.$options.el)
      }
  }
}

Vue3.0 里为什么要用 Proxy api替代 defineProperty API？

1.defineProperty API 的局限性最大原因是它只能针对单例属性做监听。
Vue2.x中的响应式实现正是基于defineProperty中的descriptor，对 data 中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因。
2.Proxy API的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作， 这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
3.响应式是惰性的。
在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行 Object.defineProperty 把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。
在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。

Proxy 与 Object.defineProperty 优劣对比

vue中组件的data为什么是一个函数？而new Vue 实例里，data 可以直接是一个对象

我们知道，Vue组件其实就是一个Vue实例。
JS中的实例是通过构造函数来创建的，每个构造函数可以new出很多个实例，那么每个实例都会继承原型上的方法或属性。
Vue的data数据其实是Vue原型上的属性，数据存在于内存当中。Vue为了保证每个实例上的data数据的独立性，规定了必须使用函数，而不是对象。
因为使用对象的话，每个实例（组件）上使用的data数据是相互影响的，这当然就不是我们想要的了。对象是对于内存地址的引用，直接定义个对象的话组件之间都会使用这个对象，这样会造成组件之间数据相互影响。
使用函数后，使用的是data()函数，data()函数中的this指向的是当前实例本身，就不会相互影响了。
而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

vue中data的属性可以和methods中方法同名吗，为什么？

可以同名，methods的方法名会被data的属性覆盖；调试台也会出现报错信息，但是不影响执行；
原因：源码定义的initState函数内部执行的顺序：props>methods>data>computed>watch

//initState部分源码
export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }   
}

vue中created与mounted区别

在created阶段，实例已经被初始化，但是还没有挂载至el上，所以我们无法获取到对应的节点，但是此时我们是可以获取到vue中data与methods中的数据的；
在mounted阶段，vue的template成功挂载在$el中，此时一个完整的页面已经能够显示在浏览器中，所以在这个阶段，可以调用节点了；

//以下为测试vue部分生命函数，便于理解
beforeCreate(){  //创建前
    console.log('beforecreate:',document.getElementById('first'))//null
    console.log('data:',this.text);//undefined
    this.sayHello();//error:not a function
},
created(){  //创建后
    console.log('create:',document.getElementById('first'))//null
    console.log('data:',this.text);//this.text
    this.sayHello();//this.sayHello()
},
beforeMount(){ //挂载前
    console.log('beforeMount:',document.getElementById('first'))//null
    console.log('data:',this.text);//this.text
    this.sayHello();//this.sayHello()
},
mounted(){  //挂载后
    console.log('mounted:',document.getElementById('first'))//<p></p>
    console.log('data:',this.text);//this.text
    this.sayHello();//this.sayHello()
}

Vue中computed与method的区别

虚拟DOM中key的作用

为何 v-for 要用 key

必须要用 key, 而且不能用 index 和 random，key是vue中vnode的唯一标记，通过这个key，我们的diff操作可以更准确，更快速

在 diff 算法中用 tag 和 key来判断，是否是sameNode

可以减少渲染次数，提高渲染性能

用index作为key可能会引发的问题

注意！如果不存在对数据的逆序操作，仅用于渲染表用于展示，使用index作为key是没有问题的。

Vue中watch用法详解

watch: {
    name: {
      handler(newName, oldName) {
      
      },
      deep: true,
      immediate: true
    }
  }

vue中对mixins的理解和使用

为什么vue采用异步渲染

Vue 的异步更新机制是如何实现的？

$nextTick的理解

Vue中常用的一些指令

vue的自定义指令

全局指令： 通过 Vue.directive() 函数注册一个全局的指令。
局部指令：通过组件的 directives 属性，对该组件添加一个局部的指令。

创建全局指令：
需要传入指令名称以及一个包含指令钩子函数的对象，该对象的键即钩子函数的函数名，值即函数体，钩子函数可以有多个。

Vue.directive("focus", {
  inserted: function(el){
    el.focus();
  }
})

创建局部指令：
通过在Vue实例中添加 directives 对象数据注册局部自定义指令。

directives: {
  focus: {
    inserted: function(el){
      el.focus();
    }
  }
}

自定义指令的钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
name：指令名，不包括 v- 前缀。
value：指令的绑定值。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。
arg：传给指令的参数。
modifiers：一个包含修饰符的对象。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

防抖
图片懒加载
一键复制功能
...

v-show和v-if指令的共同点和不同点

总结：v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，如果要频繁切换某节点时，故v-show性能更好一点。

为什么避免v-if和v-for一起使用

Vue.set 改变数组和对象中的属性

vm.$set(obj, key, val) 做了什么？

为对象添加一个新的响应式数据：调用 defineReactive 方法为对象增加响应式数据，然后执行 dep.notify 进行依赖通知，更新视图
为数组添加一个新的响应式数据：通过 splice 方法实现

说说vue的生命周期的理解

beforecreate （初始化界面前）
created （初始化界面后）
beforemount （渲染界面前）
mounted （渲染界面后）
beforeUpdate （更新数据前）
updated （更新数据后）
beforedestory （卸载组件前）
destroyed （卸载组件后）

第一次页面加载会触发哪几个钩子？

Vue组件通信有哪些方式

1.父传子：props

父组件通过 props 向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed

2.子传父：通过事件形式

子组件通过 $emit()给父组件发送消息，父组件通过v-on绑定事件接收数据。

3.父组件通过$refs/$children来获取子组件值

$refs : 获取DOM元素和组件实例来获取组件的属性和方法。 通过在子组件上绑定ref，使用 this.$refs.refName.子组件属性 / 子组件方法 来获取子组件的属性方法。

$children : 当前实例的子组件，它返回的是一个子组件的集合。如果想获取哪个组件属性和方法，可以通过 this.$children[index].子组件属性/方法

4.跨组件之间传值

通过eventBus传递数据。使用前可以在全局定义一个eventBus，巧妙而轻量地实现了任何组件间的通信。

window.eventBus =new Vue();

在需要传递参数的组件中，定义一个emit发送需要传递的值，键名可以自己定义（可以为对象）

eventBus.$emit('eventBusName', id);

在需要接受参数的组件重，用on接受该值（或对象）

//val即为传递过来的值
eventBus.$on('eventBusName', function(val) {
  console.log(val)
})

eventBus.$off('eventBusName');

5.vuex

vuex 是 vue 的状态管理器，存储的数据是响应式的。只需要把共享的值放到vuex中，其他需要的组件直接获取使用即可；

6.provide 和 inject 实现父组件向子孙孙组件传值。(层级不限)

provide 和 inject 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

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

inject :是一个字符串数组 或者是一个对象，用来在子组件或者子孙组件中注入 provide 提供的父组件属性。

使用场景：

provide/inject可以轻松实现跨级访问父组件的数据

<template>
    <div>
        <h1>我是父组件</h1>
        <Son />
    </div>
</template>

<script>
import Son from '../components/son/SonOne'
    export default {
        name:'father',
        provide(){
            return {
                titleFather: '父组件的值'
            }
        },
        components:{
            Son
        },
        data(){
            return{
                title:'我是父组件 '
            }
        },
    }
</script>

<template>
    <div>
        <h1>我是子孙组件</h1>
    </div>
</template>
<script>
import SonTwo from '../son/SonTwo'
    export default {
        name:'sonone',
        components:{
           SonTwo
        },
        inject:['titleFather'],
        created(){
             console.log(`${this.titleFather}-----------SonTwo`)
        },
        data(){
            return{
                title:'我是子组件 '
            }
        },
    }
</script>

<template>
    <div>
        <h1>我是子孙组件</h1>
    </div>
</template>
<script>
import SonTwo from '../son/SonTwo'
    export default {
        name:'sonone',
        components:{
           SonTwo
        },
        inject:['titleFather'],
        created(){
             console.log(`${this.titleFather}-----------SonTwo`)
        },
        data(){
            return{
                title:'我是子组件 '
            }
        },
    }
</script>

routes: [
   {
        path: '/file',
        component: File,
        beforeEnter: (to, from ,next) => { 
             //do something
        }
    }
]

<router-link :to="{name:'home'}"></router-link>
<router-link :to="{path:'/home'}"></router-link>

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

<input type="text" v-model="message">
<!--等同于下面-->
<input type="text" v-bind:value="message" v-on:input="message=$event.target.value">

1. 事件绑定
我们通过 v-on/@:(+事件名).(+事件修饰符)=“函数事件名(参数可传/不传)”
2. 事件修饰符

<!-- 阻止冒泡事件 -->
<a @click.stop="Fn"></a>

<!-- 阻止浏览器默认事件 -->
<a @click.prevent="Fn"></a>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="Fn"></a>

<!-- 捕获事件 -->
<a @click.capture="Fn"></a>

<!-- 只执行当前事件 -->
<a @click.self="Fn"></a>

<!-- 点击事件的默认行为 将会立即触发 -->
<p @click.passive="Fn"></p>

注意：执行栈的顺序，否则会产生影响。

用v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent 只会阻止对元素的点击

无法使用v-on监听element-ui中el-input的事件

原因： 封装了input，input不是根组件，加上.native即可，比如：v-on:keyup.enter.native。

Vue判断当前是开发环境、还是生产环境

有时我们需要在代码中判断目前项目是处于开发环境、还是生产环境，然后根据不同环境执行不同的逻辑代码。下面是一个简单的样例：

if (process.env.NODE_ENV === "development") {
  alert("开发环境");
}

在项目的 config 文件夹下有 dev.env.js 和 prod.env.js 两个文件，它们分别配置开发环境的变量和生产环境的变量，打开 dev.env.js 文件，可以看到 NODE_ENV 变量值为 development。

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

 在prod.env.js 文件，可以看到 NODE_ENV 变量值为 production。

链接: https://fly63.com/article/detial/10578