Vue学习——第四天（数组变化侦测）

变更方法

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

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

 

<template>
    <h3>数组变化侦测</h3>
    <button @click="addListnner">添加数据</button>
    <ul>
        <li v-for="(item,index) of names" :key="index">{{ item }}</li>
    </ul>

</template>
<script>
var t=0;
export default{
    data(){
        return{
            names:['a', 'b', 'c'],
        }
    },
    methods: {
        addListnner(){

            //引起UI自动更新
            this.names.push('d');
           
        }
    }
}
</script>

替换一个数组 

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

<template>
    <h3>数组变化侦测</h3>
    <button @click="addListnner">添加数据</button>
    <ul>
        <li v-for="(item,index) of names" :key="index">{{ item }}</li>
    </ul>

</template>
<script>
var t=0;
export default{
    data(){
        return{
            names:['a', 'b', 'c'],
        }
    },
    methods: {
        addListnner(){

            //不会引起UI自动更新
            // this.names.comcat(["b"]);
        }
    }
}
</script>

Demo

<template>
    <h3>数组变化侦测</h3>
    <button @click="addListnner">添加数据</button>
    <ul>
        <li v-for="(item,index) of names" :key="index">{{ item }}</li>
    </ul>
    <button @click="addNumbers">合并数组</button>
    <ul>
        数组1
        <li v-for="(item,index) of num1" :key="index">{{ item }}</li>
        数组2
        <li v-for="(item,index) of num2" :key="index">{{ item }}</li>
    </ul>

</template>
<script>
var t=0;
export default{
    data(){
        return{
            names:['a', 'b', 'c'],
            num1:['1','2','3'],
            num2:['6','5','7'],

        }
    },
    methods: {
        addListnner(){

            //引起UI自动更新
            this.names.push('d');
            //不会引起UI自动更新
            // this.names.comcat(["b"]);
        },
        addNumbers(){
            //合并数组
            this.num1=this.num1.concat(this.num2);
        }
    }
}
</script>

合并num1和num2