Vue.js实践<如何使用Vue2.0开发富交互式WEB应用>

PPT主题:Vue.js实践<如何使用Vue2.0开发富交互式WEB应用>作者:钟恒职位:360奇舞团前端工程师,声享开发者>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>提纲:1.框架2.开发3.优化(填坑)>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>框架难点:需求不断的变更框架要求:1)复用性高2)易于维护3)易于变更4)团队合作>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>前端组件化:(所谓的框架时代,以下最流行)1)Vuejs2)Angulerjs3)Reactjs>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>数据的双向绑定真的好吗？易于维护吗？双向绑定缺点:1)由于各种数据相互依赖相互绑定,导致数据问题的源头难以被跟踪到,并不容易维护2)子组件修改父组件,兄弟组件互相修改有有违设计原则Ui结构划分问题:1)组件数目过多2)单组件过重3)不便于修改4)导致复用性不高,不易于维护,不易于变更,不易于团体合作针对上述问题可以得出:1)复杂的软件必须有清晰合理的架构,否则无法开发和维护.>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>什么是MVVM ?1)Model-View-ViewModel2)ViewModel负责连接 View 和 Model3)代码演示:<div id="app">//View  {{ message }}</div>//ViewModelvar app = new Vue({  el: '#app',//View  data: {//model    message: 'Hello Vue!'  }})>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>数据驱动(数据绑定)>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>读写分离:用户行为(Usre input)->数据模型(Model)->重绘(Reader)->视图(View)->反馈给用户>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>框架:1)User--->Control--->Config(Vessel[容器])--->State-->Plugin(展示逻辑)2)业务逻辑:Config--->State--->Plugin3)交互逻辑:Control--->页面布局--->Vessel(容器)>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>Vue2.0好处:保留了双向绑定         -------易于编写交互保留驱动               -------易于开发主业务读写分离         -------易于维护业务,交互,展示,布局分离-------易于更迭>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>组件化带来的新问题 ?1)通信(Parent<--如何通信(能否双向传递数据)-->Child)    1.1)函数调用    1.2)组件树的问题    1.3)共享state        <span>{{num}}</span>        // plus        this.num++        //minus        this.num--    1.4)当数据位被多方操作    1.5)Eventbus    1.6)利用Eventbus解决异步问题    1.7)通信的选择2)复用    2.1)冗余    2.2)包装    2.3)继承3)耦合    3.1)问题:单组件修改困难,组合新组件困难,组件Debug困难    3.2)解耦的本质就是将变化分离    3.3)解决方法--->        3.3.1解耦:组件功能要单一,采用稳定的接口,处理好共享部分        3.3.2与服务端解耦:服务器端与前端体系不用,同步异步转换,多服务端/跨域的代码,统一的错误处理代码    3.4)MVC的老问题:Controller层代码冗余    3.5)减肥:抽取公用的数据处理部分,隔离变化频繁的Controller    3.6)利用Vuex优化你的model    3.7)状态机    3.8)打点    3.9)根据需求选择最合适的开发方式4)什么是SSR?    4.1)Vue的SSR    4.2)SSR的性能    4.3)对组件的要求:前后端均可运行,区分静态动态组件,数据彻底分离    4.4)离线化**以上内容均来源于SDCC2016大会PPT**