vue.js框架：数组的各种变异方法

今天阅读vue官网的学习教程，看到一个观察数组的变异方法。变异方法？？？excuse me??什么东西？？guide就给了这么一堆东西：

原来这些方法如下：

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

Vue 包含的这些方法，它们会主动触发视图的更新（即前端数据会自动更新）。

 

<!--HTML--> 
<!--数组的各种变异方法--> 
<div id="arrayChange"> 
<div> push方法： 
<input type="text" v-model="text" @keyup.enter="methodByPush"> 
    <input type="button" value="测试功能" @click="methodByPush"> 
</div> 
<div> pop方法： 
    <input type="button" value="测试功能" @click="methodByPop"> 
</div> 
<div> shift方法： 
    <input type="button" value="测试功能" @click="methodByShift"> 
</div> 
<div> unshift方法： 
    <input type="text" v-model="text" @keyup.enter="methodByUnshift"> 
    <input type="button" value="测试功能" @click="methodByUnshift"> 
</div> 
<div> splice方法： 
    <input type="button" value="测试功能" @click="methodBySplice"> 
</div> 
<div> sort方法： 
    <input type="button" value="测试功能" @click="methodBySort"> 
</div> 
<div> reverse方法： 
    <input type="button" value="测试功能" @click="methodByReverse"> 
</div> 
<div> 测试值： 
    <ul> 
        <li v-for="item of items"> 
        <span v-text="item">
        </span> 
        </li> 
    </ul> 
</div> 
result显示的地方：<br> 
    <span v-text="result"></span> 
</div>

//JS代码 
var vm = new Vue({
    el: '#arrayChange',
    data: {
        items: [],
        text: '',
        result: ''
    },
    methods: {
        methodByPush: function () {
            this.result = this.items.push(this.text)
            this.text = ''
        },
        methodByPop: function () {
            this.result = ''
            this.result = this.items.pop()
        },
        methodByShift: function () {
            this.result = ''
            this.result = this.items.shift()
        },
        methodByUnshift: function () {
            this.result = ''
            this.result = this.items.unshift(this.text)
            this.text = ''
        },
        methodBySplice: function () {
            this.result = ''
            this.result = this.items.splice(2,1,'yovan')
        },
        methodBySort: function () {
            this.result = ''
            this.result = this.items.sort()
        },
        methodByReverse: function () {
            this.result = ''
            this.result = this.items.reverse()
        }
    }
})

用法简介：

  push()  往数组最后面添加一个元素，成功则返回当前数组的长度
    pop()  删除数组的最后一个元素，成功则返回删除元素的值
    shift()  删除数组的第一个元素，成功则返回删除元素的值
unshift()  往数组最前面添加一个元素，成功则返回当前数组的长度
 splice()  有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除
                后想要在原位置替换的值（可选）
   sort()  使数组按照字符编码默认从小到大排序,成功则返回排序后的数组
reverse()  将数组倒序，成功则返回倒序后的数组