vue的非响应式情况

vue的非响应式情况

1. 数组的下标

<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

2. 数组的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)
  }
 }
})