vue delete删除json数组_复习之基于Vue响应式的更新数据的方法

Vue响应式的含义：当数据变化，页面就会重新渲染。

数组：当数组的数据变化，页面就会更新的方法。

<
           

1）更改数组的引用：

如图，直接更改vm.arr

2）使用数组的变异方法：push、pop、shift、unshift、splice、sort、reverse 例如：数组的变异方法push

3）利用Vue的set方法：

vm.$set是Vue.set的别名，使用方法：Vue.set(object, propertyName, value)，也就是这个意思：Vue.set(要改谁，改它的什么，改成啥)。

Vue.set()方法

vm.$set()方法

4）利用Vue的delete方法：

vm.$delete是Vue.delete的别名，使用方法：Vue.delete(object, target)，也就是这个意思：Vue.delete(要删除谁的值，删除哪个)。

Vue.delete()方法

vm.$delete()方法

对象：当对象的数据变化，页面就会更新的方法。

<
           

1）更改对象的引用：

2）利用Vue的set方法：

vm.$set是Vue.set的别名，使用方法：Vue.set(object, key, value)，也就是这个意思：Vue.set(在哪里添加，添加的key值，添加的value值)。

Vue.set()方法

vm.$set()方法

4）利用Vue的delete方法：

vm.$delete是Vue.delete的别名，使用方法：Vue.delete(object, target)，也就是这个意思：Vue.delete(要删除谁的值，删除哪个)。

Vue.delete()方法

vm.$delete()方法

什么数据更改后不会渲染页面？

1）更改的数据必须是存在的数据，否则不能重新渲染页面，因为监听不到。

2）更改的数据必须已渲染过的数据，否则从性能角度考虑，不会重新渲染页面。

页面都不需要渲染这个数据，那么更改这个数据，为什么页面要重新渲染。

3）在数组中，利用索引直接设置一个数组项时，不会重新渲染页面。

<
           

4）在数组中，修改数组长度时，不会重新渲染页面。

<
           

5）在对象中，添加或删除对象时，不会重新渲染页面。

<
           

总结：

更改数组用变异方法，就够了。 更改对象就用vm.$set和vm.$delete。