1. Definition of Watch

Watch is an observation action. You can listen for changes in the value of a named property (Data /computed), and when the value changes, the listener is triggered, and then the listener executes the corresponding business code.

Listeners are typically used to listen for changes in data and are executed by default when the data changes.

The name of the listening data is put in here as the name of the function, which takes two arguments, one for the new value and one for the old value.

In VUE, watch is used to respond to data changes, and there are roughly three usages of watch.

2. Simple listening (mainly for variables and simple data types)

* * grammar: \watch: {* * * *// newVal: the latest value \
// oldVal: last moment value \The variable name (newVal, oldVal){\// Change the value of the variable name automatically triggers \} \} * *Copy the code

Code:

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>
<script>
export default {
  data(){
    return {
      name: ""}},// Target: listen for changes in name value
  watch: {
    name(newVal, oldVal){
      console.log(newVal, oldVal); }}}</script>
Copy the code
  • Watch is a separate configuration item in vue
  • The function name in watch must be the same as the property name and cannot be called manually
  • There is no return value. If you want to use the result of processing, you must assign the result to a member in data before using it

3. Deep listening (mainly for complex data types or listening functions that need to be executed immediately)

Syntax: watch: {"Name of property to listen on": {
        immediate: true.// Execute immediately
        deep: true.// Listen deeply for changes within complex types
        handler (newVal, oldVal) {
            
        }
    }
}
Copy the code

Code:

<template>
  <div>
    <input type="text" v-model="user.name">
    <input type="text" v-model="user.age">
  </div>
</template>
 
<script>
export default {
  data(){
    return {
      user: {
        name: "".age: 0}}},// Target: listening object
  watch: {
        // First: listen on the entire object. Handler is executed for every change in the value of an attribute in the object
        // Note that the newVal value is the same as the oldVal value
    user: {
      handler(newVal, oldVal){
        console.log(newVal, oldVal);
      },
      deep: true.immediate: true}}// Target: precisely listens for a value in the object
 watch: {
       // The second way is to listen for a property of the object. If the value of the property is changed, the function will be executed
       // After the function is executed, the value of newVal and oldVal are different
    'user.name': {
      handler(newVal, oldVal){
        console.log(newVal, oldVal);
      },
      deep: true.immediate: true}}}</script>
Copy the code
  • Handler: Fixed method firing. The listener function must be called handler(required)
  • Deep: enables deep listening (mandatory)
  • Immediate: Listens immediately (The handler performs this task immediately after page initialization)

Soup of the day:

I am a slow walker, but I never walk backwards. — Abraham Lincoln