由于以下两种情况，vue是不能检测到数组变化，也不会触发视图更新

• 1 通过索引直接设置数组的项，
• 2 直接修改数组长度
• 3 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

需求描述

项目中响应式对象中添加一个属性，或者动态的通过索引修改数组项，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，

Vue.set( target, propertyName/index, value )

• 参数：

  • {Object | Array} target 需要动态设置的对象或者数组

  • {string | number} propertyName/index 如果是对象就属性要是字符串类型，如果是数组，索引要是数字类型，

  • {any} value 值可以是任意的类型 对象，数组，字符串，等

Vue.set(obj,key,keyvalue) //这种方法通用

参数说明：

• obj: 需要修改/添加 属性的对象。
• key: 需要被添加/修改的属性
• keyvalue : 需要被添加/修改的属性 值
  对象例如

var obj={name:'xiaxia'}
this.$set(obj,'sex','女')
console.log(obj)  // {name:'xiaxia',sex:'女'}
var obj={name:'xiaxia'}
this.$set(obj,'name','tiantian')
console.log(obj)  // {name:'tiantian',sex:'女'}

数组
例如 增改变数组对应索引

var that=this
   var clonedata = [{name:'hh'},{name:'hh'},{name:'hh'},{name:'hh'},{name:'hh'}]
                        clonedata.map((item, index) => {
                       // 这里是新增一个字段key 
              // 还可以修改，不过要注意，不修改的地方一定哟啊写出来，不然默认的删了没写的属性
                           // Vue.set(item,'key',index+'users')//这种方法通用
                            that.$set(item,'key',index+'users') //虽然我这不是前后分离的项目但经测试这样也可以
                        })
                   
                        console.log(clonedata)

var testArry= [{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'}]
Vue.set(testArry,2,{des:'死不悔改'})
console.log(testArry)
//  [{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'},{des:'死不悔改'},{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'}]

var testArry= [{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'}]
Vue.set(testArry,2,{name:'hh',des:'死不悔改'})
console.log(testArry)//  [{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'},{name:'hh',des:'死不悔改'},{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'}]

var testArry= [{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'}]
Vue.set(testArry,2,{name:'hh',des:'死不悔改',keycolor:'blue'})
console.log(testArry)
// [{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'},{name:'hh',des:'死不悔改',keycolor:'blue'},{name:'hh',des:'胡乱写'},{name:'hh',des:'胡乱写'}]