速记：SFDC 2016 - 360奇舞团 钟恒 《使用 Vue.js 2.0 开发高交互 WEB 应用》.docxVIP

主题：2016杭州开发者大会—前端分会场 时间：2016年12月10日下午1：40 会场主持人：独立开发者(时光相册) 郭宇 议题：《使用 Vue.js 2.0 开发高交互 WEB 应用》 讲师：360奇舞团 钟恒 钟恒：好，刚刚大家听完了Angular，马上讲Vue.js，好像打擂台一样，其实不是这样子。 我们题目很一样，他刚刚讲富应用，我也是讲富应用。我是钟恒，来自360奇舞团。这个二维码是我线上的PPT，如果大家有兴趣可以扫一下。有多少人用Vue，还是很多的。 开发时经过的三个步骤，开发前要想一个比较好的架构，开发起来比较轻松，维护起来比较好；接下来进入开发的阶段，开发就很爽，吭哧吭哧写代码。写完代码之后出来一看有很多坑，可能是框架的坑，可能是自己写出来的坑，要把它填完；填坑的优化方式，今天主要从这三个内容讲我的内容。 首先，架构。 我们是一个交互的富应用，富应用最大问题是交互很多，可以看到这个JIF图，现在做的应用交互图。会发现它经常在变，所谓交互的本质就是界面在变化。界面变化就意味着你在写代码的时候，要写出很多个界面代码，界面之间还有各种状态，通过这种逻辑把它推进，更改。所以任何一个富交互应用就意味着它的代码量很大，是大代码量的应用。我们在进行架构时就要想，怎么样把代码省一下，不要写这么多东西，让我们又好开发，又好维护，这是架构之前第一个想的点。 第二，很多程序员很讨厌的事，产品经理说改一下功能，改一下需求。但这个东西没有办法避免，因为任何一个产品都是在迭代中生长进步的。如果我们写出来代码是不可更改的话，就相当于是废弃的。每做一版都要重新写，所以在做架构时要想一下，怎么样把这么大代码的应用更好更改，更好的应用，这个答案很明显，要做一个组件化。如果做了组件化，组件被复用，代码量通过复用方式就可以减少。当我们后期需要更改和维护时，只需要把相应组件进行修改就好了，大大加快了开发的量和维护的过程。 前端界一般怎么做呢，我们进入到框架时代，尤其这三个东西，每次讲这个东西都要引战，很害怕讲。Angular，它很重，我们不需要想太多架构的东西，但它有性能的问题，各种各样的问题。Vue虽然很轻，但也有本身的问题。就因为它太轻了，用的时候有自己没有想到的地方，就会出现坑，或者没有做好的。我们不讲它的好处、劣势，要根据自己的需求选择，最终根据项目的需求选择了Vue。 选择Vue这样一种框架，开发框架有什么变化。选择了框架，我们都会进行数据绑定。 （图示）这是应用里的组件，0-36px的变化，内部逻辑的变化过程，这是一个数据流，另外一个数据流是用户拖动发生的事件。以往写代码要应对这两个数据流比较复杂，第一，用一个事件去监听用户有拖动。第二，内部要搭建一些监听，推送给系统告诉数据发生了变化。在Vue上的代码，我们只需要用一个v-model绑住。如果有三个组件，通过数据绑定把三个串在一块。A的数据改变了，通过数据绑定，B、C就自动改。不用写代码，管起来很容易，这样带来的问题是很难维护。双向数据肯定比单向数据难以维护的，比如B是出了差错，发现它的数据改错了，就要想到底是A还是C改错了。A和C绑定的事件，分分钟两路数据变成四路数据，四路数据变成八路数据，维护起来很痛苦。 现实中尽量考虑数据设计是不是真的要用到双向数据流，写的时候好好思考这个问题。事实上要用到双向数据流，基本只有交互场景才能用到。在应用中我会和团队说，要用到双向数据流这样一种思想上的话，尽量在交互性应用中去做。如果是其它类组件，保持数据流的单向性。 现在开发页面很简单，把页面切成一块块，用组件拼起来就好了。通过UI结构，发现页面变成一个个零件。我们的做法是像堆积木一样堆起来，很棒，很轻松。但在富应用中带来的问题是组件很多，如果堆得不好，分分钟散掉，这很痛苦。第二，富交互，每个组件会变得非常重，一个文件中有几百行代码，上千行代码，理解起来很痛苦。 还有不便于更改，很多时候内部逻辑不需要更改，无论是用什么交互方式，传回来只是一个数据。如果切割做得不够，可能你的复用性就不够，整个组件都要换。这样频繁换组件，对整个应用维护也是不好的，复杂的软件必须有清晰合理的架构。 （图示）每个组件所做的只有两件事，把数据獬进model里面。把model展示出来，这是数据驱动思想带来的好处。 我们真正做起来的时候，View官方给的图，一个组件内部有一个state和view，这是一个渲染的过程。这个过程很简洁，就是写state和写state的过程，读写是分离的。STATE渲染成view，读写分离，就推了CONFIG出来。交互方式可以高度抽象化，比如在PC上面的交互永远是拖拽、点击，或者输入各种各样文本，所