Subscribe on changes!

Computed property gets triggered even if the reactive property is on the left side of assignment

avatar
Jul 17th 2021

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

avatar
Jul 17th 2021

return this.message

avatar
Jul 17th 2021

Hmm, I think you are correct. @lidlanca I must have missed something else in my code :(