Vue2(笔记13) - Vue核心 - 监测数组数据、添加响应式属性

需求：响应式更新数组数据

监测数组数据

<div id="root">
    <h2>{{name}}</h2>
    <h3>学校: <a :href="school.url" @click.prevent.stop="">{{school.name}}</a></h3>
    <h3>姓名: {{student.name}} {{student.age}}岁</h3>
    <h3>爱好：</h3>
    <ul>
        <li v-for="(h,index) in student.hobby" :key="index">
            {{h}}
        </li>
    </ul>
    <h3>朋友们</h3>
    <ul>
        <li v-for="(f,index) in student.friends" :key="index">
            {{f.name}}-{{f.age}}
        </li>
    </ul>
</div>

提示：像输出朋友们一样的写法，列表渲染 ​v-for​ 输出爱好；

const vm = new Vue({
    el: "#root",
    data: {
        name: '学生信息',
        school: {
            name: "51CTO",
            url: '51cto.com'
        },
        student: {
            name: "张三",
            age: 29,
            hobby:['抽烟','喝酒','烫头'],
            friends: [
                { name: '李四', age: 30 },
                { name: '王五', age: 32 }
            ]
        }
    }
})

提示：爱好 hobby 是数组形成存储的，朋友们 friends 也是数组形式存储的；

看一下效果：

在控制台通过 ​vm.student.hobby[0]​ 和 ​vm.student.friends[0]​ 修改数组属性不生效？

但数据其实已经更新了，只是没有页面上响应，看下 Vue DevTools 显示的也很清楚；

看控制台，观察一下 vm 对象中 student 属性，发现 student 里的四个属性：name,age,hobby和friends都有 getter 和 setter ；

到了 hobby 数组里面，索引值 “0，1，2” 中并没有做 getter 和 setter 处理，所以Vue没有监测到数据的变化，因此通过索引值来修改属性值，就没有响应式了；

这也就解释了上一篇笔记中，修改“马冬梅”按钮的问题了，​​​过去看看​​；

此时，把 hobby 改成对象的写法再看一下：

hobby1:{
    h1:'抽烟',
    h2:'喝酒',
    h3:'烫头'
},

一个对象，一个数组，为啥对象有响应式，数组没有？