![38148c539e0566cb32eaae24343a6a32.png](https://img-blog.csdnimg.cn/img_convert/38148c539e0566cb32eaae24343a6a32.png)
Vue响应式的含义:当数据变化,页面就会重新渲染。
数组:当数组的数据变化,页面就会更新的方法。
<
![4c407a4bf393d9b96c74904ea7072c86.png](https://img-blog.csdnimg.cn/img_convert/4c407a4bf393d9b96c74904ea7072c86.png)
1)更改数组的引用:
如图,直接更改vm.arr
![138945cbc45c890e631404fb1e16781b.png](https://img-blog.csdnimg.cn/img_convert/138945cbc45c890e631404fb1e16781b.png)
2)使用数组的变异方法:push、pop、shift、unshift、splice、sort、reverse
例如:数组的变异方法push
![15bfdfd2f1ef43a238e891de70ecb3de.png](https://img-blog.csdnimg.cn/img_convert/15bfdfd2f1ef43a238e891de70ecb3de.png)
3)利用Vue的set方法:
vm.$set是Vue.set的别名,使用方法:Vue.set(object, propertyName, value),也就是这个意思:Vue.set(要改谁,改它的什么,改成啥)。
Vue.set()方法
![4826c7de14533ea9e0155157037b3d21.png](https://img-blog.csdnimg.cn/img_convert/4826c7de14533ea9e0155157037b3d21.png)
vm.$set()方法
![719f2f8a9080335651cc1b1e0b73dbc8.png](https://img-blog.csdnimg.cn/img_convert/719f2f8a9080335651cc1b1e0b73dbc8.png)
4)利用Vue的delete方法:
vm.$delete是Vue.delete的别名,使用方法:Vue.delete(object, target),也就是这个意思:Vue.delete(要删除谁的值,删除哪个)。
Vue.delete()方法
![6e19079551ce7065b4f369b07cdadab2.png](https://img-blog.csdnimg.cn/img_convert/6e19079551ce7065b4f369b07cdadab2.png)
vm.$delete()方法
![e3716098c4590ab9d2939cc90c73d0b9.png](https://img-blog.csdnimg.cn/img_convert/e3716098c4590ab9d2939cc90c73d0b9.png)
对象:当对象的数据变化,页面就会更新的方法。
<
![44023a7ac92a1c150ed9c2964b2d1ef8.png](https://img-blog.csdnimg.cn/img_convert/44023a7ac92a1c150ed9c2964b2d1ef8.png)
1)更改对象的引用:
![9a1c5ff238f4ed9524e14e5c0288e359.png](https://img-blog.csdnimg.cn/img_convert/9a1c5ff238f4ed9524e14e5c0288e359.png)
2)利用Vue的set方法:
vm.$set是Vue.set的别名,使用方法:Vue.set(object, key, value),也就是这个意思:Vue.set(在哪里添加,添加的key值,添加的value值)。
Vue.set()方法
![a08cfd48895f3338ac0616ad2e6097f0.png](https://img-blog.csdnimg.cn/img_convert/a08cfd48895f3338ac0616ad2e6097f0.png)
vm.$set()方法
![d32e4d76379e06ce8020659bd6e5fd98.png](https://img-blog.csdnimg.cn/img_convert/d32e4d76379e06ce8020659bd6e5fd98.png)
4)利用Vue的delete方法:
vm.$delete是Vue.delete的别名,使用方法:Vue.delete(object, target),也就是这个意思:Vue.delete(要删除谁的值,删除哪个)。
Vue.delete()方法
![a5677adde9957657a1818a40f4ef617b.png](https://img-blog.csdnimg.cn/img_convert/a5677adde9957657a1818a40f4ef617b.png)
vm.$delete()方法
![44fcb6f1581c4ec1a30cd057e601bfe7.png](https://img-blog.csdnimg.cn/img_convert/44fcb6f1581c4ec1a30cd057e601bfe7.png)
什么数据更改后不会渲染页面?
1)更改的数据必须是存在的数据,否则不能重新渲染页面,因为监听不到。
![79a40bfb4ce67d3dc5a7e302a907ea01.png](https://img-blog.csdnimg.cn/img_convert/79a40bfb4ce67d3dc5a7e302a907ea01.png)
2)更改的数据必须已渲染过的数据,否则从性能角度考虑,不会重新渲染页面。
页面都不需要渲染这个数据,那么更改这个数据,为什么页面要重新渲染。
3)在数组中,利用索引直接设置一个数组项时,不会重新渲染页面。
<
![15f4021018089d0f41c54909ed22a47e.png](https://img-blog.csdnimg.cn/img_convert/15f4021018089d0f41c54909ed22a47e.png)
4)在数组中,修改数组长度时,不会重新渲染页面。
<
![69a8849deb9acbc3162047853f2d12d8.png](https://img-blog.csdnimg.cn/img_convert/69a8849deb9acbc3162047853f2d12d8.png)
5)在对象中,添加或删除对象时,不会重新渲染页面。
<
![a662fe87a22ed38daa8dbfc9523c5b72.png](https://img-blog.csdnimg.cn/img_convert/a662fe87a22ed38daa8dbfc9523c5b72.png)
总结:
更改数组用变异方法,就够了。
更改对象就用vm.$set和vm.$delete。