前端框架 Vue 初探

jopen 4年前

一、前言

前几日使用微信网页版时,好奇这个网页用了什么前端框架。用Chrome的开发者模式一探究竟,发现原来用了一个名叫  Angular 的框架。好吧,既然微信用了,那我也不妨看看。等等,你这篇文章的标题不是“初探Vue”吗?鬼扯什么Angular呢?

好吧,我承认有些跑题。是的,我原本是要学着用Angular的,但是翻看网贴和资料后,发现有许多类似的框架,着力解决“在浏览器端如何以优雅的方式动态生成html网页 ”的问题 。其中就有前Google员工,咱大中华子民 @ youyuxi 尤小右同学开创的框架 Vue。

OK,总算回到正题了。

于是借着这个由头,翻看了一些对比各类流行前端框架优劣的文章。最终,我选择先拿 Vue 用用,试着改造我的部分已有业务。

我选择Vue的原因是:它似乎能够优雅并且简单地解决我的问题——页面布局和数据模型可以有很清晰的边界,并且能够以松散的方式结合或关联。这里还要插一句:我认为前端的展现,最后能和js 百分百的兼容。我讨厌、反感使用jsp标签,使用s:iterator,使用el表达式!所以,能够使用js语法来实现渲染,是我梦寐以求的!

好吧,实际体验又是如何?

二、列表的渲染

当然,一般的体验都是关于Hello, world 如何实现。但那个太初级,我们直接上高级一些的。

假如我有一个表格需要呈现,该如何做?

1. 首先要引入 vue 库的 js,参见后文链接;注意:开发期间一定要引入开发版,否则查起问题来完全找不到北。

2. 要渲染的表格(略去table头),形如:

<tbody id="dataList" >   <tr v-for="item in items" id="row_{{$index}}" >      <td>{{item.dataId}}</td>      <td>{{item.appKey}}</td>                  ....           </tr>      </tbody>

3. js的部分,需要创建 vue 对象,来关联DOM元素和数据,并最终实现数据同步。

比如以下代码:

vueItems = new Vue({     el: '#dataList',     data: {       items: [       ]     }   });

4. OK,到目前为止,我们的 vueItems 对象已经和 id 为 "dataList" 的 DOM 元素挂钩了。并且,通过在 html 里面 tr 一节的 "v-for" 属性,表明了要通过对 vueItems 对象的 数组元素进行遍历来渲染出表格的行数据。

5. 因此,接下来就是往 vueItems.items 里面放入数据的过程。稍等一下,为何是 vueItems.items, 而不是 vlueItems.data.items 呢?如果你和我一样有这个想法,那么很不幸你被误导了。构建 vue 对象时,传入的 对象的 data 属性,并不在后续的 vue 对象中真实存在。要访问数组的模型,必须用 vueItems.items。

6. OK,不论数据来源于动态网页的生成过程,还是ajax 请求得到,总归会有一个 JS 的数组对象作为原始的数据。假设它就是 list 对象。那么,这时需要对list进行遍历,将list对象经过处理后,形成 vueItems 的真正用来渲染的数据。我的惯例是我宁愿用js来实现,而不愿意把这个过程放到模版里。

所以就有类似以下的代码:

for (var key in list) {      <span style="white-space:pre"> </span>var vueItem = {};       var dataItem = list[key];       vueItem.app_name = dataItem.app_name == null ? "--" : dataItem.app_name;   vueItem.app_key = dataItem.app_key == "" ? "--" : dataItem.app_key;   vueItem.consume_fund = dataItem.consume_fund / 1000;   vueItem.reason = dataItem.reason == 0 ? "成功" : "错误码(" + dataItem.reason + ")";     vueItems.items.push(vueItem);  }

其中,最要紧的是就是最后一句 :

vueItems.items.push(vueItem);

这是Vue 这个框架神奇的地方:将页面渲染的细节隐藏起来,代码简洁、优雅。

我调试了代码,表格的行按照要求渲染出来, 大功告成!除了有个细节以外,即包含 {{}}内容的模版行会显示一下,然后隐藏。这个好解决,就是把tbody先设为隐藏,等数据加载好了,再显示即可。所以改进后的数据模版是这样的:

<tbody id="dataList" style="display:none;">   <tr v-for="item in items" id="row_{{$index}}" >      <td>{{item.dataId}}</td>      <td>{{item.appKey}}</td>                  ....           </tr>      </tbody>

然后js代码里要加上一句:

$("#dataList").show();

一切显得很完美!

正当我准备收工的时候,坏了。由此也引出下一个章节。

三、意料之外的异常

我突然发现,当我页面上的条件更改后,重新获取数据,再次使用 vue做 渲染,结果居然抛出了异常。这个异常不是在我的js里面抛出,而是在另外的线程,在 vue 的延时更新的定时器里抛出的。

Uncaught TypeError: Cannot read property 'removeChild' of null   remove @ vue.js:1176   (anonymous function) @ vue.js:1028   applyTransition @ vue.js:1056   removeWithTransition @ vue.js:1027   singleRemove @ vue.js:4483   remove @ vue.js:4985   diff @ vue.js:4816   update @ vue.js:4728   Directive._bind._update @ vue.js:7708   Watcher.run @ vue.js:3257   runBatcherQueue @ vue.js:2990   flushBatcherQueue @ vue.js:2964   nextTickHandler @ vue.js:434

看到这个错误, 我一下傻了。老革命遇到新问题了。这,,,这框架怎么了?不是很行的嘛?不是大牛开发的吗?!!!

我反复看了代码,没问题啊。难道真的是框架的问题。OK,我弄一个干净的列表的Demo,试试。

结果,新做的Demo没问题。这下没辙了。又怀疑其他,,,,,,折腾了十几分钟。。。。。这里略去N字以及苦水若干升。

绝望之中, 我仔细看了看这个异常的内容:Cannot read property 'removeChild' of null

我似乎悟到一些什么。

我一拍大腿,明白了,NND(我TM猪头啊,...这里又略去N字)。原来,我改造代码时,忘记将原先的一行代码去掉了,这行代码是直接访问DOM将表格的数据清除。因为当用户再次点击查询时,需要将原数据删除,然后重新append新的行。

我将上述这句代码删除,这回终于OK 了!

原来,在Vue里面,如果DOM元素已经绑定了Vue框架,则不能再通过DOM直接进行删除,必须要通过Vue的对象来删除。至少我使用的Vue 1.0.13 版本是这个情况。

好吧!切切!以后不能再犯这种低级错误了!

四、后记

前述那个异常,到底是要容错还是应该抛出异常?似乎容错也说得通。所以我将这个情况发了个推告知给作者,让他评估一下。因为时差的关系,他还没有回复我。

来自: http://blog.csdn.net/musicwind/article/details/50519471