vue2.x使用的细节和注意点，初学者需要注意

1.数组更新检测

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

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

以下方法不会触发视图更新，它们不会变更原始数组，而总是返回一个新数组。

filter()、concat()、slice()，解决办法是使用新数组代替旧数组

例：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。

#对于对象

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

*解决办法：可以使用 Vue.set(object, propertyName, value) 方法或 vm.$set() 实例方法向嵌套对象添加响应式 property，例：

Vue.set(vm.someObject, 'b', 2)

this.$set(this.someObject,'b',2)

当然，也可以在 data 中设置对象并附一个初始值null

#对于数组

Vue不能检测以下数组的变动

1.当你利用索引直接设置一个数组项时，例如 vm.items[indexOfItem] = newValue

2.当你修改数组的长度时，例如 vm.items.length = newLength

例

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

*解决办法：

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

vm.$set(vm.items, indexOfItem, newValue)

vm.items.splice(newLength)

2.Prop

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。但是在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。综上，对象和数组可以直接实现双向绑定，值传递的类型需要使用 this.$emit('event', value) 的方式向父组件传递数据。

3.自定义事件

不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。推荐你始终使用 kebab-case 的事件名。

4.绑定HTML Class

#对象语法（基于computed计算属性）

这是一个常用且十分强大的模式

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}