Vue开发小程序的技术原理浅析

Vue、 React 和 Angular 是目前应用最广泛的三大前端框架，仅从 GitHub 趋势，Vue 排名第一，已达到 17万 Star。

目前，不管是 BAT 大厂，或创业公司，Vue 广泛应用于任何前端工程师，Vue 都是值得学习的前端框架。

但在国内小程序成为移动开发的破局者后，Vue这个名字经常与小程序有关。让我们一起探索两者之间的关系。

第一，先认识Vue

Vue.js（读音 /vju?/，类似 view） 是构建用户界面的 渐进框架。与其它重量级框架不同，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，很容易学习，很容易与其他库或现有项目集成。另一方面，Vue 完全有能力驱动单文件组件和Vue由生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是尽可能简单API 实现响应数据绑定和组合的视图组件。

上述是Vue官方网站解释说，对于大多数用户来说，阅读仍然非常抽象和模糊，阅读后可能仍然不明白这个框架是用来做什么的，什么是渐进框架？什么是自下而上的增量开发？什么是视图层？什么是单文件组件？什么是复杂的单页应用程序？第二段中的响应数据绑定和组合视图组件是什么？

1.Vue.js到底是什么？

大概每个人都在网上浏览新闻APP或者网页，Vue.js它是一个网页版本的应用程序，用于构建各种类似的网页，内容需要根据用户的操作进行修改。

2.什么是单页应用？

单页应用程序通常是指一个页面是应用程序，当然，它也可以是一个子应用程序，例如，一个页面可以被视为一个子应用程序。单页应用程序通常有很多交互处理，页面中的内容需要根据用户的操作动态变化。

3.视图层是什么？

现在我们抽象一个网页应用，所以HTML中的DOM其实是视图，一个网页是通过的DOM通过组合和嵌套，形成最基本的视图结构CSS在基本的视图结构上，化妆使它们看起来更漂亮。最后，当涉及到交互部分时，需要使用JavaScript接受用户的交互请求，通过事件机制响应用户的交互操作，修改事件处理函数中的各种数据，如修改DOM中的innerHTML或者innerText部分。我们把HTML中的DOM可与其它部分独立划分一个层次，称为视图层。

4.响应数据绑定

这里的响应式不是@media 媒体查询中的响应布局是指vue.js它会自动响应页面中某些数据的变化。至于如何响应，您可以将以下代码粘贴到一个名为扩展的扩展器中html然后用浏览器打开文件，在文本框中输入一些文本，观察页面的变化。

5.组件化开发

作为一个单页应用程序，页面交互和结构非常复杂。一个页面上有许多模块需要编写，通常一个模块的代码量和工作量都非常大。如果它仍然按照原来的方法开发，它将会很累。在未来的产品需求变化中，修改也非常麻烦，因为害怕移动其中一个div之后，其他div跟着雪崩，整个页面都乱套，或者因为JavaScript事件泡沫机制导致部分内层的修改DOM事件处理函数后，出现了各种莫名其妙的奇怪BUG。

在面向对象编程中，我们可以用面向对象的想法将各种模块打包成类别，或者将大型业务模块分为越来越小的类别。在面向过程编程中，我们还可以将一些大功能分为许多函数，然后分配给不同的人进行开发。

在前端应用中，我们能像编程一样包装模块吗？这引入了组件开发的理念。

Vue.js单页应用程序中的各种模块通过组件分为单个组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。

二、Vue与小程序的关系

首先要说明的是Vue与小程序开发无直接关系。

但是受到Vue影响，还有Vue许多开发者，许多组织将小程序二次开发，类似于Vue以语法的形式开发小程序(最后通过自己的工具转化为本地小程序的语法)，如美团mpVue（Vue.js in mini program）。优点是减少Vue开发者学习小程序开发的成本，优化了小程序的许多缺点，如小程序不能使用Npm，不能使用CSS原生是预处理器callback语法等。

例如mpVue使用 Vue.js 基于框架开发小程序的前端框架Vue.js核心，Mpvue修改了Vue.js的 runtime 和 compiler 实现，使其能够在小程序环境中运行，从而将整套小程序开发引入Vue.js开发体验Mpvue在小程序技术体系的基础上，开发小程序将获得一些额外的能力：

-完整的组件开发能力：提高代码再利用率

-完整的Vue.js开发体验

-方便的Vuex数据管理方案：方便构建复杂应用

-快捷的webpack构建机制:定制构建策略，开发阶段 hotReload

-支持使用 npm 外部依赖

-使用Vue.js命令行工具 vue-cli 快速初始化项目

-H5 代码转换编译成小程序目标代码的能力

如果需要深入学习和理解使用，mpVue开发小程序可参考官方文件：http://mpvue.com/mpvue/#_1

三、如何让小程序发挥更大的价值

如何理解基础Vue开发小程序后，也可以了解如何更好地发挥小程序的价值，这必须提到 Hybrid 模式逐渐流行，Native App迭代不敏捷、代码堆积、多平台维护等问题远远超过 H5 的体验。

小程序容器技术已经成熟-FinClip，通过集成SDK让自己的APP小程序运行能力快。

此外，FinClip?的视图层与逻辑层分离也带来了许多好处：

1、方便多个小程序页面之间的数据共享和交互。在小程序的生命周期中，具有相同下文可以为具有原始应用程序开发背景的开发人员提供熟悉的编码体验；

2、Service和View可以防止分离和并行实现JS执行影响或减慢页面渲染有助于提高渲染性能；

3、因为JS在Service所以JS里面操作的DOM将不会对View因此，小程序小程序无法操作DOM结构的，这也使得与传统小程序相比，小程序的性能更好H5更好。

还有一点很重要与微信小程序开发规范兼容?。

也就是说，原来的通过Vue开发的微信小程序也可以顺便把这个小程序放在自己的 上，而不改变代码APP 里面。同时，后台管理页面可以统一管理自己和外部开发的小程序，并分析收集到的小程序数据。