Vue-概念理解

更多详细内容，能够查看原文连接： Vue-概念理解

• 渐进式框架

  • 组件系统
  • 客户端路由
  • 状态管理
  • 构建工具
• 虚拟DOM
• MVVM模式
• MVX模式是什么

渐进式框架

Vue.js是一套构建用户界面的渐进式框架。

声明式渲染和组件系统是Vue的核心库所包含内容，而客户端路由、状态管理、构建工具都有专门解决方案。

声明式渲染

全部的逻辑尽量在状态的层面去进行，当状态改变的时候，View应该是在框架帮助下自动更新到合理的状态。

在Vue2.0中，渲染层的实现作了根本性改动，那就是引入了虚拟DOM。

Vue的编译器在编译模板以后，会把这些模板编译成一个渲染函数 。而函数被调用的时候就会渲染而且返回一个虚拟DOM的树 。

当咱们有了这个虚拟的树以后，再交给一个patch函数，负责把这些虚拟DOM真正施加到真实的DOM上 。在这个过程当中，Vue有自身的响应式系统来侦测在渲染过程当中所依赖到的数据来源。在渲染过程当中，侦测到的数据来源以后，以后就能够精确感知数据源的变更。到时候就能够根据须要从新进行渲染。当从新进行渲染以后，会生成一个新的树，将新树与旧树进行对比，就能够最终得出应施加到真实DOM上的改动。最后再经过patch函数施加改动。

在Vue2.0的路由和内部的一些实践上，都大量地应用渲染函数作复杂的抽象组件 ，好比过渡动画组件以及路由里面的link组件，都是用渲染函数实现的，同时还保留了它自己的依赖追踪系统。

Vue的依赖追踪经过ES5的 Object.defineProperty 方法实现。好比，咱们给它一个原生对象，Vue会遍历这个数据对象的属性，而后进行属性转换。每个属性会被转换为一个 getter 和一个 setter。同时每一个组件会有一个对应的 watcher 对象，这个对象的职责就是在当前组件被渲染的时候，记录数据上面的哪些属性被用到了。

例如，在渲染函数里面用到A.B的时候，这个就会触发对应的 getter。整个渲染流程具体要点以下：

• 当某个数据属性被用到时，触发 getter，这个属性就会被做为依赖被 watcher 记录下来。
• 整个函数被渲染完的时候，每个被用到的数据属性都会被记录。
• 相应的数据变更时，例如给它一个新的值，就会触发 setter，通知数据对象对应数据有变化。
• 此时会通知对应的组件，其数据依赖有所改动，须要从新渲染。
• 对应的组件再次调动渲染函数，生成 Virtual DOM，实现 DOM 更新。

组件系统

在Vue中，父子组件之间的通讯是经过 props 传递。从父向子单向传递；而若是子组件想要在父组件做用里面产生反作用，就须要去派发事件。这样就造成一个基本的父子通讯模式。

客户端路由

有一个重要的功能叫作 deep-linking，也就是当用户浏览到一个URL，而后把它传给另外的人或者复制从新打开，应用须要直接渲染出这个URL对应的状态。这就意味着应用的URL和组件树的状态之间有一个映射关系，客户端路由的职责就是让这个映射关系声明式地对应起来。

配合Webpack还能够实现基于路由的懒加载，一条路径所对应的组件在打包的时候，会分离成另一块，只有当该路由被访问的时候，才会被加载出来。

状态管理

图中的这三个东西是一个单向数据流，State 驱动 View 的渲染，而用户对 View 进行操做产生 Action，会使State产生变化，从而致使 View 从新渲染。

构建工具

npm install -g vue-cli
vue init webpack-simple my-app
cd my-app
npm install 
npm run dev

虚拟DOM

利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM。

MVVM模式

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专一于 View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。ViewModel负责链接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

Vue 双向绑定原理

Vue.js 是采用 Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。当把一个普通 Javascript 对象传给 Vue 实例来做为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，可是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

Observer 数据监听器，可以对数据对象的全部属性进行监听，若有变更可拿到最新值并通知订阅者，内部采用 Object.defineProperty的 getter和 setter来实现。
Compile 指令解析器，它的做用对每一个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
Watcher 订阅者， 做为链接 Observer 和 Compile 的桥梁，可以订阅并收到每一个属性变更的通知，执行指令绑定的相应回调函数。
Dep 消息订阅器，内部维护了一个数组，用来收集订阅者（ Watcher），数据变更触发 notify 函数，再调用订阅者的 update 方法。

当执行 new Vue() 时，Vue 就进入了初始化阶段，一方面 Vue 会遍历 data 选项中的属性，并用 Object.defineProperty 将它们转为 getter/setter，实现数据变化监听功能；另外一方面，Vue 的指令编译器 Compile 对元素节点的指令进行扫描和解析，初始化视图，并订阅 Watcher 来更新视图， 此时 Wather 会将本身添加到消息订阅器中(Dep),初始化完毕。

当数据发生变化时，Observer 中的 setter 方法被触发，setter 会当即调用 Dep.notify()，Dep 开始遍历全部的订阅者，并调用订阅者的 update 方法，订阅者收到通知后对视图进行相应的更新。

MVX模式是什么

MVC