数据驱动:前端
Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性: getter和setter(因此只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。vue
watcher:每个指令都会有一个对应的用来观测数据的对象,叫作watcher,好比v-text="msg", {{ msg }},即为两个watcher,watcher对象中包含了待渲染的关联DOM元素。webpack
1 <div id="app"> 2 {{ message }} 3 </div> 4 var app = new Vue({ 5 el: '#app', 6 data: { 7 message: 'Hello Vue!' 8 } 9 })
基于依赖收集的观测机制原理:程序员
1 将原生的数据改形成 “可观察对象”,一般为,调用defineProperty改变data对象中数据为存储器属性。一个可观察对象能够被取值getter,也能够被赋值setter。 2 在解析模板,也就是在watcher的求值过程当中,每个被取值的可观察对象都会将当前的watcher注册为本身的一个订阅者,并成为当前watcher的一个依赖。 3 当一个被依赖的可观察对象被赋值时,它会通知notify全部订阅本身的watcher从新求值,并触发相应的更新,即watcher对象中关联的DOM改变渲染。
依赖收集的优势在于能够精确、主动地追踪数据的变化,不须要手动触发或对做用域中全部watcher都求值(angular脏检查实现方式的缺点)。特殊的是,对于数组,须要经过包裹数组的可变方法(好比push)来监听数组的变化。在添加/删除属性,或是修改数组特定位置元素时,也须要调用特定的函数,如obj.$add(key, value)才能触发更新。这是受ES5的语言特性所限。web
组件系统:vue-router
应用类UI能够看做所有是由组件树构成的。vuex
注册一个组件:数组
1 Vue.component('my-component', { 2 // 模板 3 template: '<div>{{msg}} {{privateMsg}}</div>', 4 // 接受参数 5 props: { 6 msg: String 7 }, 8 // 私有数据,须要在函数中返回以免多个实例共享一个对象 9 data: function () { 10 return { 11 privateMsg: 'component!' 12 } 13 } 14 }) 15 <my-component msg="hello"></my-component>
组件的核心选项架构
1 模板(template):模板声明了数据和最终展示给用户的DOM之间的映射关系。 2 初始数据(data):一个组件的初始数据状态。对于可复用的组件来讲,这一般是私有的状态。 3 接受的外部参数(props):组件之间经过参数来进行数据的传递和共享。 4 方法(methods):对数据的改动操做通常都在组件的方法内进行。 5 生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,最新2.0版本对于生命周期函数名称改动很大。 6 私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件能够声明本身的私有资源。私有资源只有该组件和它的子组件能够调用。
Webpack是一个开源的前端模块构建工具,它提供了强大的loader API来定义对不一样文件格式的预处理逻辑,这是.vue后缀单文件组件形式的基础。因此在此基础上,尤大开发的vue-loader容许将模板、样式、逻辑三要素整合在同一个文件中,以.vue文件后缀造成单文件组件格式,方便项目架构和开发引用。app
其余特性:
1 异步批量DOM更新:当大量数据变更时,全部受到影响的watcher会被推送到一个队列中,而且每一个watcher只会推动队列一次。这个队列会在进程的下一个 tick异步执行。这个机制能够避免同一个数据屡次变更产生的多余DOM操做,也能够保证全部的DOM写操做在一块儿执行,避免DOM读写切换可能致使的layout。
2 动画系统:Vue.js提供了简单却强大的动画系统,当一个元素的可见性变化时,用户不只能够很简单地定义对应的CSS Transition或Animation效果,还能够利用丰富的JavaScript钩子函数进行更底层的动画处理。
3 可扩展性:除了自定义指令、过滤器和组件,Vue.js还提供了灵活的mixin机制,让用户能够在多个组件中复用共同的特性。
总结:
Vuejs学习曲线很是平缓,主要是文档实在太优秀了,旁证了设计师出身的程序员有多可怕。其轻量、高性能的特色,对于移动场景也有很好的契合。更重要的是,设计完备的组件系统和配套的构建工具、插件,使得Vue.js在保留了其简洁API的同时,也已经彻底有能力担当起复杂的大型应用的开发。
本人构建Vue WebApp技术栈:vuejs + vuex + vue-router + vue-resource + vux(UI库) + webpack
以上