变更方法

Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

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

xxxxxxxxxx
<template>
    <div>
        <p v-for="(item,index) in names" :key="index">{{ item }}</p>
        <button @click="clickAddNamesHandle">增加数据</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            names:["iwen","ime","frank"]
        }
    },
    methods:{   
        clickAddNamesHandle(){
            this.names.push("sakura")
        }
    }
}
</script>

替换一个数组

变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变 (immutable) 方法，例如 filter()，concat() 和 slice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的

xxxxxxxxxx
<template>
    <div>
        <h3>数组1</h3>
        <p v-for="(item,index) in nums1" :key="index">{{ item }}</p>
        <h3>数组2</h3>
        <p v-for="(item,index) in nums2" :key="index">{{ item }}</p>
        <button @click="filterHanedle">合并数据</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            nums1:[1,2,3,4,5],
            nums2:[6,7,8,9,10]
        }
    },
    methods:{   
        filterHanedle(){
            this.nums1 = this.nums1.concat(this.nums2)
        }
    }
}
</script>

实时效果反馈

1. 下列那个方法可以被检测变更方法：

A push

B filter

C concat

D slice

答案

1=>A