【vue3入门】-【11】数组变化侦测

数组变化侦测

1. 变更方法

变更方法，顾名思义，就是对调用他们的原数字进行变更。vue能够侦听响应式数组的变更方法，并在他们被调用时触发相关的UI更新。这些变更方法包括：

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

2. 替换一个数组

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

<template>
    <h3>数组变化侦测</h3>
    <button @click="addListHandle">添加数据</button>

    <ul>
        <li v-for="(value, index) of names">{{ value }}</li>
    </ul>
</template>
<script>
export default {
    data() {
        return {
            names: ["测试1", "测试2", "测试3"]
        }
    },

    methods:{
        addListHandle(){
            // // 变更方法：引起Ui自动更新的方法
            // this.names.push("测试4")
            
            // // 替换一个数组：不会引起UI自动更新
            // this.names.concat(["测试4"])
            // 若要作用 到原数组上，则需要将上面的新数组赋值给原变量
            this.names=this.names.concat("测试4")
        }
    }
}
</script>

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9