Vue笔记（6） - v-for详解及set方法

https://cn.vuejs.org/v2/guide/list.html

1、key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。（不建议用index）

需要用 v-bind 来绑定动态值 (在这里使用简写)：

另外，Vue中的template标签相当于ng中的ng-container标签。

2、数组更新检测

变异方法

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

替换数组

直接替换整个数组
app.list = [{id: 001, text: 'test'}]

注意，通过数组下标来修改或者添加是无效的，页面不会重新渲染，即使数据已经改变了。
app.list[1] = {id: 002, text: 'haha'}

3、一个对象的 v-for

v-for还可以遍历对象呢。

            {{key}} : {{val}}
            {{i}}
        
...
data: {
    person: {
                    name: 'heqi',
                    age: 20,
                    sex: 'male'
                }
}

可传入一个或三个值，分别是对象的key， value 和 index。
同样的，不可直接用点表示法向对象添加属性，如：
person.address = 'beijing' // 页面不会改变
但可以直接修改已有的属性，以及替换整个对象来修改。

注意：在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

用Vue.set方法或实例上的set来修改

Vue.set是一个全局的方法

Vue.set(app.person, 'beijin', 'address')   // 修改对象，第二个参数是value,第三个参数才是key
Vue.set(app.list, 4 ,{id: 5, text: 'deyi'})    // 修改数组，第二个参数为下标索引

同时，vue的实例上也有这个方法：

app.$set(app.person, 'value', 'key');
app.$set(app.list, 4 ,{id: 5, text: 'deyi'})