Vue基础理论篇

1、MVC、MVP、MVVM模式的概念与区别
1】MVC

a、概念
Model（模型）：表示应用程序核心（如数据库）
View（视图）：显示UI效果（HTML页面）
Controller（控制器）：处理输入（业务逻辑）
b、过程（单向）
View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，View得到更新
c、优缺点
优点：M和V之间是完全隔离的, 所以在业务场景切换时, 通常只需要替换相应的C, 复用已有的M和V便可快速搭建新的业务场景. MVC因其复用性, 大大提高了开发效率, 现已被广泛应用在各端开发中
缺点： 视图V与控制器C间的过于紧密的连接，没有区分业务逻辑和业务展示，
1 这对单元测试很不友好，
2 视图jsp模板引擎，这些还会让前端人员和后端人员的一些职责重复

2】MVP
a、概念
MVP是针对MVC的缺点而进行了改进
模型（Model）：数据库相关的操作、文件的访问和数据结构等
视图（View）：专注于显示，如Web前端(HTML/CSS/JavaScript)
展示器（Presenter）：连接模型和视图，处理视图的请求并根据模型更新视图（中介）

b、优缺点
优点：
（mvc是m驱动v的变更，mvp是p展示器驱动v的变更）
MVP用展示器代替了控制器，而展示器是可以直接更新视图，所以MVP中展示器可以处理视图的请求并递送到模型又可以根据模型的变化更新视图，实现了视图和模型的完全分离，有点类似双向绑定
缺点：
视图和Presenter的交互会过于频繁，使得他们的联系过于紧密。也就是说，一旦视图变更了，presenter也要变更

3】MVVM

a、概念
MVVM是MVP更进一步的发展，把软件系统分为三个基本部分：模型（Model）、视图（View）和视图模型（ViewModel）
模型（Model）：数据库相关的操作、文件的访问和数据结构等。
视图（View）：专注于显示，如Web前端（HTML/CSS/JavaScript）
视图模型（ViewModel）：监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
b、优缺点
优点：通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 VM 来统一管理。
1】低耦合：视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变（React单向绑定）。
2】可重用性：你可以把一些视图逻辑放在一个ViewModel里面，让很多 view 重用这段视图逻辑。
3】独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
4】可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
***相对mvc，mvvm主要解决了：
mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
缺点： 因为使用了dataBinding，增加了大量的内存开销，增加了程序的编译时间（webpack），项目越大内存开销越大。
c、MVVM的实现主要是三个核心点：
响应式：vue如何监听data的属性变化
模板解析：vue的模板是如何被解析的
渲染：vue模板是如何被渲染成HTML的

2、单页面应用及其优缺点
单页应用，即在一个页面里面加载了所有的HTML、JavaScript 和 CSS
1】优点：
1).良好的交互体验
用户不需要重新刷新页面，获取数据也是通过Ajax异步获取，页面显示流畅。
2).良好的前后端工作分离模式
单页Web应用可以和RESTful规约一起使用，通过REST API提供接口数据，并使用Ajax异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分。
3).减轻服务器压力
服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
4).共用一套后端程序代码
不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端；
2】缺点：
1).SEO难度较高
由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势，所以如果你的站点对SEO很看重，且要用单页应用，那么就做些静态页面给搜索引擎用吧。
2).前进、后退管理
由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理，当然此问题也有解决方案，比如利用URI中的散列+iframe实现。
3).初次加载耗时多
为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理，如果使用第三方库，建议使用一些大公司的CDN，因此带宽的消耗是必然的。

3、Vue
（关键点：渐进式框架，自底向上，只关注视图层，一切皆组件）
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
对于vue而言，一切皆组件（组件系统），因为组件本质就是是可复用的 Vue 实例。vue初始化的时候，在mian.js里面通过Vue.component()创建一个全局组件之后，我们可以new一个Vue实例，然后就把根节点挂载上去。new Vue({ el: ‘#app’ })，然后在这个 Vue 根实例中，把这个组件作为自定义元素来使用。

4、vue渐进式框架的理解
每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

5、vue.js的两个核心是什么？三要素是什么？
1】两个核心：双向数据绑定 和 组件系统
2】三要素：响应式、模板引擎 和 渲染

6、vue生命周期详解
1】生命周期
Vue 实例从创建到销毁的一系列过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
2】生命周期的作用是什么？
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

Vue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父级上下文，因此this与你期待的Vue实例不同。
（注：vm.$el 是用于获取和操作Vue实例关联的DOM元素的一个对象）

1】beforeCreate
vue实例创建之前，data 和 $el(dom)都没有初始化 全部为 undefined
应用：可以在此时加一些loading效果，在created 时进行移除（App.vue或者其他组件）

2】created
vue实例创建完成，data 初始化完成，但 $el 没有初始化
应用：如果业务逻辑不涉及到需要页面加载完成之后的话，可以在这里进行 ajax 请求

3】beforeMount（模板解析中）
虚拟dom解析成真实dom，并挂载到Vue实例之前~
data 和 $el 均已存在，template模板已导入渲染函数编译。而当前阶段虚拟dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。
应用：这里实际应用比较少

4】mounted
虚拟dom解析成真实dom，并挂载到Vue实例之后~
模板引擎已被完全解析成html，挂载到Vue实例上，并渲染到页面
应用：
1.可以进行ajax请求；
2.因为dom已经完全渲染出来了，可以在这里进行dom操作。
注意：若涉及父子组件，父组件mounted完毕以后，子组件还不一定mounted完毕。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

5】beforeUpdate
在数据更新之前调用，发生在虚拟DOM重新渲染之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程，会更新当前组件数据，但未在页面渲染出来。

6】updated
data发生变化，触发DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新完毕，所以你现在可以执行依赖于 DOM 的操作。
应用：
任何数据的更新，如果要做统一的业务逻辑处理，可以在这个钩子里面进行。
例如：
即时聊天项目，打开当前会话加载完消息后需要自动滚动到窗口最底部。滚动到底部这个操作就可以放在这个钩子函数里面来完成。
注意：
a、当实例每次进行数据更新时updated都会执行。
b、无论是组件本身的数据变更，还是从父组件接收到的 props 或者从vuex里面拿到的数据有变更，都会触发虚拟 DOM 重新渲染和打补丁，并在之后调用 updated。

7】beforeDestroy 【类似于React生命周期的componentWillUnmount】
实例销毁之间调用。在这一步，实例仍然完全可用。该钩子在服务端渲染期间不被调用。
应用：可以在这里清除定时器。

8】destroyed
Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染不会被调用

***另外还有 keep-alive 独有的生命周期，分别为 activated 和 deactivated
被keep-alive包含的组件不会被再次初始化，也就意味着不会重走生命周期函数
1】activated
keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。
2】deactivated
keep-alive组件停用时调用。该钩子在服务端渲染期间不被调用。

***关于updated钩子函数一个问题：
data里面数据发生变化，一定会触发updated这个钩子函数吗？
答：只有data里的变量改变并且要在页面重新渲染完成之后，才会进updated生命周期。只改变data里的值，但是没有再页面上渲染该值的话，并不会触发updated。
比如data里面某个值传入Null，值是改变了，但是对于页面还说是没有变化的，所以不会触发updated。

7、生命周期钩子函数可以用箭头函数吗？
不可以。箭头函数的this指向父级上下文，而生命周期钩子函数的this默认指向Vue实例，强行用箭头函数会导致this指向错误。

8、this.$nextTick用法和实际应用场景$