<!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, 但一开始
firstName.deps 和 lastName.deps 都添加了 computed watcher,为什么后续改变不会触发
computed watcher,什么时候移除的呢?不是很理解这块,有大佬解释下吗