Vue 数组元素直接赋值不触发视图更新问题Vue 中模板与数组中的元素值进行逻辑绑定与判断，对元素值直接赋值不会触发视图

前言

Vue 中模板与数组中的元素值进行逻辑绑定与判断，对元素值直接赋值不会触发视图更新。示例如下：

<template>
    {{ arr[0] }}
    {{ arr[1] }}
</template>

<script>
export default {
    name: 'xxx',
    data () {
        return {
            arr: [1, 2, 3]
        }
    },
    methods: {
        updateTemplate () {
            // 不会触发 template 中视图更新
            this.arr[0] = 9;
            // 使用 $set 方法会触发视图更新
            // 参数 1 ：目标数组，参数 2：元素下标，参数 3： 元素值
            this.$set(this.arr, 0, 9)
        }
    }
}
</script>

需要使用 set api 才会触发视图更新。此外，下面的几种情况也适合使用 set api。

参考

Vue.set