Vue.js2.0核心思想
数据驱动:
Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性: getter和setter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。
watcher:每一个指令都会有一个对应的用来观测数据的对象,叫做watcher,比如v-text="msg", {{ msg }},即为两个watcher,watcher对象中包含了待渲染的关联DOM元素。
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的语言特性所限。
组件系统:
应用类UI可以看作全部是由组件树构成的。
注册一个组件:
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文件后缀形成单文件组件格式,方便项目架构和开发引用。
其他特性:
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
以上
转载于:https://www.cnblogs.com/albenxie-16/p/7660616.html
Vue.js2.0核心思想相关推荐
- Vue.js2.0开发环境搭建(三)
转载自 Vue.js2.0从入门到放弃---入门实例(三) 今天就来简单说一下vue-resource,这是vue的一个与服务器端通信的HTTP插件,用来从服务器端请求数据.话不多说,直接上干货吧. ...
- Vue.js2.0开发环境搭建(一)
转载自 Vue.js2.0从入门到放弃---入门实例(一) 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题 ...
- 耗时近一个月,终于录完了VUE.JS2.0前端视频教程!
这次课录制的比较辛苦,圣诞节时原本已经快录制完成了,偶然的一次,播放了一下,感觉不满意,好几篇推倒重来,所以今天才结束. vue.js2.0是Vue.JS的最新版本,视频教程还不多,如果你看到了,学到 ...
- vue.js2.0完整视频教程12套
0.1智能社vuejs(1-11章全套) 0.2英文版learing vuejs 0.3Vue.js实战小米阅读开发 0.4走进Vue.js2.0 0.5Vuejs教程45节课 0.6Vue.js+N ...
- vue.js的核心思想
vue.js的核心思想包括:数据驱动和组件化思想. 下面看一张关系图: Vue采用MVVM的设计模式,MVVM中的M---Model表示模型,是一个javascript对象:V-View是DOM也就是 ...
- RAID2.0核心思想:数据保护与物理资源管理域分离
记得在2013年末的时候,开始将存储虚拟化为主导的数据保护技术归纳为RAID2.0.从市场的角度来看,这个一个非常好的概念,一方面可以延续传统RAID的思想,大家可以很容易明白这是一种数据保护技术:另 ...
- vue.js2.0 新手开发_VueJs2.0建议学习路线
最近VueJs确实火了一把,自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢. 既然大家会看这篇文章,那么 ...
- 关于Vue.js2.0生命周期的研究与理解
写在前面:进行一些项目实践的时候,总会涉及到关于生命周期钩子或多或少的使用.因此觉得有必要单独梳理一下相关的知识点,如有理解错误的地方恳请告知修改. 总体感知 首先贴一张Vue文档给出的生命周期图示, ...
- Vue.js2.0开发环境搭建(四)
转载自 vuejs2.0从入门到放弃--入门实例(四) 最近,很多小伙伴有疑惑,想学vuejs必须先了解复杂的构建工具和命令行操作吗!!答案是否定的! 对于很多做前端的同学,涉及到命令行和构建工具 ...
最新文章
- 主流微服务全链路监控系统之战
- 学习.NET的两个网站:MSDN和Asp .NET
- 【HDU】4405 Aeroplane chess
- 洛谷 P2888 [USACO07NOV]牛栏Cow Hurdles
- 51nod 1021 石子归并 (动态规划 简单代码)
- 网站搭建从零开始(六) WordPress的基本配置
- Java学习笔记—生产者和消费者模式
- PHP生成器--动态生成内容的数组
- PHP curl传输文件的版本兼容性
- 冒泡排序c语言(包含完整代码)
- python中utf-8和gbk编码格式_python中unicode、utf8、gbk等编码问题
- 图形形状及颜色识别【Python大作业】
- 十进制与二进制相互转换(c++)
- php多级分栏,网页设计中分栏布局的几种实现方案
- 部门来了个测试工程师,一副小毛孩样,本以为很菜,谁想到...
- 设计模式 | 模板模式
- 台湾大学郭彦甫matlab百度云,台湾国立大学郭彦甫Matlab教程笔记(23) linear systems...
- 手机上, 除了游戏, 还能做什么?
- DEVONthink Pro/Server 3.6.3 中文版 文件管理用具
- 大公司的内部创业,寻求新的增长动能
热门文章
- 善用Object.defineProperty巧妙找到修改某个变量的准确代码位置
- http报文格式_理解数据通信协议的报文格式有何用?
- mysql创建存储函数报错:ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL...
- java中的static关键字总结
- shell 连接 mysql_如何把mysql语句写在shell里,运行后仍然是一个与mysql数据库连接的状态?...
- python程序的书写特点_不一样的Python代码写法,让你写出一手漂亮的代码
- Hadoop——分布式资源管理框架YARN总结
- 星空主题设计理念_敏捷协调,智慧运营:金蝶云·星空的产品设计理念与应用实践...
- python 关闭 定时开启_Qt多种定时器
- python怎样打开加密的文件_如何用Python 加密文件