vue直接添加属性是否响应式

 根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

<template>
    <div class="container">
        <ul>
            <li v-for="item in peopleList" :key="item.id">
                姓名：{{ item.name }}；年龄：{{ item.age ? item.age : "-" }}
                <button @click="changeAge(item)">改变年龄</button>
            </li>
        </ul>
        <button @click="addNewPrototype">添加新属性</button>
    </div>
</template>

<script>
export default {
    name: "isXYSList",
    data() {
        return {
            peopleList: [
                {
                    id: 1,
                    name: "小明",
                },
                {
                    id: 2,
                    name: "小蓝",
                },
                {
                    id: 3,
                    name: "小红",
                },
            ],
        };
    },
    methods: {
        //添加新属性 测试是否响应式
        addNewPrototype() {
            this.peopleList.forEach(item => {
                // item.age = 16; //非响应式
                this.$set(item, "age", 16); //响应式
            });
            console.log(this.peopleList, "1");
        },
        changeAge(item) {
            item.age = 15;
            console.log(this.peopleList, "2");
        },
    },
};
</script>

<style lang="less" scoped></style>