1.什么是Vue
- Vue是一套渐进式的JavaScript框架，以数据为核心，使用数据来驱动视图刷新；
- 通过MVVM模式（全称为Model-View-ViewModel）,实现数据[双向数据绑定]；
2.MVVM,MVC模型
- 在MVVM中，View为视图层，ViewModel为业务逻辑层，Model为数据层。
- 当用户使View变化时（如填写表单），变化会自动同步到ViewModel处理相应逻辑，并将变化更新到Model数据库。
- 反之，若服务端数据变化（如股价波动），变化会自动同步到ViewModel处理相应逻辑，并将变化同步到View展现给用户。
- 在用Vue之前，完成HTML和JS之间的交互需要使用大量的DOM操作来实现动态加载。
- MVVM的数据双向绑定减少了DOM操作，更高效地实现了视图和数据的交互。
3.Vue双向数据绑定的原理
- 实现mvvm的双向绑定，是采用数据劫持结合发布者订阅者模式的方式，
- 通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
4.什么是SPA，优缺点，如何实现
SPA就是单页应用程序，它通过动态重写当前页面来与用户交互，这种方法避免了页面切换打断用户的体验； 优点：
- 具有桌面应用的即时性、网站的可移植性和可访问性
- 用户体验好、快，内容的改变不需要重新加载整个页面
- 良好的前后端分离，分工更明确
缺点：
- 不利于搜索引擎的抓取
- 首次渲染速度相对较慢
5.Vue生命周期的理解
- 生命周期过程为创建 -> 挂载 -> 更新 -> 销毁。开发者可以通过钩子函数在组件生命周期中的不同时刻进行操作。
- 1.beforeCreate：会在实例初始化完成,可以获取数据及方法,不能获得DOM节点;
- 2.created：vue实例已经创建,可以获取数据及方法,不能获得DOM节点;
- 3.beforeMount：在组件内容被渲染到页面之前自动执行的函数，组件已经完成了其响应式状态的设置，但还没有创建DOM节点。
- 4.mounted：数据和DOM都已被渲染出来,能获得DOM节点。
- 5.beforeUpdate：数据变化的时候自动执行的函数，此时变化后的数据还未渲染到页面之上。.
- 6.updated： 数据变化之后自动执行的函数，此时变化后的数据已经渲染到页面之上。
- 7.beforeUnmount： 当 Vue 应用被销毁时，自动执行的函数。
- 8.unmounted：当 Vue 应用被销毁后，自动执行的函数。
6.什么是虚拟DOM，如何理解
- 虚拟DOM就是普通的js对象。是一个用来描述真实dom结构的js对象，因为它不是真实的dom，所以才叫做虚拟dom。
- 在vue中，每个组件都有一个
render函数，每个render函数都会返回一个虚拟dom树，这也就意味着每个组件都对应一棵虚拟DOM树 - 真实
DOM的创建、更新、插入等操作会带来大量的性能损耗，从而就会极大的降低渲染效率； vue在渲染时，使用虚拟dom来替代真实dom，主要为解决渲染效率的问题。
7.对diff算法的理解
diff算法是一种通过同层的树节点进行比较的高效算法，它可以不用频繁操作DOM，而是选用虚拟DOM节点操作，说人话就是专门用来处理虚拟DOM节点的。
特点：1.深度优先，同层比较；2.比较过程是循环着从两边向中间比较；
8.v-show跟v-if的区别，使用场景
二者都是控制元素显示跟隐藏的方法，区别在于v-show控制的元素始终真是存在，v-if控制的元素处于创建跟销毁两种状态，所以v-if开销大，我们要处理好使用场景； 频繁切换显示隐藏状态的元素，使用V-show；反义V-if；
9.V-for循环为什么一定要绑定KEY
因为加了key的列表项代表了唯一性，能够加速虚拟dom的比对，实现高效的页面渲染；
10.V-if与V-for同时使用会发生什么？
v-for和v-if不应该一起使用。
原因：v-for比v-if优先，即每一次都需要遍历整个[数组]，影响速度，非常耗资源。
处理方法：1.利用computed计算器属性提前处理数据；2.使用V-show代替V-if；
11.async await 是什么？他有那些作用
async/await是es7里处理异步非阻塞问题的新语法；async 用于申明一个 function 是异步的，而 await用于等待一个异步方法执行完成。它可以很好的替代Promise 中的then； 场景：在方法a中调用了方法b，并且需要方法b中的接口的返回值，但是在程序运行中，方法a已经执行晚了，方法b的接口才刚返回数据，造成方法阿执行错误，这样的问题就是异步问题；
12.组件中的data为什么要定义成一个函数而不是一个对象
因为对象会继承原型上的方法或属性； vue为了保证每个实例上的data数据的独立性，规定了必须使用函数，而不是对象。
13.Vue的组件与插件有什么区别
使用场景不同： 组件： 用来整理我们的业务模块，提高代码的复用率跟可维护性； 插件： 用来弥补Vue框架本身的缺陷跟不足，vue-router、Vue-x。
14.Vue中组件间通信方法有哪些
1.父子组件通讯 父组件向子组件通讯使用props方法传递数据；子组件向父组件通讯使用事件触发，使用的是parent + $refs 以父组件为中间人来获取到兄弟组件，也可以进行通信。 3.任意组件通讯 vuex进行全局状态管理实现通讯；
15.Vue中 computed 和watch 的区别是什么？
computed是计算机属性，一般预处理一些复杂数据，主要任务是处理数据； watch是监听，主要任务是监听数据变化，根据数据变化进行操作； 区别： 1.computed页面初始化就会执行，watch默认不执行（deep深度监听模式下才会执行）； 2.computed无法监听异步变化，watch可以监听到异步变化；
16.什么是nextTick?有什么用？
vue实现响应式并不是数据发生改变之后DOM立即变化，而是按一定的策略进行DOM更新，nextTick就是DOM渲染更新完毕后的回调通知； 使用场景： 1.动态获取dom元素的宽高； 2.初始化绑定或操作DOM;
17.对Vue的mixin（混入）的理解
- 混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
- 混入对象通常为一个js文件，每个组件可以通用js里的属性跟方法，在混入的过程中有几个特点：
- 1.属性方法不冲突的时候，混入在当前组件里为合并状态；
- 2.属性方法在组件内发生冲突的时候，以组件里的属性方法优先；
- 3.多个组件混入同一文件，内部相互独立，互不影响；
- 缺点：1.容易造成命名冲突；2.使用较多混入，查找数据源较为困难，数据来源不清晰；
18.对Vue的slot（插槽）的理解
Vue使用slot的作用是做内容分发。所谓的内容分发其实就是将父组件的内容放到子组件指定的位置叫做内容分发。 当我们在不确定当前位置需要放置什么东西的时候，可以先用slot占位，然后根据业务场景在不同情况下在插槽内放置不同的元素； 场景：购物场景顶部的图片/视频/轮播；
19.对vuex的理解
- Vuex 可以帮助我们进行全局状态的管理，解决跨组件之间的通讯；
- 应用场景：音乐器的播放；
- vuex中一共有五个状态 State Getter Mutation Action Module
- state：相似data，储存共享的数据；
- Getter：相似computed，加工处理形成新的数据；
- Mutation：定义函数方法，操作state的数据发放；
- Action：处理异步方法；
- Modules：大型项目state太多，可以使用Modules进行模块化分割；
20.对Keep-alive的理解
keep-alive是系统自带的一个组件，用来缓存组件，避免多次加载相同的组件，减少性能消耗，提高用户体验。
场景：列表页进入详情页，如果在列表页点击的都是相同的，可以使用keep-alive进行缓存；
21.Vue中常见的修饰符有哪些？应用场景
1.once：绑定了事件以后只能触发一次，第二次就不会触发
<button @click.once="shout(1)">ok</button>
2.stop：阻止了事件冒泡
<button @click.stop="shout(1)">ok</button>
3.表单修饰符 number：输入值转为数值类型； trim：自动过滤首格空格
<input v-model.number="age" type="number">
<input type="text" v-model.trim="value">
22.如何实现自定义事件
父子组件通信时，子组件的$emit方法可以实现
23.什么是filter（过滤器），应用场景
格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等
24.Vue项目中封装axios
不会
25.Vue的权限管理
不会 服务端控制
26.什么是跨域？Vue如何解决跨域
浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域； 如何解决？ 1.使用jsonp实现跨域； 2.vue.config.js文件中，在proxy设置跨域配置；
27.Vue性能优化
- 1.代码层面的优化：
v-if 和 v-show 区分使用场景
v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
长列表性能优化，纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，Object.freeze 方法来冻结一个对象
图片资源懒加载-vue-lazyload
路由懒加载，提高首屏显示的速度
组件化，提取公共组件 - 2.webpack 配置层面的优化； 使用Webpack 对图片进行压缩-image-webpack-loader 提取公共代码，避免同一库的重复加载；
- 3.其他技术手段 1.浏览器进行数据缓存；2.使用CDN加载不同数据，提高资源加载速度；
28.Vue2与vue3的区别
1.双向数据绑定原理发生了改变：vue2的双向数据绑定是利用了Object.definepropert() 对数据进行劫持结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。 2.生命周期发生了变化； 3.父子组件之间的通讯变化；
