Object.defineProperty必须对于确定的key值进行响应式的定义

4 min read
<template>
  {{ obj.c }}
</template>
<script>
export default {
  data: {
    obj: { a: 1 },
  },
  mounted() {
    this.obj.c = 3
  }
}
</script>

这个例子中,对obj上原本不存在的c属性进行了一个赋值,但是在Vue2中,这是不会触发视图的响应式更新的,

这是因为Object.defineProperty必须对于确定的key值进行响应式的定义,

这就导致了如果data在初始化的时候没有c属性,那么后续对于c属性的赋值都不会触发Object.defineProperty中对于set的劫持,

在Vue2中,这里只能用一个额外的api Vue.set来解决