Computed previous value in options API is component instance

[markieo1]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqFUstOwzAQ/BXLlxapBKHCpYRKPHqAAyDgaAmFZpumOI5lr0OkKP/O2mmSIvG4xPbOZD0z64ZfaR1VDviCx3Ztco1LoRiDWpcGWQqbxElkja8xliaYTI/6E2MG0Bk1nhkrbLZgk1WdFFoCK8DaJINJj7fdpp1167ostENIF2MHBItTbaDKS2cPburoypYSIllmI+XiP0bkW36n7WXjNrcRCR6wXp5f6BOfDIHQAYEsJQghnjhXpJxVx0WZgrwUnNoIvozfTYBvKScy1fg4WNv25ZvRbxOcEuavOWgtFJ9xtGRkk2fRzpaKBhNSENzHlUswjxpzMir4kJvgiZTl532ooXGwD5j+2cL644f6zta+JviTAQumAsEHDBOTAXbw6uUBatoPIBl2kth/gM9AQ3BeY0e7diol2Qe8oPau8E8sV9mrXdUIyvamvNAwgsAXnF6nT+4366PceXS2H11LKb5VYHxPCnAenUenc95+ATR17z8=

Steps to reproduce

Create a data/computed in the Options API. In the computed access the previous value.

export default {
  data() {
    return {
      msg: 'Example message'
    }
  },
  computed: {
    test(previous) {
        console.log(previous);
        return this.msg;
    }
  }
}

What is expected?

The previous in the computed, should return the actual previous value of the computed.

What is actually happening?

The previous variable has the Component instance.

System Info

System:
  OS: Linux 6.8 Linux Mint 22.1 (Xia)
  CPU: (12) x64 13th Gen Intel(R) Core(TM) i7-1365U
  Memory: 12.81 GB / 30.99 GB
  Container: Yes
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
  npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
  pnpm: 9.15.0 - ~/.local/share/pnpm/pnpm
Browsers:
  Chrome: 134.0.6998.165
npmPackages:
  vue: ^3.4.31 => 3.5.13

Any additional comments?

I wanted to improve the performance of my components in the Options API. That's when I read about getting the previous value that can be a performance optimization when using Objects/Arrays.

This issue does not occur in the Composition API.

[jh-leong]

As a workaround: Playground

<script>
  export default {
    data() {
      return {
        msg: 'Example message'
      }
    },
    computed: {
-     test(previous) {
+     test(_, previous) {
          console.log(previous);
          return this.msg;
      }
    }
  }
</script>

---

I've fixed the related documentation example in vuejs/docs#3206 since it showed the same incorrect parameter usage.

[markieo1]

I don't think this is only a docs issue. When using TypeScript the following Type is used:

core/packages/reactivity/src/computed.ts

Line 35 in 93d663a

export type ComputedGetter<T> = (oldValue?: T) => T

This type is used in the Options and Composition API. I think the type computedGetter should also include this parameter, but only for the Options API.