5.对象和数组更新检测

<div id="app">
    <p v-for="(v,k) in obj">{{k}}-->{{v}}</p>
    <button type="button" @click="addKey">addKey</button>
    <ul>
        <li v-for="l in arr ">选项{{l}}</li>
    </ul>
    <button type="button" click="changeLen">changeLen</button>
    <button type="button" click="changeVal">changeVal</button>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            obj:{a:1},
            arr:[1,3,5,7,9],
        },
        methods: {
            addKey(){
                /*vue不会检测对象类型数据的属性的增加和删除:*/
                this.obj.b=5;
                /*改变对象的值可以被检测到，会触发VUE的检测机制，这个时候新增的属性才会被显示*/
                this.obj.a=100;
                console.log(this.obj);
            }
        },
        // created(){
        //     console.log(this.length);
        //     this.arr.length = 3;
        //     console.log(this.length);
        //
        // },
        changeLen(){
           this.arr.length=3;
        },
        changeVal(){
            console.log( this.arr[2]);
            this.arr[2]="2222";
            console.log( this.arr[2]);
        }
    });
</script>

1.修改数组长度也不会触发重新渲染
2. 通过下标修改数组内容时，如果内容是基本数据类型（number、string和布尔类型〉时，不会触发渲染。
3. 如果修改的是对象类型，在页面上会看到数据变化，但是实际上是对象属性的值变化，
导致对象进行了重新渲染，而数组也会被重新渲染