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

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

作者:钟恒
职位:360奇舞团前端工程师,声享开发者
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
提纲:
1.框架
2.开发
3.优化(填坑)
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
框架难点:需求不断的变更
框架要求:
1)复用性高
2)易于维护
3)易于变更
4)团队合作
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
前端组件化:(所谓的框架时代,以下最流行)
1)Vuejs
2)Angulerjs
3)Reactjs
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
数据的双向绑定真的好吗？易于维护吗？
双向绑定缺点:
1)由于各种数据相互依赖相互绑定,导致数据问题的源头难以被跟踪到,并不容易维护
2)子组件修改父组件,兄弟组件互相修改有有违设计原则

Ui结构划分问题:
1)组件数目过多
2)单组件过重
3)不便于修改
4)导致复用性不高,不易于维护,不易于变更,不易于团体合作

针对上述问题可以得出:
1)复杂的软件必须有清晰合理的架构,否则无法开发和维护.
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
什么是MVVM ?
1)Model-View-ViewModel
2)ViewModel负责连接 View 和 Model
3)代码演示:
<div id="app">//View
  {{ message }}
</div>

//ViewModel
var 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--->Plugin

3)交互逻辑: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**