Vuejs composition API - property changes

user_2117973 0
Viewed 2062

I'm curious about passing props into setup and what are best practices to update variables/templates based on property changes.

I'm curious about reactive and computed.

For example:

setup(props) {
  // Setup global config settings
  const config = computed(() => {
    return {
      // See if the component is disabled
      isDisabled: props.disabled, // (1)

      // Test for rounded
      isRounded: props.rounded // (2)
    }
  })

  return { config }
}
  1. Should config.isDisabled and config.isRounded be wrapped in their own computed function as they are both different and independent? However, it is easy to just stick them into one big function. What is best practice in this regard?
  2. Does the entire config function evaluate once a single property changes within the function or can it recognize the change and update what is required?
  3. Per docs, reactive is deeply reactive and used for objects, however, I've noticed it doesn't update to property changes. Therefore, I've been treating it more like data in Vue 2. Am I missing something or is this correct treatment?
vuejs3 vue.js javascript
1 Answers

  1. You do not have to wrap props with computed at all, as they should be already reactive and immutable.

    You also do not have to return config from your setup function as all props passed to your component should be automatically exposed to your template.

  2. The computed function is evaluated only once and then Vue3 uses Proxy to observe changes to values and update only what's required. If you need to run a function every time a property changes you can use watchEffect.

  3. Vue3 reactive is actually deep and works fine on objects. It should track all changes, unless you are trying to change the original object (the target of reactive function).

user_129084360
Related