Vue 面试题总结

1. Vue 框架的优点是什么？

（1）轻量级框架：只关注视图层，大小只有几十Kb；

    （2）简单易学：文档通顺清晰，语法简单；

    （3）数据双向绑定，数据视图结构分离，仅需操作数据即可完成页面相应的更新；

    （4）组件化开发：工程结构清晰，代码维护方便；

    （5）虚拟 DOM加载 HTML 节点，运行效率高。

2. 什么是 MVVM？

MVVM 是Model-View-ModelView的缩写，是一种脱胎于 MVC 模式的设计模式。

    Model 代表数据层，负责存放业务相关的数据；

    View 代表视图层，负责在页面上展示数据；

    ViewModel 是的作用是同步 View 和 Model 之间的关联，其实现同步关联的核心是DOM Listeners和 Data Bindings两个工具。DOMListeners 工具用于监听 View 中 DOM 的变化，并会选择性的传给 Model；Data Bindings 工具用于监听 Model 数据变化，并将其更新给 View。

3. Vue 中组件之间传值的方法有哪些？

父组件向子组件传值：

（1）父组件在子组件标签中绑定自定义属性；

        （2）子组件通过 props 属性进行接收。

//父组件
export default { components:{ Child } }
<Child :name="123" />

//子组件
export default { props: ["name"]//此处亦可指定数据类型 }

子组件向父组件传值：

（1）在父组件在子组件标签中绑定自定义事件；

        （2）子组件通过this.$emit()方法触发自定义事件，传值给父组件。

//父组件
export default { components:{ Child }, data:{ name:"123" }, methods:{ changeName(value){
this.name = value } } }
<Child @changeName="changeName" />

//子组件
export default { methods:{ changeParentName:(value)=>{ this.$emit("changeName","456") } } }
<button @click="changeParentName">改变父组件的name</button>

兄弟组件之间传值：

（1）共同传给父组件，再由父组件分发（状态提升）；

        （2）使用Vuex；

        （3）利用bus 事件总线。

let bus = new Vue()
A组件：methods :{ 函数{bus.$emit(‘自定义事件名’，数据)} //发送
B组件：created(){bus.$on(‘A发送过来的自定义事件名’，函数)} //进行数据接收

4. Vue 中常见的生命周期钩子函数有哪些？

Vue 中常见的生命周期钩子函数总共有八个：

（1）创建阶段

        BeforeCreate：该函数在 Vue 实例初始化后，组件创建、数据监测(data observer)、watch/event 事件配置前调用。此时不能访问 data、ref，Vue 实例对象上仅有生命周期函数及部分默认事件。

        Created：该函数在 Vue 组件创建完成后调用。此时数据监测、事件配置已完成，data 对象已可访问，但组件尚未被渲染成 HTML 模板，ref 仍为 undefined，$el 尚不可用。

如此阶段要对 DOM 进行操作，就应将操作放在 Vue.nextTick 的回调函数中。因为此阶段 DOM 尚未被渲染，无法执行 DOM 操作。Vue.nextTick 会在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后可以获取更新后的 DOM。

（2）挂载阶段

        BeforeMount：该函数在组件挂载前调用，此时 HTML 模板编译已完成，虚拟 DOM 已存在，$el 为可用状态，但 ref 仍不可用。

一般在此阶段进行初始数据的获取操作。

Mounted：该函数在组件挂载完成后调用。此时$el元素已被vm.$el替代，ref可进行操作。

一般在此阶段进行异步请求的发送操作。mounted 不会保证所有的子组件也都一起被挂载。如果希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick。

（3）更新阶段

        BeforeUpdate：该函数在数据更新、虚拟 DOM 打补丁前调用。

此阶段适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

Updated：该函数在数据更新、虚拟 DOM 打补丁完成后调用。

（4）卸载阶段

        BeforeDestory：该函数在实例销毁前调用，此时实例完全可用，ref 仍然存在。

一般在此阶段进行性能优化操作，如清除定时器，防止内存泄露。

Destroyed：该函数在实例销毁后调用，此时 Vue 里的所有指令均被解绑，所有事件监听器已被移除，ref 状态为 undefined。

组件销毁时，先销毁父组件，再销毁子组件。

针对 keep-alive 组件还有两个钩子函数：

        activated：在被 keep-alive 缓存的组件激活时调用。

        deactivated：在被 keep-alive 缓存的组件停用时调用。

还有一个错误处理捕获函数：

        errorCaptured：在捕获到一个来自子孙组件的错误时调用。

5. 为什么 Vue 组件中 data 必须是一个函数？

如果 data 是一个对象，当复用组件时，因为 data 都会指向同一个引用类型地址，其中一个组件的 data 一旦发生修改，则其他重用的组件中的 data 也会被一并修改。

    如果 data 是一个返回对象的函数，因为每次重用组件时返回的都是一个新对象，引用地址不同，便不会出现如上问题。

6. Vue 中 v-if 和 v-show 有什么区别？

v-if 在进行切换时，会直接对标签进行创建或销毁，不显示的标签不会加载在 DOM 树中。v-show 在进行切换时，会对标签的 display 属性进行切换，通过 display 不显示来隐藏元素。

    一般来说，v-if 的性能开销会比 v-show 大，切换频繁的标签更适合使用 v-show。

7. Vue 中 computed 和 watch 有什么区别？

计算属性 computed：

        （1）支持缓存，只有依赖数据发生变化时，才会重新进行计算函数；

        （2）计算属性内不支持异步操作；

        （3）计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法；

        （4）计算属性是自动监听依赖值的变化，从而动态返回内容。

侦听属性 watch：

        （1）不支持缓存，只要数据发生变化，就会执行侦听函数；

        （2）侦听属性内支持异步操作；

        （3）侦听属性的值可以是一个对象，接收 handler 回调，deep，immediate 三个属性；

        （3）监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情。

watch: {
	obj: {
    	//handler接收两个参数（newVal：新值，oldVal：旧值
    	handler: function(newVal, oldVal){
    		console.log(newVal);
		},
	deep: true,//设置为true时会监听对象内部值的变化；
	immediate: true//设置为true时会立即以表达式的当前值触发回调；
	}
}

使用 immediate 可以优化以下场景：组件创建的时候立即获取一次列表的数据，同时监听<input/>框，每当发生变化的时候重新获取一次筛选后的列表。

//优化前
created(){
	this.fetchPostList()
	},
watch: {
	searchInputValue(){ this.fetchPostList() }
	}
//优化后
watch: {
	searchInputValue:{ handler: 'fetchPostList', immediate: true }
	}

8. $nextTick 是什么？

Vue 实现响应式并不是在数据发生后立即更新 DOM，使用 vm.$nextTick 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用，则可以在回调中获取更新后的 DOM。

9. v-for 中 key 的作用是什么？

key 是 Vue 使用 v-for 渲染列表时的节点标识。使用了 key 之后，当列表项发生变化时，Vue 会基于 key 的变化而重新排列元素顺序，并且移除 key 不存在的元素，提升运行效率。

10. Vue 的双向数据绑定原理是什么？

Vue 采用数据劫持+订阅发布模式实现双向绑定。通过 Object.defineProperty()方法来为组件中 data 的每个属性添加 get 和 set 方法，在数据变动时，触发 set 里相应的监听回调函数，将变动信息发布给订阅者。主要有以下步骤：

    （1）组件初始化时：

        a. 创建一个dep 对象作为观察者（依赖收集、订阅发布的载体）；

        b. 通过Object.defineProperty()方法对 data 中的属性及子属性对象的属性，添加 getter 和 setter 方法； 调用 getter 时，便去 dep 里注册函数。调用 setter 时，便去通知执行刚刚注册的函数。



    （2）组件挂载时：

        a. compile解析模板指令，将其中的变量替换成数据。然后初始化渲染页面视图，并将每个指令对应的节点绑定上更新函数、监听函数。后续一旦数据发生变化，便会更新页面。页面发生变化时也会相应发布变动信息；

        b. 组件同时会定义一个watcher 类作为订阅者，watcher 可以视作 dep 和组件之间的桥梁。其在实例化时会向 dep 中添加自己，同时自身又有一个 update 方法，待收到 dep 的变动通知时，便会调用自己的 update 方法，触发 compile 中的相应函数完成更新。

11. 如何动态更新对象或数组的值？

因为 Object.defineProperty()的限制，Vue 无法监听到对象或数组内部某个属性值的变化，因此在直接设置以上两类数据的值时，页面不会实时更新。此时可以通过 this.$set 方法来解决：

//this.$set(要改变的数组/对象，要改变的位置/key，要改成的value) this.$set(this.arr, 0, "OBKoro1");
// 改变数组 this.$set(this.obj, "c", "OBKoro1"); // 改变对象

数组原生方法造成的数据更新，可以被 Vue 监听到。如 splice()push()pop()等。

12. 常用的事件修饰符有哪些？

.stop：阻止冒泡；

    .prevent：阻止默认行为；

    .self：仅绑定元素自身可触发；

    .once：只触发一次..

13. Vue 如何获取 DOM 元素？

首先先为标签元素设置 ref 属性，然后通过 this.$refs.属性值获取。

<div ref="test"></div>

const dom = this.$refs.test

14. v-on 如何绑定多个事件？

可以通过 v-on 传入对象来绑定多个事件：

<!--单事件绑定-->
<input type="text" @click="onClick">
<!--多事件绑定-->
<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur }">

15. Vue 初始化页面闪动问题如何解决？

出现该问题是因为在 Vue 代码尚未被解析之前，尚无法控制页面中 DOM 的显示，所以会看见模板字符串等代码。

    解决方案是，在 css 代码中添加 v-cloak 规则，同时在待编译的标签上添加 v-cloak 属性：

[v-cloak] { display: none; }

<div v-cloak>
  {{ message }}
</div>

16. Vue 如何清除浏览器缓存？

（1）项目打包的时候给每个打包文件加上 hash 值，一般是在文件后面加上时间戳；

        （2）在 html 文件中加入 meta 标签，content 属性设置为no-cache;

        （3） 在后端服务器中进行禁止缓存设置。

17. Vue-router 路由有哪些模式？

一般有两种模式：

        （1）hash 模式：后面的 hash 值的变化，浏览器既不会向服务器发出请求，浏览器也不会刷新，每次 hash 值的变化会触发 hashchange 事件。

        （2）history 模式：利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

18. Vue-cli 项目中每个文件夹和文件的用处大致是什么？

（1）bulid 文件夹：存放 webpack 的相关配置以及脚本文件，实际开发中一般用来配置 less、babel 和配置 webpack.base.config.js 文件。

        （2）config 文件夹：常用到此文件夹下的 config.js (index.js) 配置开发环境的端口号，是否开启热加载或者设置生产环境的静态资源相对路径、是否开启 gzip 压缩、npm run build 命令打包生成静态资源的名称和路径等。

        （3）node_modules 文件夹：存放 npm install 命令下载的开发环境和生产环境的各种依赖。

        （4）src 文件夹 ：存放组件源码、图片样式资源、入口文件、路由配置等。

19. Vue-cli 项目中 assets 和 static 文件夹有什么区别？

两者都是用于存放项目中所使用的静态资源文件的文件夹。其区别在于：

    ** assets 中的文件在运行 npm run build 的时候会打包，简单来说就是会被压缩体积，代码格式化之类的。打包之后也会放到 static 中。static 中的文件则不会被打包**。

将图片等未处理的文件放在assets中，打包减少体积。而对于第三方引入的一些资源文件如iconfont.css等可以放在static中，因为这些文件已经经过处理了。

20. Vuex 是什么？有哪几种属性？

Vuex 是专为Vue设计的状态管理工具，采用集中式储存管理 Vue 中所有组件的状态。

（1）state属性：基本数据；

        （2）getters属性：从 state 中派生出的数据；

        （3）mutation属性：更新 store 中数据的唯一途径，其接收一个以 state 为第一参数的回调函数；

const store = new Vuex.Store({
  state: {
    count: 1,
  },
  mutations: {
    increment(state) {
      // 变更状态
      state.count++;
    },
  },
});

（4）action 属性：提交 mutation 以更改 state，其中可以包含异步操作；

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment2(context) {
      context.commit('increment');
    },
    fun(context) {
      context.dispatch('increment2');
    },
  },
});

（5）module 属性：用于将 store分割成不同的模块。

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态