vue部分面试问题整理
概念性问题
1:什么是MVVM？什么是MVC？他们有什么区别？
MVVM：是Model-View-ViewModel的缩写，Model 模型指向后端传递的数据。View视图指我们所看到的视图层。ViewModel视图模型。视图模型是MVVM的核心，他是链接Model和View的桥梁。一方面把Model转换成View层，实现方式是：数据绑定。一方面把View转换成Model（数据），即将所看到的视图转换成向后端传递的数据。实现方式：DOM事件监听。这两方面都可以实现，所以我们也成为它是双向数据绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。
MVC：MVC是Model-View- Controller的简写，即模型-视图-控制器，M和V和MVVM中的M和V是一样的。C是Controller即页面义务逻辑。使用MVC的目的就是为了M和V代码分离。MVVM的VM并不是完全取代C，VM存在的目的是抽离C中的业务逻辑
区别：最主要的区别是在链接V和M的这条纽带上。MVC是单向的数据传递。MVVM是双向的数据绑定，主要解决了MVC中大量的DOM操作是页面的渲染性能降低，加载速度变慢，影响用户体验。
2：Vue与其它的MVVM框架的差异区别等
MVVM模式的三款框架：Vue，Angular，Avalon。
1：Vue是尤雨溪老师开发的，不支持IE8，是一个新生儿，2014年才发布没有Angular那么成熟，影响程度不是很大。但是简单易学官方文档很清晰，强大，对模块很友好，能够快速的更新DOM
2:Angular：是一个比较完善的前端MVW框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等所有功能，模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令。但是太大又很全面学习起来就比较困难。同样不支持IE8
3：Avalon使用简单，没有任何依赖，兼容IE6。自带AMD模块加载器，省得与其他加载器进行整合。
3：双向数据绑定的原理
Vue.js是通过数据劫持结合发布者-订阅者模式的方式来实现的。用户操作会更改某个属性的值，而通过重写该属性的set方法，对数据进行劫持监听，可以在每次值更新的时候，执行重写的set方法内的指定操作。这里的指定操作即是判断数据是否更新，是否需要更新视图。如果确认更新则修改当前视图。
4：Vue的应用场景那些？
Pc网站 微信小程序 移动App 桌面端应用
5：为什么选Vue进行项目开发
Vue是一个以数据驱动为核心的渐进式MVVM模式框架。采用了虚拟DOM,diff算法，在页面的渲染上性能要好一些。同时他还是一个高性能，轻巧，可组件化的库，并且拥有非常易用上手的API库。
通用
6:常见的事件的修饰符
Vue提倡的是在方法中只有对数据的处理，所以提供了事件修饰符用于DOM的事件处理，常用的事件修饰符有以下几个：
1：stop：阻止冒泡（通俗的讲就是阻止事件向上级DOM元素传递）
2：prevent：阻止默认事件
3：capture：捕获冒泡，即有冒泡发生时，有此修饰的DOM元素会先执行，如果有多个就从外向内依次执行，然后再按照自然顺序依次执行。
4：self：将事件绑定到自身，只有自身触发时才能触发，通常用于避免冒泡事件的影响。(官网)
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，
用 v-on:click.prevent.self 会阻止所有的点击，
而 v-on:click.self.prevent 只会阻止对元素自身的点击。
5：once：设置事件只能触发一次，
6：passive尤其能够提升移动端的性能，滚动事件的默认事件，即滚动行为，滚就会触发。
按键修饰符：
7：keydown和keyup 键盘事件。（keycode）
8：为什么要设置key值，特别是循环操作的时候
因为Vue是采用虚拟Dom，diff算法。需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。
注意：·1：v-for循环的时候，key属性只能使用number或string 2：key使用的时候，必须使用v-bind绑定属性的形式，指定key的值
在组件中，使用 v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的 字符串/数字 类型:key 值
9：如何定义组件、指令、过滤器？全局、局部定义 的方式各自是什么？
组件 全局：Vue.component(‘Component’,{template:’
’})本地组件：放在vue实例中 components:{
Component:{
template:’’
}
}
指令 全局：Vue.directive(‘focus’,{
inserted:function(el){
el.focus()
}
})
本地：放在vue实例中
directives:{
focus:{
inserted:function(el){
el.focus()
}
}
}
过滤器：
{{msg|fn}}
全局：Vue.filter(‘fn’,mgs=>{
return msg.replace(/you/g,’me’)
})
本地 filters:{
fn:function(msg){}
}
10: vue init目录结构是如何的
Src：assets（静态资源目录）
APP.vue(主组件)
main.js()入口文件
.bablerc(语法解析配置文件)
.gitignore(git忽略文件)
Pacakage.json(项目初始文件)
webpack.config.js
index.html(主页面)
11：在Vue中进行数据请求一般采用什么方式
1：Vue-resource
（1）：先进性模块的安装 cnpm i vue-res –S
（2）：在入口文件main.js里引入vue-resource
（3）：使用这个插件 use.resource
（4）：在项目中使用this.$http.get()
2：axios
（1）：axios是第三方插件，要先进行插件的安装。Cnpm i axios –S
（2）：直接调用，和Vue-resource的区别是：axios在一个页面用一次就要调用一次。Vue-resource是绑定全局。
3：axios的跨域请求
（1）：在config>index.js>proxyTable配置：target填写自己想要的地址
（2）：在使用axios时，URL为地址后面所带的参数，配置好以后运行即可
4：多个并发请求
（1）：在以上的配置下，定义多个axios请求函数，用axios.all统一调用即可。
详解见：https://www.jianshu.com/p/6b82722e2025
12：在Vue文件中template模板部分 使用template标签的作用是什么
使用template时，会忽略template标签直接输出template中的内容。template不会渲染成元素，用div的话会被渲染成元素。把if,show,for等语句抽取出来放在template上面，把绑定的事件放在temlpate里面的元素上，可以使html结构更加清晰，还可以改善一个标签过长的情况。
13：介绍一下SPA，优势以及不足，如何解决
1：SPA的全称是单页面应用。一个SPA就是一个web应用，他所需 的资源有HTML JS CSS等，一次请求就加载完成。也就是不需要刷新的动态加载
用术语“单页”就是在页面初始化加载以后就永远不会刷新重新加载。
2：优势：减轻服务器端的压力
（因为服务器先将一份包含了静态资源、JavsScript和模板的静荷数据(payload)发送到了客户端，之后客户端只需要获取渲染页面或视图所需要的数据即可。 payload就是起关键作用的资源）提高页面的渲染效果由于移动设备的流行，可以开发提供JSON格式数据的网络服务，然后可以提供不同的客户端使用。
SPA的使用，我们可以使用一个HTTP API，一个HTTP API相比在服务端渲染一个HTML页面有诸多好处，这样就可以很方便的进行单元测试等操作，还可以被其他很多客户端程序所用。
SPA最大的好处就是大量的工作都在浏览器中完成，服务端承担更少的工作，这样就可以处理更多的请求。同时SPA需要额外的请求模版开销，我们可以通过预编译模版、缓存机制和将多个模板拼接成一个大的模板来减少请求数量。
3：不足之处：首屏加载时间会很长。
SEO不友好。
主要是因为SPA利用了hash片段实现路由，而利用hash片段不会作为HTTP请求中的一部分发送给服务器。
而SPA使用hash片段的目的是：当片段的内容发送变化时，浏览器不会像URI发送变化时那样发起新的网络请求。这样就可以只请求页面或视图渲染所需要的数据，而不是为每一个页面获取并解析整份文档。
14：Vue和React有哪些相似的地方
二者都是当下流行的主流框架
相同之处在于：
一、使用 Virtual DOM
二、提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
三、将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
不同之处：
一、在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。
二、JSX vs Templates
在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。
使用 JSX 的渲染函数有下面这些优势：
1. 你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS作用域中的值等等。
2. 开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。
Vue 也提供了渲染函数，甚至支持 JSX。然而，默认推荐的还是模板。任何合乎规范的 HTML 都是合法的 Vue模板，这也带来了一些特有的优势：
1. 对于很多习惯了 HTML 的开发者来说，模板比起 JSX 读写起来更自然。这里当然有主观偏好的成分，但如果这种区别会导致开发效率的提升，那么它就有客观的价值存在。
2. 基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。
3. 这也使得设计师和新人开发者更容易理解和参与到项目中。
4. 甚至可以使用其他模板预处理器，比如 Pug 来书写 Vue 的模板。
16: textarea中如果实现换行，在利用 {{}}插值表达式显示 textarea中的内容是不显示换行的，如果需要显示换行，如何实现
1：用正则表达式去匹配换行符，然后用
替换。用V-html绑定到标签上，但是这种方式比较麻烦，所以不建议使用。
2：设置write-space属性，给元素节点加上一个类名。设置 css属性 write-space：pre-wrap。Pre-wrap值的意思是保留空白并且正常运行。
17：v-if与v-show的差异区别以及应用场景
1：相同点：都可以动态的控制DOM元素的显示与隐藏。
2：不同点
| V-if | V-show |
|动态的向DOM树上添加和删除元素节点 | 通过设置元素的CSS样式的display值控制元素的显示与隐藏|
| V-if切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件 | V-show只是简单的CSS切换 |
|v-if是惰性的，如果初始条件为假，则什么都不做；只有在条件第一次变为真的时候才开始局部编译 | v-show是任何情况下都进行编译。然后被缓存，而且DOM元素保留|
| v-if有更高的切换消耗 | v-show有更高的初始渲染消耗 |
|使用场景 适合条件很难变换的 适合频换切换的 |
18：与Vue经常配合的UI框架使用的是哪些
Bootstrap 、element UI、iview、mint UI移动端的vux、vant（zanui开发的）
19：elementUI,mintUI等在进行一些 click操作时无法响应事件（比如 表头点击），该如何解决
用@click.native即可解决
20：vue中实现文件上传有哪些方法，实现方法是什么。
使用vue.js+element-ui结合，借用element-ui的upload上传附件组件来实现前端
1 、接口接收accessToken的值放在请求头中，将上面的：data=”token” 改成：headers=”token”即可
2、action即为附件的上传接口的详细地址
3、data是传递参数的
4、fileList是上传回调的数据数组
21：UI框架如果很大，是否会采用按 需加载，什么是UI框架组件的按 需加载
会：按需加载是前端性能优化的一种。
按需加载：指的是当用户触发了动作时才加载对应的功能。触发的动作，是要看具体的业务场景而言，包括但不限于以下几个情况：鼠标点击、输入文字、拉动滚动条，鼠标移动、窗口大小更改等。加载的文件，可以是JS、图片、CSS、HTML等。后面将会详细介绍“按需”的理解。
难点问题
22：一个模块中插值表达式{{}}内容繁多，而页面渲染速度较慢，再打开页面时会出现{{}}内容没有被渲染出来，如何解决页面渲染不出现{{}}内容，有哪些解决方法
1：可以用V-text，V-html来替换{{}}这种写法
2：官网提供V-cloak可以保证渲染的时候不会出现{{}}
实例
23: nextTick的作用是什么
作用：Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM。
官方文档解释如下：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
扩展：什么时候需要用到Vue.nextTick()
• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。
• 与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会 有问题 。在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候。
详解见：https://www.cnblogs.com/minigrasshopper/p/7879545.html https://www.jianshu.com/p/a7550c0e164f
24：单向数据流与双向数据绑定的区别是怎么样的
自我理解单向数据流：单向数据流指的是，只能从一个方向修改数据，即父组件修改数据子组件即修改，但是子组件修改数据父组件的数据不会发生变化。
数据的双向绑定 主要由MVVM框架实现，主要由三部分组成View、ViewModel和Model组成，其中view和model不能直接进行通信，他们通过中间件ViewModel来进行通信。
当Model部分数据改变时，由于vue中Data Binding将底层数据和DOM进行了绑定，ViewModel会通知view更新视图；
当视图view数据变化也会同步到Model中，View和Model之间的同步完全是自动的，不需要人手动操作DOM。
25：Vue中如何实现全局变量的定义
1：设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。
使用方式1：在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。
使用方式2：在程序入口的main.js文件里面，将上面那个Global.vue文件挂载到Vue.prototype。