Vue 数组

对象的数组属性存在

一般情况下，data() 返回的 JSON 中 user 的数组属性 roles 预先定义:

<template>
    <div class="about">
        <Button @click="changeRole1">修改角色一</Button>
        <Button @click="changeRole2">修改角色二</Button>

        <div v-for="role in user.roles" :key="role.value">
            {{ role.name }} - {{ role.value }}
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user: {
                roles: [
                    { name: 'student', value: 1 },
                    { name: 'teacher', value: 2 },
                ]
            }
        };
    },
    methods: {
        changeRole1() {
            // [1] 直接给数组赋值，界面响应更新
            this.user.roles = [{ name: 'president', value: 3 }];
        },
        changeRole2() {
            // [2] 修改数组的内容，界面响应更新
            this.user.roles.push({ name: 'admin', value: 4 });
        }
    }
};
</script>

点击按钮修改数组内容后界面立即响应。

对象的数组属性不存在

当 user 的数组属性 roles 没有在 data() 中预先定义，v-for 也能正常执行，但不会执行 v-for 的 :key 绑定和循环中的内容，所以不会报错:

<template>
    <div class="about">
        <Button @click="changeRole1">修改角色一</Button>
        <Button @click="changeRole2">修改角色二</Button>

        <div v-for="role in user.roles" :key="role.value">
            {{ role.name }} - {{ role.value }}
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user: {} // user.roles 没有预先定义
        };
    },
    methods: {
        changeRole1() {
            // [1] 直接给数组赋值
            this.user.roles = [{ name: 'president', value: 3 }];
        },
        changeRole2() {
            // [2] 通过 this.$set 给数组赋值
            this.$set(this.user, 'roles', [{ name: 'admin', value: 4 }]);
        }
    }
};
</script>

情况比较复杂:

1. 点击修改角色一，再点击修改角色二，界面没有响应
2. 点击修改角色二，roles 变成响应式属性，界面响应更新，再点击修改角色一，界面响应更新

根数组属性不存在

如果假设数组直接是 this 的属性，但没有预先定义，则 v-for 直接报错:

Property or method “roles” is not defined on the instance but referenced during render.

<template>
    <div class="about">
        <div v-for="role in roles" :key="role.value">
            {{ role.name }} - {{ role.value }}
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
};
</script>