vue的使用三点小记

这几天,简单涉猎下vue。简单到什么程度呢?创建了一个App,2个页面涉及数据交互,用到了vue-router、vue-resource。
碰巧@大漠穷秋发了博文用Angular对(开)比(黑)vue。
我拾人牙慧,挖掘一下vue几个不错的点。

  1. 双向数据绑定
//AngularJS
<input ng-model="data">
<p>{{data}}</p>

//Angular (2.0)
<input type="text" [(ngModel)]="data" />
<p>{{data}}</p>

//vue
<input v-model="data">
<p>{{data}}</p>

双向数据绑定,写法并不重要,直观上给人已简洁、易懂即可。
AngularJS 1.x 实现了一套脏值检查,首先为每个进行数据绑定的HTML标签创建一个watcher(什么是watcher?参见)。
当数据模型被修改时,启动一轮$digest循环,watcher队列里的对象遍历一遍。队列中会访问数据模型对象的副本,将发生变动前的对象和改变后的对象进行深比较。
这个数据对象是树形结构的,如果层级非常深,那么遍历(递归)消耗的资源就多。AngularJS在实现数据绑定更新的做法并不先进。

Angular 2.x 通过引入Zone.js,代理了数据模型的修改。回顾一下,浏览器环境中,3个典型异步回调可能造成数据模型修改:事件回调、Ajax回调、定时器回调。
Zonejs将这些回调拦截,如果发现数据被修改,会通知Angular数据被更新。关于Zonejs,这个讲的不错->链接

vue 1.x的实现方式与AngularJS 1.x相似,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的。在2.0版本中,vue实现了vdom。对,是react里面的那套机制。

这里推荐一篇专门讲解数据更新机制的文章,链接
我们继续。

  1. 动态组件渲染
    在Angular中,这个很容易实现,使用ngIF就可以轻松解决,来看下vue怎么做:

多个组件可以使用同一个挂载点,然后动态地在它们之间切换。使用保留的 元素,动态地绑定到它的 is 特性:

<!-- 动态组件由 vm 实例的属性值 `compID` 控制 -->
<component :is="compID"></component>
<!-- 也能够渲染注册过的组件或 prop 传入的组件 -->
<component :is="$options.components.child"></component>

keep-alive
如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数:

<keep-alive>
  <component :is="compID">
    <!-- 非活动组件将被缓存! -->
  </component>
</keep-alive>
  1. HTML解析器
    组件运行的大致流程为:

– 浏览器加载完component核心库,找到根组件
– 接着查找根组件内层所有的自定义组件
– 调用组件编译器对组件进行预处理
编译过程采用了htmlparser。
无意中发现了这个htmlparser,来自于 John Resig,查了一下,立刻路转粉。
HTMLParser

小结,这次vue的实践主要是通过lavas脚手架搭建webapp,接下来将产出一个系列,对lavas开发进行解析。

发表评论

电子邮件地址不会被公开。 必填项已用*标注