vue中修改数组或者对象后，无法触发双向绑定_vue 变量变更以后没有重新绑定数据-CSDN博客

本文链接：https://blog.csdn.net/valentinelzt/article/details/108163455

本文介绍在Vue.js中如何正确使用$set方法来更新数组和对象的属性，以确保视图能够响应数据变化。文章通过两个示例，演示了直接修改数组和对象属性时页面不更新的问题，并展示了$set方法的正确用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改data中的数组，数组发生改变，页面未发生改变

可通过$set方法来设置数组的值，该方法有三个参数，第一个是要被设置值的目标对象，第二个是设置值在数组中的索引，第三个是要设置的值

<template>
  <div class="home">
    <ul>
      <li v-for="(item, index) in demoArr"
          :key="index">
        {{item}}
      </li>
    </ul>
    <button @click="btn1">button1</button>
    <button @click="btn2">button2</button>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data () {
    return {
      demoArr: [1, 2, 3]
    }
  },
  methods: {
    btn1 () {
      this.demoArr[0] = this.demoArr[0] + 1
    },
    btn2 () {
      this.$set(this.demoArr, 0, this.demoArr[0] + 1)
    }
  }
}
</script>

修改对象的属性，但是页面的值没有发生改变

<template>
  <div class="home">
    <ul>
      <li>
        {{demoObj.demo}}
      </li>
    </ul>
    <button @click="btn1">button1</button>
    <button @click="btn2">button2</button>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data () {
    return {
      demoObj: {
        // demo: ''   1、 直接初始化这个属性
      }
    }
  },
  created () {
    // this.btn1()
  },
  methods: {
    btn1 () {
      this.demoObj.demo = 'aaaaa'
      //  这个时候属性会添加失败，原因是demo属性没有预先初始化
    },
    btn2 () {
      // 通过$set来设置
      this.$set(this.demoObj, 'demo', 'aaa')
    }
  }
}
</script>