Wrapping a function inside a reactive object

[guysagy]

Hi.

I would like to get opinions on creating a reactive object with both primitives and functions, something like this :

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  increment: function() {
    this.count++; // Accessing reactive property
  },
  doubleCount: function() {
    return this.count * 2; // Accessing reactive property
  }
});

console.log(state.doubleCount()); // 0

state.count = 5;
console.log(state.doubleCount()); // 10

... in a web application of course. This being a very simplistic code structure for demo here.
Any opinions on this reactive() usage pattern ?
Will putting functions in a reactive object cause any issues in an application ?

Thank you!

[s3xysteak]

I don't think there will be any problem.

If you are still worried, you can try:

import { reactive, markRaw } from 'vue';

const data = reactive({
  v: 1,
  func: markRaw(function () {
    console.log(this. v)
  })
})

markRaw will mark it as something cannot be proxy. So the data.func here will act as in vanilla.

[LinusBorg]

That's not necessary. it will work fine without that.

[s3xysteak]

That's not necessary. it will work fine without that.

Thank you for your reminder. I just find out here in @vue/reactivity has filtered some types, including function 😄 .