vue是如何监听修改数组length和直接vm.items[indexOfItem] =

Question

看文档文档说：

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

而我尝试修改时却可以成功触发视图更新，不需要this.$set()：

data () {

    return {

      arr: [11, 22 ,33]

    }

  },

  methods: {

    updateMessage: function () {

      this.arr[0] = 0

      this.arr.length = 1

    }

  }

我之前了解vue是循环数组八大方法并加以修改实现监听，现在是如何监听到对length和直接赋值操作的呢？

Answer 1

vue 后面版本是打算做到 vm.items[indexOfItem] = newValue 也响应式更新页面的，不过也是要等到 3.0 版本之后，会通过 Proxy 这么个东西来搞然而现版本确实是不会更新页面的，至少我用的 2.5.3 版本不行，线上 demo如果题主确定可以更新页面，请提供一个线上小 demo 复现一下

Answer 2

那真相只有一个, 我猜你是在 created 内调用 updateMessage 的 ? 这样子是能成功. 因为组件还没挂载进去呀.