vue.js - vue计算属性的机制
本文介绍了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屋!
查看全文