Vue的初步介绍

---

前言

Vue是一个渐进式的框架:

1. 渐进式意味着你可以将Vue作为你应用的其中一部分嵌入进项目，这就意味着无论该项目之前是用什么技术开发的，我们都可以对其一部分或者整理进行重构，给作者带来更丰富的开发体验。
2. 当然我们可以用Vue的核心库以及其生态系统（Core+Vue+router+Vuex）开发新的项目。

Vue的特点:

• 解耦视图和数据（申明式编程好处）
• 可复用的组件
• 前端路由技术 router
• 状态管理
• 虚拟DOM

---

一、Vue安装

1. CDN引入 （这边需要去CDN服务器下载，所以还是需要时间，建议直接下载引用）

	<!-- 对于制作原型或学习，你可以这样使用最新版本。这里面包含源代码,有帮助的命令行警告,适合开发环境 --> 
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!-- 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏。当然这里面对文件进行了压缩，提高了加载速度，适合生产环境 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

2. 直接用 <script>引入 （官网直接下载源文件）
   开发环境 https://vuejs.org/js/vue.js
   生产环境 https://vuejs.org/js/vue.min.js (删除了警告，33.30KB min+gzip)
   注意：在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

3. npm安装 （需要安装node）
   在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

   # 最新稳定版
   $ npm install vue
   

二、Vue的MVVM思想

        MVVM(Model-View-ViewModel)是一种软件架构模式。他有助于将图形用户界面的开发与业务逻辑或后端逻辑或后端逻辑(数据模型)的开发分离开来。

         1. 模型：数据模型，代表数据访问层，定义数据和业务逻辑，可以使我们固定的数据或者请求下来的数据。
         2. 视图：也称之为DOM层，UI视图，用来展示各种信息。
         3. 视图模型：同步View 和 Model的对象，实现了数据绑定和DOM监听。

        在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel实现View和Model之间的绑定和通讯，View和Model之间的交互是双向的，所以无论其中一方的数据被修改，修改后的数据会同步到另外一方上。当然，这也使得视图和数据完成解耦。当然也实现了DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

        Vue主要采用的是Object.defineProperty，他会将数据转为getter/setter（默认值为undefined）。使用的设计模式是观察模式。

        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 方法，订阅者收到通知后对视图进行相应的更新。一个具有注脚的文本。¹

        缺点：对于简单的UI来说，实现MVVM的开销操作是"过度的"。对于较为庞大的应用来说，推广ViewModel变得更加困难。因为，较为庞大的应用程序中，使用数据绑定操作会增加相当大的内存消耗。

        需要理解Object.defineProperty()的小伙伴，可以参考：Object.defineProperty()。
        另外，需要了解双向绑定原理的小伙伴可以参考：vue的双向绑定原理及实现。

---

1. 摘自https://www.cnblogs.com/goloving/p/8520030.html ↩︎