vue的非响应式情况

最新推荐文章于 2025-05-22 16:48:52 发布

原创最新推荐文章于 2025-05-22 16:48:52 发布 · 875 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue的非响应式

vue 专栏收录该内容

11 篇文章

订阅专栏

本文讨论了Vue框架中遇到的非响应式情况，包括数组下标更新不触发视图更新的问题以及通过直接修改数组长度导致的响应式失效。提出了解决方案，如利用`Vue.set`或`this.$set`来确保数组变化的响应性，并针对数组长度的修改，推荐使用`splice`方法来保持响应性。

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

vue的非响应式情况

数组的下标

  <div id="app">
    <button @click = "change"> 点击 </button>
    <ul>
      <li v-for = ' (item,index) in list ' :key = 'index'> 
          <p> {{ item }} </p>
      </li>
    </ul>
  </div>

  new Vue({
    el: '#app',
    data: {
      list: ['a','b','c']
    },
    methods: {
      change () {
        // this.list[0] = 'junge'
        this.$set(this.list,'0','junge')
      }
    }
  })

解决方案：使用 Vue.set || this.$set

数组的length

当我们删除一个数组时，可以使用 arr.length = 0,但是vue不会响应
解决方案：使用splice(newLength)


  new Vue({
    el: '#app',
    data: {
      list: ['a','b','c']
    },
    methods: {
      change () {
        // this.list.length = 0
        this.list.splice(0)
      }
    }
  })