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 的状态复制代码
