1、v-for遍历的数组，当数组内容使用的是arr[0].xx =xx更改数据，vue无法监测到[/b]

[quote]数组数据变动：我们使用某些方法操作数组，变动数据时，有些方法无法被vue监测，有些可以[/quote]

Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测：
[list].push()
[list].pop()
[list].shift()
[list].unshift()
[list].splice()
[list].sort()
[list].reverse()

vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)

[list].filter(), [list].concat(), [list].slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
[/list]

Vue 不能检测以下变动的数组：

[list]
[list]① 当你利用索引直接设置一个项时，vm.items[indexOfItem] = newValue
[list]② 当你修改数组的长度时，例如： vm.items.length = newLength
[/list]


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue $set</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  姓名：{{ name }}<br>
    年龄：{{age}}<br>
    说明：{{info.content}}
    数组长度: {{list.length}}
    <!--<div>
        性别：{{sex}}<br>
    {{info.a}}  </div>-->
    <p>
        <div v-for="(item, index) in list" :key="`${index}`">
            <span>{{item.name}}</span>
            <span>{{item.age}} </span>
        </div> 
        <button @click="add">click</button>
        <button @click="add1">click1</button>
        <button @click="add3">click3</button>
        <button @click="add4">click4</button>
        <button @click="add5">click5</button>
    </p>
    
</div>

<script>
var data = {
    name: "简书",
    age: '3',
    info: {
        content: 'my name is test'
    },
    list: [{
            name: 'zhangsan',
            age: 10
        }, {
            name: 'lisi',
            age: 21
        }, {
            name: 'wangwu',
            age: 22
        }, {
            name: 'wangwu',
            age: 22
        }
    ]

}
var vm = new Vue({
    el:'#app',
    data: data,
    methods: {
        // 当点击事件触发时候会修改掉gc[0]的值为lisi,但是视图不会发生变化
        add() {
            this.list[0] = {
                name: 'dlsfsdfasdfasdf',
                age: 22222222222222
            }
        },
        add1() {
            // this.list[0] ={name:'lisi',age:22} //这样直接修改不能被vue监听到
            Vue.set(this.list, 0, {
                name: 'kkkkkkkkkkkkkk',
                age: 33333333333
            }) //这样就能被vue监控到，更新视图
        },
         add3() {
            this.list.push({
                name: 'dlsfsdfasdfasdf',
                age: 22222222222222
            }) 
        },
        add4() {
            this.$set(this.list, 0, {
                name: 'mmmmmmmmmmmm',
                age: 44444444444444444
            }) 
        },
         add5() {
            this.list.length =10; 
            // TypeError: Cannot read property 'name' of undefined
            // 报错
        },
         ready: function () {
                    // 没有成功
             //Vue.set(data, 'sex', '男');
             //this.$set('info.a' + key, 'what is this?');
        }

    }
});
</script>
</body>
</html>