搜索
Vue.js数据驱动+组件化的前端界面开发@尤小右@yyx990803vuejs.org1Vue.js概况●2013年底作为个人实验项目开始开发●2014年2月公开发布●2014年11月发布从头重写的0.11●截止2015年1月：3100+StarsonGitHub2Vue.js不是一个框架3路由视图管理数据持久化4路由视图管理数据持久化灵活的接口5简单示例QuickDemo6核心思想：1.数据驱动2.组件化7数据驱动Data-Driven8视图View用户行为UserInput数据模型Model渲染Render9视图View用户行为UserInput数据模型Model渲染Render视图只是数据的映射“真相只有一个”10DOMDOM在单页Web应用中的问题●重新渲染整个视图是昂贵的●手动更新DOM来保持视图和数据的同步很容易导致bug11ViewViewModelModel通过MVVM的数据绑定实现自动同步12DOMPOJO(原生JS对象)VueViewViewModelModel通过MVVM的数据绑定实现自动同步13varvm=newVue({el:'#demo',data:{msg:'HelloVue.js!'}})divid=demoh1{{msg}}/h1/divJavaScriptHTML14varvm=newVue({el:'#demo',data:{msg:'HelloVue.js!'}})divid=demoh1{{msg}}/h1/divJavaScript指令Directive（插值其实被编译为v-text指令）ViewModelModelViewHTML15ViewModelDOMListenersDirectivesViewModel应用逻辑全部是数据操作DOM操作封装在指令中16组件化Component-Oriented17每一个应用界面都可以看作是组件构成的NavContentItemSidebarSideItem18每一个组件都可以看做是一个ViewModelNavContentItemSidebar19所以可以把界面抽象为ViewModelTree20在Vue.js中注册组件//扩展Vue来自定义一个可复用的组件类varMyComponent=Vue.extend({template:'p{{msg}}/p',paramAttributes:['msg']})//全局注册该组件Vue.component('my-component',MyComponent)21在Vue.js模板中使用组件my-componentmsg=Hello!/my-componentmy-component组件的模板将会被填充到该元素中，而msg则会被作为数据传入该组件实例。渲染结果如下。my-componentpHello!/p/my-component22通过paramAttributes实现父子组件之间的数据传递my-componentmsg={{msgFromParent}}/my-componentrootmy-componentmsgFromParentmsg双向绑定每一个组件都默认有自己的独立作用域。23组件之间也可以通过事件系统进行通信$dispatch()24组件之间也可以通过事件系统进行通信$broadcast()25一些实现细节26基于ES5Object.defineProperty实现对POJO(原生JS对象)的观察和依赖收集ObjectsettergetterProperty收集依赖触发更新27asettergetterbWatchera.b收集依赖Directivev-text=a.bDOM{{a.b}}通知更新通知依赖收集机制的实现类似Knockout，精确到每一个属性，比脏检测效率得多，性能不受制于watcher的数量。28vm.msg='one'vm.msg='two'vm.msg='three'//只会触发一次DOM更新异步批量更新29varvm=newVue({data:{nested:{a:{b:'hi!'}}}})可以直接替换多层嵌套的对象//直接替换对象vm.nested={a:{b:'yo!'}}30vardata={msg:'hi'}varvm=newVue({data:data})可以直接修改原数据对象//直接修改原对象data.msg='changed'//DOM会在下一帧更新31varitems=[a,b,c]varvm=newVue({data:{items:items}})//下一帧会触发更新items.reverse()数组的mutating方法会触发更新32对于直接的数组替换，v-repeat会进行Array-diffing确保尽可能地复用vm和DOM元素//不会导致性能问题哟vm.items=vm.items.filter(fn)*即使用含有全新数据对象的数组替换，只要对象有uid也可以通过比较uid来达成有效复用。33//如果data上不存在prop属性，//则必须要用$set或$add才会触发更新data.$set('prop',value)data.$add('prop',value)//删除属性要用$deletedata.$delete('prop')//数组不能用arr[0]=value,要用$setarr.$set(0,value)ES5的局限：不能侦测对象属性的添加/删除34优势和使用场景35侵入性低不对整体架构做过多约束，方便与其他库或是已有的前端技术栈整合。36数据持久层DataPersistenceLayer服务器端数据库DatabaseViewViewModelModel以POJO作为Model使得Vue对于数据持久层的接口非常灵活Vue+BackboneModelVue+FirebaseVue+Meteor37鼓励模块化基于组件的开发模式有利于将界面代码自然分割成更容易维护的模块38基于CommonJS的单文件组件：Vueify通过Browserify或者Webpack这样的模块构建工具，将一个组件的模板、CSS和JS都写在同一个文件里。轻量+高性能~18kbmin+gzip，无外部依赖不依赖脏检测的高效数据绑定40Thanks@尤小右@yyx990803vuejs.org41