极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Computed</title>
</head>
<body>
<div id="app">
<label for="">FirstName：<input v-model="firstName"/></label><br>
<label for="">LastName：<input v-model="lastName"/></label><br>
<label for="">NickName<input v-model="nickName"/></label><br>
<p>名称：{{name}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
firstName: '',
lastName: '',
nickName: ''
}
},
computed: {
name: function() {
console.log('触发computed了')
if (this.nickName) {
return this.nickName
} else {
return this.firstName + '.' + this.lastName
}
}
}
})
</script>
</body>
</html>以上代码当nickName有值后，再更改firstName或lastName将不再触发computed，是不是可以理解成computed的依赖收集在return this.nickname时发生了变化
首先依赖收集是获取组件中data数据时候发生的。上面的例子中
computed中name进行收集依赖的过程是按照程序的执行逻辑。当你的
nickName为''的时候，初始化就把组件中nickName,firstName,lastName都访问到了。你可以理解为这些依赖都采集到了，当它们发生变化后，会触发name这个方法。当你的
nickName有值后, 初始化中只访问了nickName。firstName,lastName没有被访问。可以理解为没有收集到它们的依赖，所以它们发生变化，不会触发name这个方法。可你也要注意，在这种情况下，当nickName为''时，程序会访问到firstName,lastName。这里会重新收集它们的依赖。