What is the watch option handler in Vue

take a look at Vue"s API about watch options here, the code in the official tutorial: 

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log("new: %s, old: %s", val, oldVal)
    },
    // 
    b: "someMethod",
    //  watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    // watch vm.e.f"s value: {g: 5}
    "e.f": function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1
Where does the handler method appear in the

example come from? It seems that you can"t replace

with another name.
Vue.js
Nov.16,2021

this is the rule of vue. When the value of your watch changes, the handler, will be triggered. This is what vue does internally for you.

you can refer to the section in state.js in the source code. When the class of Vue initializes and establishes data binding, it will determine what to listen for from the parameters passed by the user, and what will be used as the processing function after listening to data changes. Because you pass an object after the variable, this object is the corresponding handler, function in the createWatcher function parameters. The first step of logic is to determine whether it is an object. If it is an object, take the handler parameter inside it as the handler for listening events, so this property must be written like this. 

function createWatcher (
  vm: Component,
  expOrFn: string | Function,
  handler: any,
  options?: Object
) {
  if (isPlainObject(handler)) {
    options = handler
    handler = handler.handler
  }
  if (typeof handler === 'string') {
    handler = vm[handler]
  }
  return vm.$watch(expOrFn, handler, options)
}
  • handle is the method that needs to be executed in your watch
  • deep: is the depth of the data you need to listen to, which is generally used to listen for changes in an attribute in an object
  • immediate: specifying immediate: true in the option parameter will immediately trigger a callback with the current value of the expression:

Previous: How does vue-router configure routes that do not have UI nesting relationships but require paths to be nested?

Next: How to extract the engineering quantity of different measurement unit components at one time?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu