Watchers

Vue.js provides us with a way to programmatically react to value changes in other properties. These are known as watcher functions, and they are defined through the watch option.

Each watcher is defined as a property name function mapping, where the property name is the name of the property to watch and the function is called whenever the property value changes.

Here's an example:

var watcherExample = new Vue({ 
  el: '#watcher-example', 
  data: { 
    something: '', 
    lastUpdated: '', 
  }, 
  watch: { 
    // whenever 'something' changes the function below will get
invoked something: function (newValue, oldValue) { console.log(`Old value: ${oldValue}`); console.log(`New value: ${newValue}`); this.lastUpdated = Date.now(); } }, })

In this example, whenever the value of the something property changes, the associated watch function will be called.

Generally speaking, you should prefer computed properties to watchers as they're less verbose and less repetitive. Watchers are mostly useful for cases where you need to perform operations that take longer or are more costly.

We'll look at filters next.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.163.58