Computed property gets triggered even if the reactive property is on the left side of assignment
Version
vue@next
Reproduction link
https://codepen.io/leopsidom/pen/LYyyORP?editors=1010
<template>
<div id="app">
<p>
<span style="color: green">Computed Message: </span>{{ computedMsg }}
<br>
<span style="color: green">Count of compute run: </span> {{ cnt }}
</p>
<button @click="updateMsg">Update message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Welcome to Vue!',
cnt: 0
};
},
methods: {
updateMsg () {
this.message = 'hello'
}
},
computed: {
computedMsg() {
this.message = 'const message'
this.cnt ++
return this.message
}
}
};
</script>
Steps to reproduce
Click update message button, we can see the cnt is increasing.
What is expected?
Since this.message is on the left side of the assignment operator, we expect the computedMsg is not getting recomputed, thus cnt should not increase. The reason being that the computed property does not rely on this.message property, hence shouldn't update when this.message change.
What is actually happening?
computedMsg is getting recomputed and cnt variable is getting increased