使用vue双向绑定的时候，有时候会遇到没有检测到数据变化的情况，以下情况，是需要在平常工作和使用中注意的问题

数组盲区

vue包含一组观察数组变异的方法，使用这些方法也会触发视图更新

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

但是受到某些限制，vue无法检测到以下数组变动(视图不会更新)

<template>
    <div>
        <button @click="event">click</button>
        {{items}}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items: ['a', 'b', 'c']
            }
        },
        methods: {
            event() {
                this.items[1] = 'x' // 不是响应式的
                this.items.length = 2 // 不是响应式的
                console.log(this.items)
            }
        }
    }
</script>

image.png

为了解决这个问题，需要使用$set

<template>
    <div>
        <button @click="event">click</button>
        {{items}}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items: ['a', 'b', 'c']
            }
        },
        methods: {
            event() {
                // this.items[1] = 'x' 
                // this.items.length = 2 
                this.$set(this.items, 1, 'x')
                this.items.splice(2)
                console.log(this.items)
            }
        }
    }
</script>

image.png

对象盲区

vue不能检测对象属性的添加和删除

<template>
    <div>
        <button @click="event">click</button>
        {{items}}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items: {
                    a: 1 // 是响应式的
                }
            }
        },
        methods: {
            event() {
                this.items.b = 2 // 不是响应式的
                console.log(this.items)
            }
        }
    }
</script>

image.png

这里有两种解决方法

1. 在data声明时，就给出b: ''的声明

<template>
    <div>
        <button @click="event">click</button>
        {{items}}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items: {
                    a: 1 // 是响应式的
                }
            }
        },
        methods: {
            event() {
                this.$set(this.items, 'b', 2) // 是响应式的
                console.log(this.items)
            }
        }
    }
</script>

image.png

当你想添加多个新属性到某个对象上时，也可以利用Object.assign()，但是不要直接给this.yourObject添加，例如

// 此时也不是响应的
Object.assign(vm.items, {
  c: 3
})

可以直接赋值给原有对象

// 此时是响应式的
this.items = Object.assign({}, this.items, {
  v: 3
})

为什么不能实现响应式？

https://segmentfault.com/a/1190000015783546