vue官网学习笔记（六）列表渲染

素颜马尾好姑娘i 2022-02-20 10:22 261阅读 0赞

# 用v-for把一个数组对应为一组元素 #

我们用v-for指令根据一组数据的选项列表进行渲染。v-for指令需要使用**item in items**形式的特殊语法，**items是源数据数组**并且**item是数组元素迭代的别名**。

html:
    <ul id="example-1">
        <li v-for="item in items">
            {
       { item.message }}
        </li>
    </ul>

js:
    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ]
        }
    })

结果：

Foo

Bar

在v-for块中，我们拥有对父作用域属性的完全访问权限。**v-for还支持一个可选的第二个参数为当前项的索引**。

html:
    <ul id="example-2">
        <li v-for="(item, index) in items">
            {
       { parentMessage }} - {
       { index }} - {
       { item.message }}
        </li>
    </ul>

js:
    var example2 = new Vue({
        el: '#example-2',
        data: {
            parentMessage: 'Parent',
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ]
        }
    })

结果：

Parent - 0 - foo

Parent - 1 Bar

也可以用 of 替代 in 作为分隔符，因为它是最接近JavaScript迭代器的语法：

# 一个对象的v-for #

可以用v-for通过一个对象的属性来迭代。

html:
    <ul id="v-for-object" class="demo">
        <li v-for="value in object">
            {
       { value }}
        <li>
    </ul>

js:
    new Vue({
        el: '#v-for-object',
        data: {
            object: {
                firstName: 'John',
                lastName: 'Doe',
                age: 30
            }
        }
    })

结果：

John

Doe

你也可以提供**第二个的参数为键名**：

<div v-for="(value, key) in object">
        {
       { key }} : {
       { value }}
    </div>

firstName:John

lastName:Doe

age:30

**第三个参数为索引**

<div v-for="(value, key, index) in object>
       {
       { index }}. {
       { key }} : {
       { value }}
    </div>

0.firstName:John

1.lastName:Doe

2.age:30

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

# key #

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

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

为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一key属性。理想的key值是每项都有一个唯一id。这个特殊的属性相当于Vue 1.x 的track-by，但它的工作方式类似于一个属性，所以你需要用v-bind来绑定动态值（在这里使用简写）：

建议尽可能在使用v-for时提供给key，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

因为它是Vue识别节点的一个通用机制，key并不与v-for特别关联，key还具有其他用途。

**注意：不要使用对象或数组之类的非原始类型值作为v-for的key。用字符串或数类型的值取而代之。**

# 数组更新检测 #

### \#变异方法 ###

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

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

例：

example1.items.push({ message: 'Baz' })

### \#替换数组 ###

变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异(non-mutating method)方式，例如： filter(), concat() 和 slice()。这些不会改变原始数组，但**总是返回一个新数组**。当使用非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
        return item.message.match(/Foo/)
    })

你可能认为这将导致Vue丢弃现有DOM并重新渲染整个列表。幸运的是，事实并非如此。Vue为了使得DOM元素得到最大范围的重要而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

### \#注意事项 ###

由于JavaScript的限制，Vue不能检测以下变动的数组：

1.当你利用索引直接设置一个项时，例如：vm.items\[indexOfItem\] = newValue

2.当你修改数组的长度时，例如：vm.items.length = newLength

举个例子：

var vm = new Vue({
        data: {
            items: [ 'a', 'b', 'c' ]
        }
    })
    vm.items[1] = 'x' // 不是响应性的
    vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现和vm.items\[indexOfItem\] = newValue 相同的效果，同时也将触发状态更新：

// Vue.set
    Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)

你也可以使用**vm.$set实例方法**，该方法是全局方法**Vue.set**的一个别名：

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题，可以使用splice:

vm.items.splice(newLength)

# 对象更改检测注意事项 #

还是由于JavaScript的限制，**Vue不能检测对象属性的添加或删除**：

var vm = new Vue({
        data: {
            a: 1
        }
    })
    // 'vm.a'现在是响应式的
    
    vm.b = 2
    // 'vm.b'不是响应式的

对于已经创建的实例，Vue不能动态添加根级别的响应式属性。但是，可以使用Vue.set(object, key, value)方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({
        data: {
            userProfile: {
                name: 'Anika'
            }
        }
    })

可以添加一个新的age属性到嵌套的userProfile对象：

Vue.set(vm.userProfile, 'age', 27)

还可以使用vm.$set实例方法，它只是全局Vue.set的别名：

vm.$set(vm.userProfile, 'age',27)

有时可能需要为已有对象赋予多个新属性，比如使用Object.assign()或\_.extend()。

vm.userProfile = Object.assign({}, vm.userProfile, {
        age: 27,
        favoriteColor: 'Vue Green'
    })

# 显示过滤/排序结果 #

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。

例如：

data: {
        numbers: [ 1, 2, 3, 4, 5 ]
    }
    computed: {
        evenNumbers: function () {
            return this.numbers.filter(function (number) {
                return number % 2 === 0
            })
        }
    }

在计算属性不适用的情况下（例如，在嵌套v-for循环中）你可以使用一个method方法：

data: {
        numbers: [ 1, 2, 3, 4, 5 ]
    },
    methods: {
        even: function (numbers) {
            return numbers.filter(function (number) {
                return number % 2 === 0
            })
        }
    }

# 一段取值范围的v-for #

v-for也可以取整数。在这种情况下，它将重复多次模板。

结果：

1 2 3 4 5 6 7 8 9 10

# v-for on a <template> #

类似于v-if，你也可以利用带有v-for 的 <template>渲染多个元素。比如：

# v-for with v-if #

**注意：不推荐同时使用 v-if 和 v-for**

当它们处于同一节点，v-for 的优先级比v-if更高，这意味着v-if将分别重复运用于每个v-for循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：

上面的代码只传递了未完成的todos。

而如果你的目的是有条件地跳过循环的执行，那么可以将v-if置于外层元素（或<template>）上。如：

<ul v-if="todos.length">
        <li v-for="todo in todos">
            {
       { todo }}
        </li>
    </ul>
    <p v-else>No todos left!</p>

# 一个组件的v-for #

在自定义组件例，你可以像任何普通元素一样用v-for

<my-component v-for="item in items" :key="item.id"></my-component>

然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件例，我们要用props:

<my-component
        v-for="(item,index) in items"
        v-bind:item="item"
        v-bind:index="index"
        v-bind:key="item.id"
    ></my-component>

不自动将item注入到组件里的原因是，这会使得组件与v-for的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

下面是一个简单的todo list的完整例子：

注意：这里的is="todo-item"属性。这种做法在使用DOM模板时是十分必要的，因为在<ul>元素内只有<li>元素会被看作有效内容。这样做实现的效果与<todo-item>相同，但是可以避开一些潜在的浏览器解析错误。

Vue.component('todo-item',{
        template: '\
            <li>\
                {
       { title }}\
                <button v-on:click="$emit(\'remove\')">Remove</button>\
            </li>\
        ',
        props:['title']
    })
    new Vue({
        el: '#todo-list-example',
        data: {
            newTodoText: '',
            todos: [
                {
                    id: 1,
                    title: 'Do the dishes',
                 },
                {
                    id: 2,
                    title: 'Take out the trash',
                 },
                {
                    id: 3,
                    title: 'Mow the lawn',
                 }
            ]
            nextTodoId: 4
        },
        methods: {
            addNewTodo: function () {
                this.todos.push({
                    id: this.nextTodoId++,
                    title: this.newTodoText
                })
                this.newTodoText = ''
            }
        }
    })