vue实战技巧（一）

重塑数组

filter()，concat()和slice()这些方法不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

arrA = arrA.concat(arrB)

虽然数组直接进行了替换，但是，vue为了使得DOM元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原有的数组是非常高效地操作，并不会重新渲染整个列表。

由于JavaScript的限制，Vue不能检测以下变动的数组。
（1） 当利用索引直接设置一个项时，例如

arr1[indexOfItem] = newValue

（2） 当修改数组的长度时，例如

arr2.length = newLength

为了解决第一类问题，以下两种方式都可以实现

//Vue.set
Vue.set(arr1, indexOfItem, newVaule)
//Array.prototype.splice
arr1.splice(indoxOfItem, 1, newValue)

解决第二个问题，可以用splice

arr2.splice(newLength)

对象更改检测注意事项

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

//  a的变化可以检测到
var vm = new Vue({
    data: {
        a: 1
    }
})
// b的变化检测不到
vm.b = 2

对于已经创建的实例，Vue不能动态添加根级别的响应式属性。但是，可以使用Vue.set(obj, key, value)方法向嵌套对象添加响应式属性。例如

var vm = new Vue({
    data: {
        message: {
            text: 'hello'
        }
    }
})

你可以添加一个新的text2属性到message对象

Vue.set(vm.message, 'text2', 'world')
//  或者
this.$set(this.message, 'text2', 'world')

有时可能需要为已有的对象赋予多个新属性，比如使用Object.assign()或者_.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加的响应式属性，可以这么做：

this.message = Object.assign({}, this.message, {
    text2: 'world',
    text3: '!'
})