vue往数组中添加元素_Vue.set 向响应式对象中添加响应式属性，及设置数组元素触发视图更新...

一、为什么需要使用Vue.set？

vue中不能检测到数组和对象的两种变化：

1、数组长度的变化 vm.arr.length = 4

2、数组通过索引值修改内容 vm.arr[1] = ‘aa’

Vue.$set(target,key,value)：可以动态的给数组、对象添加和修改数据，并更新视图中数据的显示。

vue在构造函数new Vue()时，就通过Object.defineProperty中的getter和setter 这两个方法，完成了对数据的绑定。所以直接通过vm.arr[1] = ‘aa’的方法，无法修改值去触发vue中视图的更新，必须还得通过Object.defineProperty的方法去改变，而Vue.$set()就封装了js底层的Object.defineProperty方法。

所以我们需要利用Vue.set() 响应式新增与修改数据。

二、Vue.set使用

Vue不能检测到对象属性的添加或删除。

由于Vue会在初始化实例时对属性执行getter/setter转化过程，所以属性必须在data对象上存在才能让Vue转换它，这样才能是响应式的。例如：

data () {return{

form: {

total:10}

}

}//this.form.total是响应式的//若直接增加属性，是非响应式的

this.form.showFlag= true //非响应式的

使用Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上。Vue.set(this.form, 'showFlag', true)