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