Vue中数组的响应式方法

<div id="app">
	<h2>普通数组</h2>
	<ul>
  	<li v-for="item in arr">{{item}}</li>
	</ul>
	<h2>对象数组</h2>
	<ul>
    <li v-for="item in objArr">{{item.name}}======{{item.age}}</li>
	</ul>
	<h2>对象</h2>
	{{info}}
	<button @click="btnClick">点击</button>
</div>
    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    message: 'this is my vue',
                    arr: ['a', 'b', 'c', 'd'],
                    objArr: [{
                        name: 'zhangsan',
                        age: 23
                    }, {
                        name: 'lisi',
                        age: 25
                    }, {
                        name: 'wangwu',
                        age: 18
                    }],
                    info: {
                        name: 'zhaoliu',
                        age: 25,
                        sex: '男'
                    }
                }
            },
            methods: {
                btnClick() {
                    // push 
                    // 在数组末尾添加元素
                    // 添加多个用 ，分隔
                    // 返回添加元素 后 数组的长度
                    // console.log(this.arr.push('99'));

                    // pop
                    // 删除数组最后一个元素
                    // 返回被删除的元素
                    // console.log(this.arr.pop());

                    // shift 
                    // 删除数组的第一个元素
                    // 返回被删除的元素
                    // console.log(this.arr.shift());

                    // unshift 
                    // 在数组的第一个位置添加元素
                    // 添加多个用 ，分隔
                    // 返回添加元素 后 数组的长度
                    // console.log(this.arr.unshift(1, 2, 3, 4));

                    // splice 
                    // 删除/添加/修改（替换）
                    //参数：<1> start 从哪个位置开始(索引) 
                    // <2> 长度,删除几个元素
                    // <3> 添加的元素,可以多个,用,追加
                    // 返回的是一个元素数组

                    // console.log(this.arr.splice(1)); //删除从索引1到末尾的元素(包含索引为1的元素) 
                    // console.log(this.arr.splice(1, 1)); //从索引1开始,删除1个元素
                    // console.log(this.arr.splice(1, 0, '123', '456')); // 在索引为1的元素前边添加元素
                    // console.log(this.arr.splice(1, 1, '123', '456')); //将索引为1的元素替换为 '123', '456'

                    // sort
                    // 对数组进行排序
                    // 返回排序后的数组
                    // console.log(this.arr.sort());

                    //reverse
                    //将数组倒叙排列
                    //返回倒叙后的数组
                    // console.log(this.arr.reverse());

                    //set(要修改的值,索引值,修改后的值)
                    //返回修改后的值
                    Vue.set(this.arr, 0, 'ggg') //修改简单数组
                    Vue.set(this.objArr, 0, {
                            name: 'songda',
                            age: 3
                        }) //修改对象数组
                    Vue.set(this.info, "name", '99999') //修改对象
                }
            }
        })
    </script>