How to call watch

Common scenarios include the following:

1. Data change → View using data change (render- Watcher responsible for urging view update)

The Vue instance or component generates the render function by calling the $mount method (which compiles to render regardless of the EL /template used in the instance). Watcher is bound to the render function to listen for events when the vue instance or component is initialized. File path: SRC/core/instance/lifecycle. The js file, the binding of rendering function. Wather bindings are covered in more detail below

2. Change in data → Change in computed properties using data → Change in views using computed properties (Perform compute-Watcher that urges computed property updates)

File path: SRC/core/instance/state. The js file

3. Data change → execution of watch callback function registered by developers (ordinary Watcher registered by users (Watch-API or Watch attribute))

File path: SRC/core/instance/state. The use of watch in js file

watch: {
    name: [function() {
        console.log('kkkkkkkkk');
    }, function() {
        console.log('gggggggggg'); }]./ / array
    name: function() {
        console.log('ssssss');
    }, // A normal function
    name: {
        handler: function (val, oldVal) {},deep: true
    }, / / object
    name: {
        handler: 'testName' // testName corresponds to the method name in methods}},Copy the code

Description of the Watcher file

Watcher is placed in the SRC/core/observe/watcher. Js

1. Watcher initialization (constructor method

2. The get function

The get function calls the getter. Here’s how to get

  1. An attribute in a data corresponds to a DEP, and a DEP may contain multiple Watcher (the template may use computing attributes, components, etc., which may cause multiple Watcher).
  2. A non-event expression in a template corresponds to a Watcher, and a watcher may contain multiple DEPs (the expression contains several data attributes, or the render function uses multiple attributes).
Getter function, yes3The kind of form. The first is the render function updateComponent =() = >{vm._update(vm._render(), hydrating)} second: function watchers[key] =newWatcher (vm, getter | | it, it, computedWatcherOptions), the second string, get the value of the string, such as the following calls When this way using the watcherwatch: {
      name: function() {
          console.log('kkkkkkkkk'); }} The deP of the url is given in the format of the url, and the value of the url is given in the format of the url.}} The deP of the url is given in the format of the url, and the value is given in the format of the url. Also add DEP to Watcher)1During the generation of watcher, the props and data are bidirectional data bound, that is, there are get and set methods. A data attribute corresponds to a subscriber (DEP)2Add watcher to dep and deP to watcherif (Dep.target) { 
          dep.depend()
          if (childOb) {
            childOb.dep.depend() // Add watcher to the child attribute if there is a child
            if (Array.isArray(value)) {
              dependArray(value)
            }
          }
        }
    3.Either way, callthis.getter, get the value of the property in the getter for examplethis.name to get the value of name. That's when the get method in the data binding is called and executed2In the above method, the subscriber and watcher add to each other.Copy the code