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**
Vue.js实践<如何使用Vue2.0开发富交互式WEB应用>
最新推荐文章于 2024-09-15 00:30:13 发布