VUE的优点，VUE的缺点？
vue的优点：渐进式，组件化，轻量级，虚拟DOM，运行速度快，易学。
vue的缺点：单页面不利于SEO，不支持IE8以下，首屏加载时间长
为什么说VUE是一个渐进式框架？
渐进式框架就是不强求我们第一次性能接受并使用它的全部功能特性。
vue与React的异同点？
相同点：
1，都是用了虚拟DOM
2，组件化开发
3，都是单向数据流（父子组件之间，不建议子修改父传下来的数据）
4，都支持服务端渲染
不同点：
1，React的JSX，Vue的template
2，数据变化，React手动（setState）
VUE自动（初始化已响应式处理）
3，React是单向绑定，Vue双向绑定
4，React的Redux，Vue的Vuex
MVVM是什么？和MVC有何区别？
MVC全名是Model View Controer，是模型（model）-视图（view）-控制器（controller）的缩写，一种软件设计典范
Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中取数据
View（视图）：是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的
Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据
MVC的思想：Controller负责将Model的数据用View显示出来，就是在Controller里面吧Model的数据复制给View
MVVM：简写Model-View-ViewModel，模型-视图-视图模型。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。 MVVM是一种软件架构设计模式，是一种简化用户界面的事件驱动编程方式。MVVM促进了前端开发与后端业务逻辑的分离。
区别：MVC和MVVM的区别并不大。主要是MVC中Controller演变成MVVM中的viewModel，MVVM主要解决了MVC中大量的DOM操作，是页面渲染性能降低，加载速度变慢，影响用户体验。
双向数据绑定的原理？
是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的getter，setter方法；在数据变动时发布消息给订阅者，触发相对应的监听回调从而达到数据与视图同步互。
主要分为vue的四部分：
1，Observer主要是负责VUE数据进行递归遍历，使其数据拥有get和set方法，当有数据给某个对象赋值，就触发setter就监听到数据的变化了。
2，compile指令解析器负责绑定数据和指令解析。将模版中的变量替换成数据，然后初始化渲染页面视图，并将每一个指令对应的节点绑定新的函数。一旦数据有变动，收到通知更新视图
3，订阅者watcher：Wacher订阅者是Observer和Compile之间通信桥梁，主要做的事情是负责监听数据，当数据发生改变，能够用自身的update（）方法，触发Compile中绑定的更新函数
4，实现一个订阅器dep：采用发布者订阅者模式，用来收集订阅者的watcher，对监听器observer和watcher统一管理
v-model主要做了哪些事情？（双向数据绑定）
v-model是Vue双向绑定的指令，能将页面控制的值同步更新到相关的绑定data属性，也会更新data绑定属性时候，更新页面输入的值。
原理：通过Observe来监听自己的model变化，通过Compile来解析编译模版命令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化》》数据更新 在初始化VUE实例时，遍历data对象，给每一个键值对利用Object.definedProperty对data键值对新增get和set方法，利用事件监听DOM的机制，让视图改变数据。
为什么data是一个函数？
类别为引用数据类型，如果不用function返回，每一个组件都用的同一个地址，一个数据改变的话其他的也会跟着改变。
javaScript只有函数构成作用域（只有函数{}构成作用域，对象的{}以及if（）{}都不构成作用域），data是一个函数时，每一个组件实例都有自己的作用域，每一个实例相互独立，互不影响。
虚拟DOM的理解？
虚拟DOM就是用来模拟DOM结构的一个js对象
需要虚拟DOM（Virtual DOM）的原因？
前端性能优化的一个秘诀就是尽可能的减少DOM的操作，不仅仅是DOM相对较慢，更因为变动DOM会造成浏览器的回流和重绘，这些会降低性能，因此我们需要虚拟DOM在patch（比较新旧虚拟DOM更新去更新视图）过程尽可能的一次性将差异更新到DOM中，这样保证了DOM不会出现性能很差的情况。
v-for中key值的理解及作用？
vue的作用是双项数据绑定，数据一旦改变页面就会渲染新的数据呈现在页面上。用v-for渲染的列表数据来说数据量一般都很庞大，而且我们经常对一列数据进行增删改操作。整个列表都会渲染一遍，很浪费资源。
key的出现解决了这个问题，提高效率，如果这个列表增加了一个数据，就会渲染着一条数据。
v-for默认使用就地复用策略，列表数据修改的时候，他会根据key值去判断某个值是否改变，如果修改则重新渲染这一项，否则复用之前的元素。
关于Diff解析：
1，当页面的数据发生变化时，Diff算法只会比较同一级的节点
2，如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点不会再比较这个节点的子节点
3，如果节点类型相同，则会重新设置该节点的属性，从而实现节点更新。
v-if与v-show的区别？
在vue中v-show和v-if都可以控制元素是否在页面中存在。
v-show的显示隐藏是操作css的display属性，所以使用v-show来隐藏元素的时候，元素的DOM节点依旧在页面中；v-if的显示隐藏将整个DOM添加或删除
v-if的切换有一个局部编译或卸载的过程，切换过程中合适地销毁和重建内部事件监听和子组件；v-show只是简单的操作css的display属性
v-if是真正的条件渲染，他会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建。只有渲染条件为假，并不做操作，知道才真才渲染。
v-show由false变为true的时候不会触发生命周期，v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted生命周期钩子，由true变为false的时候触发组件的beforDestory、destoryed方法
在性能消耗方面v-if有更高的切换消耗；v-show有更高的初始渲染消耗。
v-show和v-if的使用场景：
1，都能控制DOM元素在页面的显示和隐藏
2，v-if相比v-show开销更大的（直接操作DOM节点增加与删除），如果需要非常频繁的切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。
v-for与v-if为什么不能在一起使用？
vue2中v-for的优先级高于v-if，如果两个在同一个标签中，每次使用v-for都得执行v-if遍历整个数组，一旦数组数据很大，这对性能而言很大的开销。简单来说就是会把代码先渲染出来进行条件判断，这样就造成了性能的浪费。
vue3.0中v-if的优先级高于v-for，如果在同一个标签中回显使用v-if，而v-if的数据来自v-for的循环子项会导致出错，因为数据还未声明。
vue的生命周期？
Vue的实例有一个很完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom-》渲染、更新-》渲染、卸载等一系列过程，称之为vue的生命周期。
beforeCreate（创建前）：数据观测和初始化事件还未开始，此时打他的响应式追踪、event/watcher都还没被设置，也就是说不能访问到data、computed、watch、methods上的数据和方法
created（创建后）：实例创建完成，实例上的配置options包括data、computed、watch、methods等都配置完成，但是此时渲染得节点还未挂载到DOM，所以不能访问到$el属性。
beforeMount（挂载前）：在挂载前被调用，相关的render函数首次被调用。实例已完成以下的配置:编译模版，把data里面的数据和模版生成HTML。此时还没有挂载html页面。
mounted（挂载后）：在el被创建的vm.$el替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面的编译好的html内容替换el属性指向的DOM对象。完成模版中HTML页面中。此过程中进行ajax交互。
beforeUpdate（更新前）:响应式数据更新时调用，此时虽然响应式数据更新了，但是对应真实DOM还没有被渲染。
updated(更新后)：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。
beforeDestroy（销毁前）：实例摧毁之前调用。这一步实例任然完成可用，this仍能捕获到实例。
destroy（销毁后）：实例销毁后都调用，调用后Vue实例指示的是所有东西都会解绑定，所有的事件监听都会被移除，所有的自实例也都会被销毁。该钩子在服务端渲染期间不被调用。
keep-alive都有的生命周期，分别为activated和deactivated。>用keep-alive包裹的组件在切换时不会被销毁。而是缓存到内存中并执行deactivated钩子函数，命中缓存渲染后会执行activated钩子函数
对keep-alive的理解，它是如何实现的，具体缓存的是什么？
如果需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用keep-alive组件包裹需要保存的组件。
以下三个属性：
1，include属性字符串或正则表达式，只有名称匹配的组件会被调用
2，exclude属性字符串或正则表达式，任何名称匹配的组件都不会被缓存
3，max数字，最多可以缓存多少组件实例
注意：keep-alive包裹动态组件，会缓存不活动的组件实例。
单页面应用与多页面应用的区别？
单页面应用是一个主页面的应用，一开始只需加载css，js相关的资源。所有内容都包含在主页面，对每一个功能模块组件化。单页面应用跳转就是切换相关组件，仅仅刷新局部资源。
MPA多页面应用，值得是多个独立页面的应用，每一个页面必须重复加载js，css等相关资源。多页面跳转，需要整页资源刷新。
Computed和Watch的区别？
对于Computed：
1.他支持缓存，只有依赖的数据发生变化，才会重新计算。
2.不支持异步，当Computed中的异步操作时，无法监听数据的变化
3.computed的值会默认走缓存，计算属性是基于它的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。
4.如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一般都是用computed
5.如果computed属性的属性值是函数，那么默认使用get方法，函数的返回值就是属性的属性值，在computed中，属性有一个get方法和一个set方法，当数据发生变化时，会调用set方法
对于Watch：
1.他不支持缓存，数据变化时，他就会出发相对应的操作
2.支持异步监听
3.监听的函数接受两个参数，第一个参数是最新的值，第二个参数是变化之前的值
4.当一个属性发生变化时，就需要执行相对应的操作
5.监听数据必须是data中声明的或者父组件传递传来的props中的数据，当发生变化时，会触发其他操作
immediate组件加载立即出发回调函数
deep：深度监听，发现数据内部的变化，在复杂数据类型中使用。
当想要执行异步或者昂贵的操作一响应不断的变化时，就需要使用watch
总结：
conputed计算属性依赖其他的属性值，并且computed的值有缓存只有它依赖的属性值发生改变下一次获取computed的值时才会重新计算computed的值。
watch侦听器：更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作
