Vue的响应式2-如何更改数据后重新渲染页面？

不渲染页面的情况

1. 数组-通过索引的方式更改数组

<div id="app">
    {{ arr }}
</div>

const vm = new Vue({
    el: '#app',
    data: {
        arr: ['a', 'b', 'c']
    }
})

2. 数组-更改长度

3. 对象-增属性

<div id="app">
    {{ mrKen.wife }}
</div>

const vm = new Vue({
    el: '#app',
    data: {
        msg: '垦哥的基本信息',
        mrKen: {
            name: '垦哥',
            age: 30
        }
    }
})

4. 对象-删属性

渲染页面的情况

1. 数组-变异方法

push、pop、shift、unshift、splice、sort、reverse

2. vm.$set/Vue.set(改哪个、要改的值、改成什么)

// 把arr = ['a', 'b', 'c']的第三项改成'd'
vm.$set(vm.arr, 2, 'd');

// 把mrKen = {name: '垦哥',age: 30}的'age'属性值改成18
vm.$set(vm.mrKen, 'age', 18);

3. vm.$delete/Vue.delete(删哪个、要删的值)

// 删除arr = ['a', 'b', 'c']的第三项
vm.$set(vm.arr, 2);

// 删除mrKen = {name: '垦哥',age: 30}的'age'属性
vm.$set(vm.mrKen, 'age');