v-for更新检测

-v-for更新检测

1.数组的方法分为两种 第一种: 会改变原数组的元素值， 例如 reverse()、pop()、push()等 * 这种情况 v-for也会更新 第二种：不会改变原数组的元素值. 例如 slice() 、 filter() 、 concat()等 * 这种情况 v-for不会更新

2.总结 : 如果v-for没有更新. 可以覆盖整个数组, 或 使用 vue.$set() 强制更新

``

<!-- HTML结构 -->
<div id="app">
    <ul>
        <li v-for="item in list" >
            {{ item }}
        </li>
    </ul>
    <button @click="revBtn">数组翻转</button>
    <button @click="sliceBtn">截取前2个</button>
    <button @click="updateBtn">更新第一个元素值</button>
</div>

<script>

    /* v-for更新检测
    1.数组的方法分为两种
        第一种: 会改变原数组的元素值， 例如  reverse()、pop()、push()等
            * 这种情况 v-for也会更新
        第二种：不会改变原数组的元素值. 例如  slice() 、 filter() 、 concat()等
            * 这种情况 v-for不会更新

    2.总结 : 如果v-for没有更新.  可以覆盖整个数组, 或 使用 vue.$set() 强制更新
    */
    /* 创建vue实例 */
    var app = new Vue({
        //el:挂载点
        el: '#app',
        //data: 要渲染的数据
        data: {
            list: [
                10,20,30,40,50
            ]
        },
        //methods:事件处理函数
        methods: {
            revBtn() {
                // 1. 数组翻转可以让v-for更新
                this.list.reverse()
            },
            sliceBtn() {
                // 2. 数组slice方法不会造成v-for更新
                /* 原因:slice没有改变原始数组,只是从原始数组中获取元素
                   解决方案: 覆盖原始数组
                */
                let newArr = this.list.slice(0, 2)
                this.list = newArr
            },
            updateBtn() {
                // 3. 替换元素值,不会造成v-for更新
                // this.list[0] = 88

                /* 解决方案: this.$set()
                参数1: 更新目标结构
                参数2: 更新位置
                参数3: 更新值
                */
                this.$set(this.list, 0, 88)
            }
        }
    })
</script>
复制代码

`

这些方法会触发数组改变, v-for会监测到并更新页面

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

这些方法不会触发v-for更新

• slice()
• filter()
• concat()

注意: vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组

总结: 改变原数组的方法才能让v-for更新