Vue常见面试题

时间 2019-11-17

原文原文链接

总结：

vue 的优势是什么？

低耦合。视图（View）能够独立于 Model 变化和修改，一个 ViewModel 能够绑定到不一样的"View"上，当 View 变化的时候 Model 能够不变，当 Model 变化的时候 View 也能够不变。
可重用性。你能够把一些视图逻辑放在一个 ViewModel 里面，让不少 view 重用这段视图逻辑。
独立开发。开发人员能够专一于业务逻辑和数据的开发（ViewModel），设计人员能够专一于页面设计，使用 Expression Blend 能够很容易设计界面并生成 xml 代码。
可测试。界面素来是比较难于测试的，而如今测试能够针对 ViewModel 来写。

什么是 mvvm？

MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层表明数据模型，也能够在 Model 中定义数据修改和操做的业务逻辑；View 表明 UI 组件，它负责将数据模型转化成 UI 展示出来，ViewModel 是一个同步 View 和 Model 的对象。html

在 MVVM 架构下，View 和 Model 之间并无直接的联系，而是经过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，所以 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会当即反应到 View 上。前端

ViewModel 经过双向数据绑定把 View 层和 Model 层链接了起来，而 View 和 Model 之间的同步工做彻底是自动的，无需人为干涉，所以开发者只需关注业务逻辑，不须要手动操做 DOM, 不须要关注数据状态的同步问题，复杂的数据状态维护彻底由 MVVM 来统一管理。vue

mvvm 和 mvc 区别？

MVC与MVVM都是前端web开发的框架模式webpack

MVC（Model View Controller 模型-视图-控制器）是一种Web架构的模式。通讯是单向的：浏览器发送请求，Model和Contorller交互获取数据，Contorller调用View，View渲染数据返回。ios

MVVM（Model-View-ViewModel），是一种基于前端开发的架构模式。核心是提供对View 和 Model 的双向数据绑定，View和Model之间并无直接的联系，而是经过ViewModel(VM)进行交互，View的变更，自动反映在Model上，反之亦然，这样就保证视图和数据的一致性。web

vue生命周期的理解？

答：vue在使用过程当中，分为多个阶段，具备建立、运行、销毁。ajax

建立阶段：beforeCreate: 建立以前，data和methods还没有初始化。vue-router

created: data和methods已经建立，能够被访问，此处能够发送ajax请求，并给data作数据初始化。（数据放在了实例身上，但尚未渲染DOM,el尚未）。vuex

　　　　　　beforeMount:: 容器内容仍是原始的vue指令内容，尚未被vue作数据渲染，没被替换。npm

　　　　　　mounted: 页面刚被vue渲染完毕，若是要操做DOM，此处是最好的选择。

　运行阶段：beforeUpdate: vue虚拟数据是最新的，可是页面仍是旧的，出现变化时执行，在变化以前触发。

updated: 页面和数据都是最新的，出现变化后执行。

销毁阶段：beforeDestroy: 将要销毁，销毁以前阶段，实例还正常使用。

destroyed: 销毁以后，实例不在工做了。

组件之间的传值？

1. 父子组件通讯

基本方法（推荐）：
a. 父 => 子：使用prop向子组件传递静态或动态的数据，如：<blog-post :title="vue"></blog-post>，注意传递的数据须要在子组件用props属性接收。（父元素经过标签进行属性传值，子元素经过props方法接收数据）
b. 子 => 父：使用 v-on:event 和 $emit。再在子组件中调用 $emit 触发事件，父组件使用 v-on 或 @ 对子组件传递事件进行监听，注意传递的事件不须要在子组件的props中接收。
父子组件链（不推荐）：
a. 父 => 子：使用 this.$children 访问或递归访问其子孙组件。
b. 子 => 父：使用 this.$parent 访问或递归访问其父级组件，直至根组件。
子组件索引：
a. 父 => 子：用 ref 属性为子组件指定一个索引名称，在父组件中经过 this.$ref[name] 访问ref为name的子组件。

2. 爷孙组件通讯

父子嵌套：
a. 使用嵌套的父子通讯进行层级传递便可。
依赖注入：
a. 父级组件定义 provide 函数返回提供的数据，子孙后代组件使用 inject 属性接收上层组件provide的数据。

3. 任意组件通讯

事件总线eventBus：

在bus.js文件中建立一个空的Vue实例 import Vue from 'vue'； export default new Vue()；做为中央事件总线；
在须要传值的组件中引入公共的bus.js来作为中间传达的工具: import Bus from './bus.js'
使用 Bus.$emit('event', data) 触发一个自定义事件，并传递数据；
在须要接收数据的组件中使用 Bus.$on('event', data => { console.log(data) }) 监听自定义事件，并在回调函数中处理传递过来的数据。

使用vuex

建立一个全局state管理的 store；
组件中使用 this.$store.state 访问 state；
组件中使用 commit mutation 或者 dispatch action 来更新store里的数据

说出至少 4 种 vue 当中的指令和它的用法

v-if(判断是否隐藏)、v-for(把数据遍历出来)、v-bind(绑定属性)、v-model(实现双向绑定)

vue 的双向绑定的原理是什么(常考)

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，经过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变更时发布消息给订阅者，触发相应的监听回调。

具体步骤：
第一步：须要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化

第二步：compile 解析模板指令，将模板中的变量替换成数据，而后初始化渲染页面视图，并将每一个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变更，收到通知，更新视图

第三步：Watcher 订阅者是 Observer 和 Compile 之间通讯的桥梁，主要作的事情是:

在自身实例化时往属性订阅器(dep)里面添加本身
自身必须有一个 update()方法
待属性变更 dep.notice()通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。

第四步：MVVM 做为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，经过 Observer 来监听本身的 model 数据变化，经过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通讯桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变动的双向绑定效果。

active-class 是哪一个组件的属性？

vue-router 模块的 router-link 组件。

嵌套路由怎么定义？

在实际项目中咱们会碰到多层嵌套的组件组合而成，可是咱们如何实现嵌套路由呢？所以咱们须要在 VueRouter 的参数中使用 children 配置，这样就能够很好的实现路由嵌套。
index.html，只有一个路由出口

<div id="app">
    <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

main.js，路由的重定向，就会在页面一加载的时候，就会将 home 组件显示出来，由于重定向指向了 home 组件，redirect 的指向与 path 的必须一致。children 里面是子路由，固然子路由里面还能够继续嵌套子路由。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//引入两个组件

import home from "./home.vue"
import game from "./game.vue"
//定义路由
const routes = [
    { path: "/", redirect: "/home" },//重定向,指向了home组件
    {
        path: "/home", component: home,
        children: [
            { path: "/home/game", component: game }
        ]
    }
]
//建立路由实例
const router = new VueRouter({routes})

new Vue({
    el: '#app',
    data: {
    },
    methods: {
    },
    router
})

home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，不然子路由没法显示。

路由之间跳转？

声明式（标签跳转）
编程式（ js 跳转） router.push('index')

懒加载（按需加载路由）（常考）

webpack 中提供了 require.ensure()来实现按需加载。之前引入路由是经过 import 这样的方式引入，改成 const 定义的方式进行引入。

不进行页面按需加载引入方式：

import  home   from '../../common/home.vue'

进行页面按需加载的引入方式

const  home = r => require.ensure( [], () => r (require('../../common/home.vue')))

vuex 是什么？怎么使用？哪一种功能场景使用它？

vue 框架中状态管理。在 main.js 引入 store，注入。新建了一个目录 store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登陆状态、加入购物车

// 新建 store.js
import vue from 'vue'
import vuex form 'vuex'
vue.use(vuex)
export default new vuex.store({
    //...code
})

//main.js
import store from './store'
...

vuex 有哪几种属性

有 5 种，分别是 state、getter、mutation、action、module

vuex 的 store 特性是什么

vuex 就是一个仓库，仓库里放了不少对象。其中 state 就是数据源存放地，对应于通常 vue 对象里面的 data
state 里面存放的数据是响应式的，vue 组件从 store 读取数据，如果 store 中的数据发生改变，依赖这相数据的组件也会发生更新
它经过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

vuex 的 getter 特性是什么

getter 能够对 state 进行计算操做，它就是 store 的计算属性
虽然在组件内也能够作计算属性，可是 getters 能够在多给件之间复用
若是一个状态只在一个组件内使用，是能够不用 getters

vuex 的 mutation 特性是什么

action 相似于 muation, 不一样在于：action 提交的是 mutation,而不是直接变动状态
action 能够包含任意异步操做

vue 中 ajax 请求代码应该写在组件的 methods 中仍是 vuex 的 action 中

若是请求来的数据不是要被其余组件公用，仅仅在请求的组件内使用，就不须要放入 vuex 的 state 里

若是被其余地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回

不用 vuex 会带来什么问题

可维护性会降低，你要修改数据，你得维护 3 个地方
可读性降低，由于一个组件里的数据，你根本就看不出来是从哪里来的
增长耦合，大量的上传派发，会让耦合性大大的增长，原本 Vue 用 Component 就是为了减小耦合，如今这么用，和组件化的初衷相背

vuex 原理

vuex 仅仅是做为 vue 的一个插件而存在，不像 Redux,MobX 等库能够应用于全部框架，vuex 只能使用在 vue 上，很大的程度是由于其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，

vuex 总体思想诞生于 flux,可其的实现方式完彻底全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工做原理，vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件；

使用 Vuex 只需执行 Vue.use(Vuex)，并在 Vue 的配置中传入一个 store 对象的示例，store 是如何实现注入的？

Vue.use(Vuex) 方法执行的是 install 方法，它实现了 Vue 实例对象的 init 方法封装和注入，使传入的 store 对象被设置到 Vue 上下文环境的store中。所以在VueComponent任意地方都可以经过this.store 访问到该 store。

state 内部支持模块配置和模块嵌套，如何实现的？美团

在 store 构造方法中有 makeLocalContext 方法，全部 module 都会有一个 local context，根据配置时的 path 进行匹配。因此执行如 dispatch('submitOrder', payload)这类 action 时，默认的拿到都是 module 的 local state，若是要访问最外层或者是其余 module 的 state，只能从 rootState 按照 path 路径逐步进行访问。

在执行 dispatch 触发 action(commit 同理)的时候，只需传入(type, payload)，action 执行函数中第一个参数 store 从哪里获取的？

store 初始化时，全部配置的 action 和 mutation 以及 getters 均被封装过。在执行如 dispatch('submitOrder', payload)的时候，actions 中 type 为 submitOrder 的全部处理方法都是被封装后的，其第一个参数为当前的 store 对象，因此可以获取到 { dispatch, commit, state, rootState } 等数据。

Vuex 如何区分 state 是外部直接修改，仍是经过 mutation 方法修改的？

Vuex 中修改 state 的惟一渠道就是执行 commit('xx', payload) 方法，其底层经过执行 this._withCommit(fn) 设置_committing 标志变量为 true，而后才能修改 state，修改完毕还须要还原_committing 变量。外部修改虽然可以直接修改 state，可是并无修改_committing 标志位，因此只要 watch 一下 state，state change 时判断是否_committing 值为 true，便可判断修改的合法性。

调试时的"时空穿梭"功能是如何实现的？

devtoolPlugin 中提供了此功能。由于 dev 模式下全部的 state change 都会被记录下来，'时空穿梭' 功能其实就是将当前的 state 替换为记录中某个时刻的 state 状态，利用 store.replaceState(targetState) 方法将执行 this._vm.state = state 实现。

axios 是什么？怎么使用？描述使用它实现登陆功能的流程

axios 是请求后台资源的模块。 npm i axios -S

若是发送的是跨域请求，需在配置文件中 config/index.js 进行配置

vue-router 有哪几种导航钩子?

三种

全局导航钩子
router.beforeEach(to, from, next),
router.beforeResolve(to, from, next),
router.afterEach(to, from ,next)
组件内钩子
beforeRouteEnter,
beforeRouteUpdate,
beforeRouteLeave
单独路由独享组件
beforeEnter

自定义指令(v-check, v-focus) 的方法有哪些? 它有哪些钩子函数? 还有哪些钩子函数参数

全局定义指令：在 vue 对象的 directive 方法里面有两个参数, 一个是指令名称, 另外一个是函数。
组件内定义指令：directives
钩子函数: bind(绑定事件出发)、inserted(节点插入时候触发)、update(组件内相关更新)
钩子函数参数： el、binding