vue.js - vue计算属性的机制

问题描述

问 题

<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"时子级时却可以监测到，所以想不通了。

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

解决方案

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

所以点button时并不会响应

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

这篇关于vue.js - vue计算属性的机制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！