Is Vuex capable of caching watched properties similar to the way Vue's computed properties do?

Question

Is Vuex capable of caching watched properties similar to the way Vue's computed properties do?

The Vue documentation highlights how computed properties are intelligently cached rather than running the function on every re-render, as stated here:

On the other hand, invoking a method will always execute the function whenever there is a re-render. The necessity of caching becomes evident when dealing with expensive computed properties...

Here's my query: Do Vuex watched properties also make use of caching similar to computed properties? (including Vuex watching, for instance using vm.$store.watch...)

javascript vuejs2 vue.js vuex

Answer 1

Answer №1

Although Saurabh's response is technically accurate, I believe it misses the mark in addressing the initial query.

In reality, watchers are not "cached" - this concept simply doesn't align with the nature of watchers. Watchers are essentially functions that trigger side effects without returning values or being used as properties.

Therefore, there is no need or logic in caching information for watchers.

However, both functionalities only come into effect when the monitored data undergoes changes.

Answer 2

Although Saurabh's response is technically accurate, I believe it misses the mark in addressing the initial query.

In reality, watchers are not "cached" - this concept simply doesn't align with the nature of watchers. Watchers are essentially functions that trigger side effects without returning values or being used as properties.

Therefore, there is no need or logic in caching information for watchers.

However, both functionalities only come into effect when the monitored data undergoes changes.

Answer 3

Answer №2

The operation of observers will mimic that of calculated since calculated is essentially built on top of observers. Whenever a calculated attribute is defined, Vue automatically assigns an observer to the variables utilized within the calculated property. The following code snippet can be found in the source:

function createCalculatedGetter (getter: Function, owner: Component): Function {
  const observer = new Observer(owner, getter, noop, {
    lazy: true
  })
  return function calculatedGetter () {
    if (observer.dirty) {
      observer.evaluate()
    }
    if (Dep.target) {
      observer.depend()
    }
    return observer.value
  }
}

Therefore, any code written within calculated or observe sections will only run once, triggered by changes in the reactive data.

Answer 4

The operation of observers will mimic that of calculated since calculated is essentially built on top of observers. Whenever a calculated attribute is defined, Vue automatically assigns an observer to the variables utilized within the calculated property. The following code snippet can be found in the source:

function createCalculatedGetter (getter: Function, owner: Component): Function {
  const observer = new Observer(owner, getter, noop, {
    lazy: true
  })
  return function calculatedGetter () {
    if (observer.dirty) {
      observer.evaluate()
    }
    if (Dep.target) {
      observer.depend()
    }
    return observer.value
  }
}

Therefore, any code written within calculated or observe sections will only run once, triggered by changes in the reactive data.

Is Vuex capable of caching watched properties similar to the way Vue's computed properties do?

Answer №1

Answer №2

Similar questions

Verify if the element is present before commencing any tasks

I'm interested in learning more about how to select or deselect all checkboxes

How can one effectively track changes in authentication state within AWS Cognito?

Having trouble with the post request in Express JS and Vue? Don't worry, we've got you covered

What is the best way to input sorted data from a variable into a textarea field?

I noticed that after updating my notification count, there is an unexpected gap in the box. How can I go about fixing this issue?

What is the best way to iterate through these arrays to retrieve just the orderTotal values?

Is there a way for me to send a form containing pre-existing data from a different page?

Using Ajax without implementing JavaScript

Locate all the properties that are empty within each object contained in a JavaScript array

Creating new instances of objects in Express.js with routers

Reverse action on Angular checklist-model checkboxes

Issue with Cordova file plugin's inability to write to file

What is the best way to retrieve a document from a collection in a Meteor application?

PHP header not working in AJAX redirect

I am interested in updating the content on the page seamlessly using Angular 6 without the need to reload

Ensuring the validity of float and non-empty values in JavaScript

What is the best method for passing a JavaScript object to PHP using Ajax?

Finding the exact x and y coordinates of an object within the camera's frame

Vue component not displaying data from Axios response variable on browser