vue计算属性的机制

Question

<div id="example">
  <div v-if="v1">
  xxxx
  <div v-if="v2">xxxx</div>
  </div>
  
  <button @click="aaa">点我</button>
</div>

<script>
var vm = new Vue({
  el: '#example',
  data: {
      v:{}
  },
 computed:{
  v1() {
  let a = this.v.a;
  return this.v.a;
  },
   v2() {
  return this.v.a;
  }
 },
 watch:{
 v:function(value){
 console.log(value)
 }
 },
  methods: {
    aaa() {
    this.v.a = true;
     console.log(this.v.a?true:false)
    console.log(this.v1)
    console.log(this.v2)
    },
   }
})
</script>    

代码如上，计算属性的机制是依赖的属性发生改变时做出响应改变。

当我给this.v.a赋值时，我可以理解为内存空间没有发生变化，所以没有检测到（当我把v-if="v2"和v-if="v1"同级时都检测不到，所以有此推测）。

但是为什么当v-if="v2"时子级时却可以监测到，所以想不通了。

有理解的朋友帮忙解释一下。

Answer 1

.....这问题跟计算属性就没关系
vue实例创建时通过递归遍历data把属性转化为getter/setter,题中的data初始化时不存在a属性，所以这个v.a根本就没有纳入监测

所以点button时并不会响应

至于你所谓的v2可以被监测到，是因为当v1和v2同级时,在实例初始化时值就都被求值了，而a又没有被监测，所以之后不会再次被求值
而嵌套时，初始化时v1求值为false，内部的v2就直接被忽略不再求值，而你点button时会被计算只是因为aaa方法里的console.log(this.v2)导致v2被求值了而已

Answer 2

设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。要通过Vue提供的接口才行
所以 methods里面的this.v.a = true;应该换为

Vue.set(this.v, 'a', true)