vue学习笔记1：v-for渲染的“就地复用”策略

今天开始学习前端最流行的框架之一：vue.js，之前大概看过一些AngularJS的文章，但没有仔细学习过一个框架，所以这应该是我学习的第一个前端框架。好记性不如烂笔头，在此写一些学习笔记，以记录学习过程。

对我来说，学习一个东西的方式是在使用过程中慢慢了解熟悉它，在看了vue官方文档的安装和起步两个章节后，我打算先写一个小demo熟悉一下学习到的简单语法，就是一个todo list.

这个todo list的主要功能是添加，删除todo事项，以及事项的完成和撤销完成，并使用localStorage在客户端存储数据。图如下：

写完之后，我发现一个问题，就是当我点击列表第一项的checkbox表示完成这项todo时，下一项的checkbox被自动选中（此时原来的第一项已经移动到已完成列表，这一项变成第一项），我觉得很奇怪，测试了一番又发现，在已完成列表中取消完成也会有这种情况，总之点击之后checkbox的选中情况有点错乱。

找bug过程就不说了，也许应当先多阅读阅读官方文档再下手写的。

部分代码如下：

    
    

    X

computed:{
    unFinishedList:function(){
        return this.items.filter(function(item){
            return !item.isFinished;
        })
    }
}

问题就出v-for的渲染上,官方文档上有这么一段话：

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
这个默认的模式是有效的，但是只适用于不依赖子组件状态或临时 DOM 状态（例如：表单输入值）的列表渲染输出。

因为 “就地复用” 策略，所以更新渲染todo列表时，第一个checkbox仍然是选中的。

解决方法有两个，一个是为每个li添加key,文档中还有这么一段话：

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

这是一个解决方法，但不是最好最有效的，文档又说：

建议尽可能使用 v-for 来提供 key ，除非迭代 DOM 内容足够简单，或者你是故意要依赖于默认行为来获得性能提升。

因为这个demo比较简单，所以其实不必要设key，还有一种方法就是todo事项的事件不一定要用v-on:click，我在checkbox的点击上用的是v-on:click="toggleFinish(item)来切换状态，但其实大可不必如此，只要设置v-model="item.isFinished"就可以达到同样的效果。

对比一下还是第二种方法比较好，因为文档只看了起步，所以写的时候没考虑到用这个，直接用了click事件。不过了解一下v-for渲染时的“就地复用”策略也是好的。

PS：第一次写博客，可能比较啰嗦，因为发现记性不好使了，一个坑反复跳，过几个星期就忘了，所以打算写一写，可能没有什么干货，权当做笔记了，如果有写的不对的地方，还望路过的大神指点一二，感谢！