Detailed explanation of the real-time change example of vue watch listening variable value

vue watch listens for real-time changes in variable values

1. Listener functions using string form

watch: {
    'dataSetting.reverse_y'(newVal, oldVal) {
      (`reverse_y Value from ${oldVal} Become ${newVal}`);
    }
  }

2. Listener functions using function form

watch: {
  'dataSetting.reverse_y': function (newVal, oldVal) {
    (The 'reverse_y value has changed, the new value is:', newVal);
  }
}

3

When using Vue's watch listening attributes, there are two ways to write them:

1. Use the listener function in the form of a string: 'dataSetting.reverse_y' This writing method will be automatically bound to the Vue instance and resolved into a function, and this inside the function points to the Vue instance itself.

2. Use the listener function in the form of a function: function (newVal, oldVal) {} This writing method requires manual binding, use the bind method to bind the function to the Vue instance, or use the arrow function to automatically bind this inside the function to the Vue instance. When using function form, use .reverse_y to access data properties in Vue instances.

Use of watch monitoring data changes in vue

1. Function (father passes to son passes to grandchildren)

Listen to the method. Once the value of toSun passed by the list has changed, the new method will be executed again.

2. Problem

It is correct to not use the data requested for the first time. If a change to a data request will cause the data to be the first time, and the data is not updated.

3. Writing method

watch: {
    toSun: {
        handler(newVal, oldVal) {
        // (newVal, oldVal);
        ();
        ();
        ();
        },
        deep: true,
        immediate: true,
    },
},

4. References

Detailed explanation of watch in Vue

This is the end of this article about the real-time changes in the vue monitor variable value. For more related content on vue watch monitor variable value, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!