Vue更新问题

Vue更新问题

不会触发

数组

• 通过数组下标为数组赋值

   n1(){
       this.list[0]= "用索引直接设置一个项"
       console.log(this.list)
    },
数组改变,视图不变

• 改变数组长度

n2(){
this.list.length =1
console.log(this.list)
},
数组改变,视图不变

• 添加属性

n3(){
 this.list.forEach(item=>{
   item.haha = "ouhuo"
  })
  console.log(this.list)
},

• 不懂第四种 向响应式对象删除属性

this.list.splice(0,1)
数组改变视图也改变

解决方法总结

• 1、创建新的数组替换原有数组值

• 2、使用JavaScript的数组操作函数，这些方法都会返回一个新数组，也是数组替换原理；

支持的方法：

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

• push() pop() shift() unshift() splice() sort() reverse()

不支持的方法：

• filter() concat() slice()

• 3、使用vue自带的 vue.set(object , key , value ); 向响应式对象添加属性；
• 4、使用vue自带的 vue.delete(object , key ); 向响应式对象删除属性；
• 5、对象添加属性还可以使用Object.assign({},obj1,obj2)返回获取的新对象替换原有对象；
  代替 Object.assign(this.someObject, { a: 1, b: 2 })this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
• 注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象