vue介绍以及相关概念理解⼤全
1.什么是vue
以官⽹的解释来说，vue是渐进式javascript框架。Vue (读⾳ /vjuː/，类似于 view) 是⼀套⽤于构建⽤户界⾯的渐进式框架。与其它⼤型框架不同的是，Vue 被设计为可以⾃底向上逐层应⽤。Vue 的核⼼库只关注视图层，不仅易于上⼿，还便于与第三⽅库或既有项⽬整合。另⼀⽅⾯，当与现代化的⼯具链以及各种⽀持类库结合使⽤时，Vue 也完全能够为复杂的单页应⽤提供驱动。
2.特点
核⼼只关注视图（view）
易学，轻量，灵活
适⽤于移动端项⽬
渐进式框架
3.渐进式框架的理解
在我看来，渐进式代表的含义是：主张最少。
每个框架都不可避免会有⾃⼰的⼀些特点，从⽽会对使⽤者有⼀定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使⽤⽅式。
⽐如说，Angular，它两个版本都是强主张的，如果你⽤它，必须接受以下东西：
- 必须使⽤它的模块机制- 必须使⽤它的依赖注⼊- 必须使⽤它的特殊形式定义组件（这⼀点每个视图框架都有，难以避免）
所以Angular是带有⽐较强的排它性的，如果你的应⽤不是从头开始，⽽是要不断考虑是否跟其他东西集成，这些主张会带来⼀些困扰。
⽐如React，它也有⼀定程度的主张，它的主张主要是函数式编程的理念，⽐如说，你需要知道什么是副作⽤，什么是纯函数，如何隔离副作⽤。它的侵⼊性看似没有Angular那么强，主要因为它是软性侵⼊。
Vue可能有些⽅⾯是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有⼤系统的上⾯，把⼀两个组件改⽤它实现，当jQuery⽤；也可以整个⽤它全家桶开发，当Angular⽤；还可以⽤它的视图，搭配你⾃⼰设计的整个下层⽤。你可以在底层数据逻辑的地⽅⽤OO和设计模式的那套理
念，也可以函数式，都可以，它只是个轻量视图⽽已，只做了⾃⼰该做的事，没有做不该做的事，仅此⽽已。
渐进式的含义，我的理解是：没有多做职责之外的事。
4.两个核⼼点
1.响应的数据变化
当数据发⽣变化----视图⾃动更新
2.组合的视图组件
UI页⾯映射为组件树
划分组件可维护、可复⽤、可测试
5.MVVM
MVVM分为三个部分：分别是M（Model，模型层），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）
1、 M：模型层，主要负责业务数据相关；
2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；
3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；
MVVM⽀持双向绑定，意思就是当M层数据进⾏修改时，VM层会监测到变化，并且通知V层进⾏相应的修改，反之修改V层则会通知M层数据进⾏修改，以此也实现了视图与模型层的相互解耦；
6.数据的双向绑定与单项绑定
双向数据绑定和单向数据绑定解释：
a. 单向数据绑定
指的是我们先把模板写好，然后把模板和数据（数据可能来⾃后台）整合到⼀起形成HTML代码，然后把这段HTML代码插⼊到⽂档流⾥⾯。
单向数据绑定缺点：HTML代码⼀旦⽣成完以后，就没有办法再变了，如果有新的数据来了，那就必须把之前的HTML代码去掉，再重新把新的数据和模板⼀起整合后插⼊到⽂档流中。简单的来说就是DOM操作直接改变
b. 数据数据双向
数据模型（Module）和视图（View）之间的双向绑定。
⽤户在视图上的修改会⾃动同步到数据模型中去，同样的，如果数据模型中的值发⽣了变化，也会⽴刻同步到视图中去。双向数据绑定的优点是⽆需进⾏和单向数据绑定的那CRUD（Create，Retrieve，Update，Delete）操作双向数据绑定最经常的应⽤场景就是表单了，这样当
⽤户在前端页⾯完成输⼊后，不⽤任何操作，我们就已经拿到了⽤户的数据存放到数据模型中了。
在react中是单向数据绑定，⽽在vue和augular中的特⾊是双向数据绑定。为什么会选择两种不同的机制呢？我猜测是两种不同的机制有不同的适应场景，查了⼀些资料后，总结⼀下。
⼀、各⾃优势
双向数据绑定给⼈的最⼤的优越感就是⽅便。当数据data发⽣变化时，页⾯⾃动发⽣更新。但是有⼀个缺点也是因为⾃动更新⽽导致的，因为这样你就不知道data什么时候变了，也不知道是谁变了，变化后也不会通知你，当然你可以watch来监听data的变化，但是这变复杂了，还不如单向数据绑定。
Vuex推荐单向绑定就是为了[控制欲]！，虽然单向绑定牺牲了⼀部分便捷性，换来的是更⼤的[控制⼒]
除此之外单向数据绑定对于复杂应⽤来说是实施统⼀的状态管理，⽅便跟踪。
⼆、单向数据与双向数据关系
单向数据绑定的实现思路：
1. 所有数据只有⼀份
2. ⼀旦数据变化，就去更新页⾯(data-页⾯)，但是没有(页⾯-data)
3. 如果⽤户在页⾯上做了变动，那么就⼿动收集起来(双向是⾃动)，合并到原有的数据中。
其实单向绑定也有双向绑定的意味，不过页⾯变动后数据的变化不会⾃动更新。⽅神解析了这个魔法：双向绑定 = 单向绑定 + UI事件监听。请看下⾯的代码⽰例
vue数据双向绑定
<body>
<div id="app">
<input type="text" v-model="meg">
<p>{{data}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data :{
meg:''
}
})
</script>
</body>
当你在页⾯的input框中输⼊值时，下⾯⼀⾏同步显⽰内容，如果我们不要v-model指令能实现这个效果吗? 只需要改为:
//⾸先设置value属性为meg，然后监听输⼊事件
<input type="text" :value="meg" @input="meg=$event.target.value">
同样也实现了双向数据绑定，所以它并不是什么⿊魔法！
7.VUE对⽐其他框架
引⽤⾄vue官⽹如果没耐⼼看请直接下拉到我的总结.
React 和 Vue 有许多相似之处，它们都有：
使⽤ Virtual DOM
提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
将注意⼒集中保持在核⼼库，⽽将其他功能如路由和全局状态管理交给相关的库。
由于有着众多的相似处，我们会⽤更多的时间在这⼀块进⾏⽐较。这⾥我们不只保证技术内容的准确性，同时也兼顾了平衡的考量。我们需要承认 React ⽐ Vue 更好的地⽅，⽐如更丰富的⽣态系统。
运⾏时性能
React 和 Vue 都是⾮常快的，所以速度并不是在它们之中做选择的决定性因素。
优化
在 React 应⽤中，当某个组件的状态发⽣变化时，它会以该组件为根，重新渲染整个组件⼦树。
如要避免不必要的⼦组件的重渲染，你需要在所有可能的地⽅使⽤PureComponent，或是⼿动实现shouldComponentUpdate⽅法。同时你可能会需要使⽤不可变的数据结构来使得你的组件更容易被优化。
然⽽，使⽤PureComponent和shouldComponentUpdate时，需要保证该组件的整个⼦树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况，那么此类优化就会导致难以察觉的渲染结果不⼀致。这使得 React 中的组件优化伴随着相当的⼼智负担。
在 Vue 应⽤中，组件的依赖是在渲染过程中⾃动追踪的，所以系统能精确知晓哪个组件确实需要被重
渲染。你可以理解为每⼀个组件都已经⾃动获得了shouldComponentUpdate，并且没有上述的⼦树问题限制。
Vue 的这个特点使得开发者不再需要考虑此类优化，从⽽能够更好地专注于应⽤本⾝。
HTML & CSS
在 React 中，⼀切都是 JavaScript。不仅仅是 HTML 可以⽤ JSX 来表达，现在的潮流也越来越多地将 CSS 也纳⼊到 JavaScript 中来处理。这类⽅案有其优点，但也存在⼀些不是每个开发者都能接受的取舍。
Vue 的整体思想是拥抱经典的 Web 技术，并在其上进⾏扩展。我们下⾯会详细分析⼀下。
JSX vs Templates
在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使⽤ XML 语法编写 JavaScript 的⼀种语法糖。
使⽤ JSX 的渲染函数有下⾯这些优势：
你可以使⽤完整的编程语⾔ JavaScript 功能来构建你的视图页⾯。⽐如你可以使⽤临时变量、JS ⾃带的流程控制、以及直接引⽤当前JS 作⽤域中的值等等。
开发⼯具对 JSX 的⽀持相⽐于现有可⽤的其他 Vue 模板还是⽐较先进的 (⽐如，linting、类型检查、编辑器的⾃动完成)。
事实上 Vue 也提供了渲染函数，甚⾄⽀持 JSX。然⽽，我们默认推荐的还是模板。任何合乎规范的 HTML 都是合法的 Vue 模板，这也带来了⼀些特有的优势：
对于很多习惯了 HTML 的开发者来说，模板⽐起 JSX 读写起来更⾃然。这⾥当然有主观偏好的成分，但如果这种区别会导致开发效率的提升，那么它就有客观的价值存在。
基于 HTML 的模板使得将已有的应⽤逐步迁移到 Vue 更为容易。
这也使得设计师和新⼈开发者更容易理解和参与到项⽬中。
你甚⾄可以使⽤其他模板预处理器，⽐如 Pug 来书写 Vue 的模板。
有些开发者认为模板意味着需要学习额外的 DSL (Domain-Specific Language 领域特定语⾔) 才能进⾏开发——我们认为这种区别是⽐较肤浅的。⾸先，JSX 并不是没有学习成本的——它是基于 JS 之
上的⼀套额外语法。同时，正如同熟悉 JS 的⼈学习 JSX 会很容易⼀样，熟悉HTML 的⼈学习 Vue 的模板语法也是很容易的。最后，DSL 的存在使得我们可以让开发者⽤更少的代码做更多的事，⽐如v-on的各种修饰符，在 JSX 中实现对应的功能会需要多得多的代码。
更抽象⼀点来看，我们可以把组件区分为两类：⼀类是偏视图表现的 (prentational)，⼀类则是偏逻辑的 (logical)。我们推荐在前者中使⽤模板，在后者中使⽤ JSX 或渲染函数。这两类组件的⽐例会根据应⽤类型的不同有所变化，但整体来说我们发现表现类的组件远远多于逻辑类组件。
组件作⽤域内的 CSS
除⾮你把组件分布在多个⽂件上 (例如 CSS Modules)，CSS 作⽤域在 React 中是通过 CSS-in-JS 的⽅案实现的 (⽐如 styled-components、glamorous 和 emotion)。这引⼊了⼀个新的⾯向组件的样式范例，它和普通的 CSS 撰写过程是有区别的。另外，虽然在构建时将 CSS 提取到⼀个单独的样式表是⽀持的，但 bundle ⾥通常还是需要⼀个运⾏时程序来让这些样式⽣效。当你能够利⽤ JavaScript 灵活处理样式的同时，也需要权衡 bundle 的尺⼨和运⾏时的开销。
如果你是⼀个 CSS-in-JS 的爱好者，许多主流的 CSS-in-JS 库也都⽀持 Vue (⽐如 styled-components-vue 和 vue-emotion)。这⾥ React 和Vue 主要的区别是，Vue 设置样式的默认⽅法是单⽂件组件⾥类似style的标签。
单⽂件组件让你可以在同⼀个⽂件⾥完全控制 CSS，将其作为组件代码的⼀部分。
<style scoped>
@media (min-width: 250px) {
.list-container:hover {
background: orange;
}
}
</style>
这个可选scoped属性会⾃动添加⼀个唯⼀的属性 (⽐如data-v-21e5b78) 为组件内 CSS 指定作⽤域，编译的时候.list-container:hover会被编译成类似.list-container[data-v-21e5b78]:hover。
最后，Vue 的单⽂件组件⾥的样式设置是⾮常灵活的。通过 vue-loader，你可以使⽤任意预处理器、后处理器，甚⾄深度集成 CSS Modules——全部都在<style>标签内。
规模
向上扩展
Vue 和 React 都提供了强⼤的路由来应对⼤型应⽤。React 社区在状态管理⽅⾯⾮常有创新精神 (⽐如 Flux、Redux)，⽽这些状态管理模式甚⾄也可以⾮常容易的集成在 Vue 应⽤中。实际上，Vue 更进⼀步地采⽤了这种模式 ()，更加深⼊集成 Vue 的状态管理解决⽅案 Vuex 相信能为你带来更好的开发体验。
两者另⼀个重要差异是，Vue 的路由库和状态管理库都是由官⽅维护⽀持且与核⼼库同步更新的。React 则是选择把这些问题交给社区维护，因此创建了⼀个更分散的⽣态系统。但相对的，React 的⽣态系统相⽐ Vue 更加繁荣。
最后，Vue 提供了，能让你通过交互式的脚⼿架引导⾮常容易地构建项⽬。你甚⾄可以使⽤它。React 在这⽅⾯也提供了，但是现在还存在⼀些局限性：
它不允许在项⽬⽣成时进⾏任何配置，⽽ Vue CLI 运⾏于可升级的运⾏时依赖之上，该运⾏时可以通过进⾏扩展。
它只提供⼀个构建单页⾯应⽤的默认选项，⽽ Vue 提供了各种⽤途的模板。
它不能⽤⽤户⾃建的构建项⽬，这对企业环境下预先建⽴约定是特别有⽤的。
⽽要注意的是这些限制是故意设计的，这有它的优势。例如，如果你的项⽬需求⾮常简单，你就不需要⾃定义⽣成过程。你能把它作为⼀个依赖来更新。如果阅读更多关于。
向下扩展
React 学习曲线陡峭，在你开始学 React 前，你需要知道 JSX 和 ES2015，因为许多⽰例⽤的是这些语法。你需要学习构建系统，虽然你在技术上可以⽤ Babel 来实时编译代码，但是这并不推荐⽤于⽣产环境。
就像 Vue 向上扩展好⽐ React ⼀样，Vue 向下扩展后就类似于 jQuery。你只要把如下标签放到页⾯就可以运⾏：
<script src="/npm/vue"></script>
然后你就可以编写 Vue 代码并应⽤到⽣产中，你只要⽤ min 版 Vue ⽂件替换掉就不⽤担⼼其他的性能问题。
由于起步阶段不需学 JSX，ES2015 以及构建系统，所以开发者只需不到⼀天的时间阅读就可以建⽴简单的应⽤程序。
React Native 能使你⽤相同的组件模型编写有本地渲染能⼒的 APP (iOS 和 Android)。能同时跨多平台开发，对开发者是⾮常棒的。相应地，Vue 和会进⾏官⽅合作，Weex 是阿⾥巴巴发起的跨平台⽤户界⾯开发框架，同时也正在 Apache 基⾦会进⾏项⽬孵化，Weex 允许你使⽤ Vue 语法开发不仅仅可以运⾏在浏览器端，还能被⽤于开发 iOS 和 Android 上的原⽣应⽤的组件。
在现在，Weex 还在积极发展，成熟度也不能和 React Native 相抗衡。但是，Weex 的发展是由世界上最⼤的电⼦商务企业的需求在驱
动，Vue 团队也会和 Weex 团队积极合作确保为开发者带来良好的开发体验。
另⼀个选择是，⼀个⽤ Vue.js 构建完全原⽣应⽤的插件。
Mobx 在 React 社区很流⾏，实际上在 Vue 也采⽤了⼏乎相同的反应系统。在有限程度上，React + Mobx 也可以被认为是更繁琐的 Vue，所以如果你习惯组合使⽤它们，那么选择 Vue 会更合理。
类 React 的库们往往尽可能地与 React 共享 API 和⽣态。因此上述⽐较对它们来说也同样适⽤。它们和 React 的不同往往在于更⼩的⽣态。因为这些库⽆法 100% 兼容 React ⽣态中的全部，部分⼯具和辅助库也可能⽆法使⽤。或者即使看上去能⼯作，但也有可能随时发⽣不兼容，除⾮你⽤的这个类 React 库官⽅与 React 保持严格⼀致。
Vue 的⼀些语法和 AngularJS 的很相似 (例如v-if vs ng-if)。因为 AngularJS 是 Vue 早期开发的灵感来源。然⽽，AngularJS 中存在的许多问题，在 Vue 中已经得到解决。
在 API 与设计两⽅⾯上 Vue.js 都⽐ AngularJS 简单得多，因此你可以快速地掌握它的全部特性并投⼊开发。
Vue.js 是⼀个更加灵活开放的解决⽅案。它允许你以希望的⽅式组织应⽤程序，⽽不是在任何时候都必须遵循 AngularJS 制定的规则，这让Vue 能适⽤于各种项⽬。我们知道把决定权交给你是⾮常必要的。
这也是为什么我们提供了⼀个基于 Vue.js 进⾏快速开发的完整系统。旨在成为 Vue ⽣态系统中标准的基础⼯具。它使得多样化的构建⼯具通过妥善的默认配置⽆缝协作在⼀起。这样你就可以专注在应⽤本⾝，⽽不会在配置上花费太多时间。同时，它也提供了根据实际需求调整每个⼯具配置的灵活性。
AngularJS 使⽤双向绑定，Vue 在不同组件间强制使⽤单向数据流。这使应⽤中的数据流更加清晰易懂。
在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作，⽽组件代表⼀个⾃给⾃⾜的独⽴单元——有⾃⼰的视图和数据逻辑。在AngularJS 中，每件事都由指令来做，⽽组件只是⼀种特殊的指令。
Vue 有更好的性能，并且⾮常⾮常容易优化，因为它不使⽤脏检查。
在 AngularJS 中，当 watcher 越来越多时会变得越来越慢，因为作⽤域内的每⼀次变化，所有 watcher 都要重新计算。并且，如果⼀些watcher 触发另⼀个更新，脏检查循环 (digest cycle) 可能要运⾏多次。AngularJS ⽤户常常要使⽤深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有⼤量 watcher 的作⽤域。
Vue 则根本没有这个问题，因为它使⽤基于依赖追踪的观察系统并且异步队列更新，所有的数据变化都是独⽴触发，除⾮它们之间有明确的依赖关系。
有意思的是，Angular 和 Vue ⽤相似的设计解决了⼀些 AngularJS 中存在的问题。
我们将新的 Angular 独⽴开来讨论，因为它是⼀个和 AngularJS 完全不同的框架。例如：它具有优秀的组件系统，并且许多实现已经完全重写，API 也完全改变了。
Angular 事实上必须⽤ TypeScript 来开发，因为它的⽂档和学习资源⼏乎全部是⾯向 TS 的。TS 有很多好处——静态类型检查在⼤规模的应⽤中⾮常有⽤，同时对于 Java 和 C# 背景的开发者也是⾮常提升开发效率的。
然⽽，并不是所有⼈都想⽤ TS——在中⼩型规模的项⽬中，引⼊ TS 可能并不会带来太多明显的优势。
在这些情况下，⽤ Vue 会是更好的选择，因为在不⽤ TS 的情况下使⽤ Angular 会很有挑战性。
最后，虽然 Vue 和 TS 的整合可能不如 Angular 那么深⼊，我们也提供了官⽅的和，并且知道有⼤量⽤户在⽣产环境中使⽤ Vue + TS 的组合。我们也和微软的 TS / VSCode 团队进⾏着积极的合作，⽬标是为 Vue + TS ⽤户提供更好的类型检查和 IDE 开发体验。
这两个框架都很快，有⾮常类似的 benchmark 数据。你可以做更细粒度的对⽐，不过速度应该不是决定性的因素。
在体积⽅⾯，最近的 Angular 版本中在使⽤了和技术后使得最终的代码体积减⼩了许多。但即使如此，⼀个包含了 Vuex + Vue Router 的Vue 项⽬ (gzip 之后 30kB) 相⽐使⽤了这些优化的angular-cli⽣成的默认项⽬尺⼨ (~65KB) 还是要⼩得多。
Vue 相⽐于 Angular 更加灵活，Vue 官⽅提供了构建⼯具来协助你构建项⽬，但它并不限制你去如何组织你的应⽤代码。有⼈可能喜欢有严格的代码组织规范，但也有开发者喜欢更灵活⾃由的⽅式。
要学习 Vue，你只需要有良好的 HTML 和 JavaScript 基础。有了这些基本的技能，你就可以⾮常快速地通过阅读投⼊开发。
Angular 的学习曲线是⾮常陡峭的——作为⼀个框架，它的 API ⾯积⽐起 Vue 要⼤得多，你也因此需
要理解更多的概念才能开始有效率地⼯作。当然，Angular 本⾝的复杂度是因为它的设计⽬标就是只针对⼤型的复杂应⽤；但不可否认的是，这也使得它对于经验不甚丰富的开发者相当的不友好。
