1. 数组自动响应

1.1. 说明

push pop shift unshift splice sort reverse 或者直接给数组赋值等都会触发自动响应

concat、filters、slice等等不对数组本身造成变化的都不会触发自动响应，concat会返回新数组，不对原有数组操作。

arr[i] = xxx和arr.length = len：这两种方式都不会立刻触发响应式，有其它的响应渲染视图时会一并渲染数组，比如调用arr的push方法时。

1.2. 数组中存放基本值

<ul>
    <li v-for="(name,index) in names">{{index}}.{{name}}</li>
</ul>
data() {
    return {
        names:["mike","john","sarah","angela"]
    }
}

可以测试：

$vm.names.push("hello") 重新渲染界面
$vm.names.pop() 重新渲染界面
$vm.names[0]="aaa" 不响应
$vm.names.push("hello") 重新渲染界面，上面的aaa也渲染出去
$vm.names.length=3 不响应
$vm.names.push("hello")重新渲染，上面的也其作用

1.3. 数组中存放对象

<ul>
    <li v-for="(userinfo,index) in userinfos">{{index}}.{{userinfo.id}}.{{userinfo.name}}</li>
</ul>
 
data() {
    return {
        names:["mike","john","sarah","angela"],
        userinfos:[{id:1,name:"aaa"},{id:2,name:"bbb"},{id:3,name:"ccc"}]
    }
}

$vm.userinfos[0].name="ddd" 重新渲染
$vm.userinfos[0]={id:4,name:"ddd"} 不重新渲染但是值在内存中，如果有其他的渲染，那么这个内存的值会被一起渲染出去。

1.4. 通过set实现数组下标响应式

$set(数组名字, 改变的索引位置, 需要更改的值)

this.$set(this.names,0,"aaa")

或者

Vue.set(数组名字, 改变的索引位置, 需要更改的值)

import Vue from 'vue'
Vue.set(this.names,0,"aaa");

2. 对象响应式

2.1. 说明

Vue不能检测对象属性的添加、删除，也就是说删除属性或者增加新属性都不是响应式的，不会重新渲染界面。

可直接对该对象重新赋值、修改该对象或内层对象的属性，这些都是响应式的。

{{userinfo}}
{{userinfo.website.url}}

userinfo:{id:1,name:"wanma",website:{}}
this.userinfo.website.url="https://www.wanmait.com";不会触发重渲染, 但是值在内存中
this.userinfo.name="wanmait";触发重渲染，并且将website.url在内存中的值也渲染了。

2.2. 通过set实现对象响应式

Vue.set(对象, 对象属性, 属性值)

或者

this.$set(对象, 对象属性, 属性值)

let url = "https://www.wanmait.com";
this.$set(this.userinfo.website,"url",url)

会重新渲染界面。

2.3. Vue.delete()&this.$delete()

一般删除对象某个属性，使用delete obj.xx，这种删除操作不会触发响应式。

如果需要删除操作是响应式的，可以使用：

Vue.delete(obj, 属性名)

或者

this.$delete(obj,属性名)