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 尚不可用。

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

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

    （3）更新阶段
        BeforeUpdate：该函数在数据更新、虚拟 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时会立即以表达式的当前值触发回调； 
	} 
}

//优化前 
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"); // 改变对象

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 中的文件则不会被打包。

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 的状态