vue a-sub-menu 添加点击事件报错_vue文档里你没捡起来的宝藏

第一篇文章想写Vue的原因是刚买了一本《深入浅出 Vue.js 》，所以趁书没到，打算把Vue的文档重新看一遍（不得不赞Vue的文档，当年从Angular转Vue的时候看文档简直，舒服了~~）本文主要内容：

• 来源于Vue文档
• 你可能看过
• 但是你可能没用过

vue的数据响应失效了

你知道什么情况下，vue的数据响应会是失效吗？官方举了个例子：

var vm = new Vue({
    
  data: {
    
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

在日常的业务的处理中，尤其是数组的for循环渲染，当你使用完v-for之后，动态的通过操作index指定数组的值，不是响应的。 我们使用实际业务代码举个例子：

<template>
  <div>
    <div v-for="(item,key) in list" :key="key">
      {
    {
    item}}
    </div>
    <button @click="changeList">失效</button>
    <button @click="respondList">响应</button>
    {
    {
    list}}
  </div>
</template>

<script>
export default {
    
  name: 'ex',
  data () {
    
    return {
    
      list: [11, 12, {
     money: 17 }]
    }
  },
  methods: {
    
    changeList () {
    
      // 失效代码
      this.list[0] = 16
      this.list.length = 0
    },
    respondList () {
    
      // 生效代码
      this.list[2].money = 0
      this.list[0] = 16
    }
  }
}
</script>

然后我们来看一下会发生什么：

这就很有意思了，我们可以看到这个过程中，执行changeList()方法，页面上的11并没有变成16且数组也没有变为空数组，但是执行第二个方法时，this.list已经为空数组，导致报错。也就验证了官网所说没错，我们不可以直接操作数组的item值，你想要的响应并不会发生。
但是！大家可能会发现，好像自己项目里经常有这种操作，但是没有发生这