Vue中data数据响应问题

• Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。也就是说创建过后，data中不允许添加根数据

1. 对对象处理

• Vue可以检测到对象属性的修改，不能检测到对象属性的添加和删除，也就是说这种方式处理后，vue不能检察到数据变化，不能进行渲染更新，Vue可以使用Vue.set 和 Vue.delete实现

1. Vue.set
   Vue.set 方法用于设置对象的属性，它可以解决 Vue 无法检测添加属性的限制，语法格式如下：

Vue.set( target, key, value )

2. Vue.delete
   Vue.delete 用于删除动态添加的属性 语法格式：

Vue.delete( target, key )

2. 对数组的处理

• vue中的被包装的观察数组能够触发视图更新
• 有push(),pop(),shift(),unshift(),splice(),sort(),reverse()
• 不能检测到下面数组变化：
  1）直接用索引设置属性，如 vm.item[0] = { }
  2）修改数组长度，如vm.items.length = 0
• 用$set
  Vue 包含一组观察数组的变异方法，它们将会触发视图更新，包含以下方法：

push() 接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度
pop() 从数组末尾移除最后一项，减少数组的length值，然后返回移除的项
shift() 移除数组中的第一个项并返回该项，同时数组的长度减1
unshift() 在数组前端添加任意个项并返回新数组长度
splice() 删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员
sort() 调用每个数组项的toString()方法，然后比较得到的字符串排序，返回经过排序之后的数组
reverse() 用于反转数组的顺序，返回经过排序之后的数组

<script>
var app = new Vue({
  el: '#app',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' },
      {message: 'Baz' }
    ],
    addValue:{message:'zyb'}
  },
  methods:{
    push(){
      this.items.push(this.addValue)
    },
    pop(){
      this.items.pop()
    },
    shift(){
      this.items.shift()
    },
    unshift(){
      this.items.unshift(this.addValue)
    },
    splice(){
      this.items.splice(0,1)
    },
    sort(){
     this.items.sort()
    },
    reverse(){
      this.items.reverse()
    },
  }
})

变异方法与非变异方法

变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异(non-mutating method)方法，例如：map(), filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组。同样页面会重新渲染
以下两种方式都可以实现和vm.items[indexOfItem]=newValue相同的效果， 同时也将触发状态更新

concat() 先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。
slice() 基于当前数组中一个或多个项创建一个新数组，接受一个或两个参数，即要返回项的起始和结束位置，最后返回新数组。
map() 对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组、
filter() 对数组中的每一项运行给定函数，该函数会返回true的项组成的数组

3.注意

$set()方法更新时，页面会全部更新一遍，包括其他数据
某个数据更新，会更新渲染所有数据