Are Vue 3 `reactive` object getters made into computed values?

Question

In this example, is bookCount memoized the same way as a computed ref is?

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ],

  get bookCount() {
    return this.books.length
  }
})

Kapcash · Accepted Answer · 2023-02-06 07:40:44Z

2

No, it is not. The getter will be executed everytime the property is accessed.

You can check it by using the getter in the template, and provoke a template re-render. You'll see the getter will be executed at every render, while a regular computed won't (as long as the value didn't change).

Check out this example on sfc.vuejs.org

answered Feb 6, 2023 at 7:40

Kapcash

6,9802 gold badges22 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kapcash Over a year ago

FYI, you can make bookCount a computed inside the reactive object, and it will work seamlessly :)

Evan Summers Over a year ago

It causes some issues with TypeScript though, since it doesn't know the type of this and complains about a circular reference if using author

Collectives™ on Stack Overflow

Are Vue 3 `reactive` object getters made into computed values?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related