watch VS watchEffect

Catalog

How to use watch ？

How to monitor for the first time , Automatically cancel watch monitor ？ 

If you need to track multiple responsive variables , Is there any good solution ？

watchEffect VS watch

Whether it is necessary to manually pass in dependencies

Whether it is inert

Every time you listen for dependencies The value returned

watchEffect VS computed

How to use watchEffect ?

Use onInvalidate() eliminate watchEffect side effect

Use  watchEffect Back to stop Method , stop it  watchEffect monitor

Use  flush modify watchEffect The time to listen

---

How to use watch ？

Vue Options API Provides a watch Options

export default {
  data () {
    return {
      title: 'Vue2'
    }
  },
  watch: {
    // Watcher
  }
}

  watch: {
    title: {
      handler: (newTitle, oldTitle) => {
        console.log("Title changed from " + oldTitle + " to " + newTitle);
      },
      immediate: true,
    },
  },

Applicable scenario ：

• You need to control which dependencies trigger this method
• You need to access the previous value

How to monitor for the first time , Automatically cancel watch monitor ？ 

call watch Oneself , This requirement can be realized

/**
 *  monitor  vuex  Developer configuration changes in 
 */
const watchInitData = watch(
  () => store.state[VuexModule.ApplicationLibDevelopment],
  async (newVal) => {
    //  Page initialization 
    initPage();
    //  call  watch  In itself , You can cancel listening 
    watchInitData();
  },
  { deep: true },
);

If you need to track multiple responsive variables , Is there any good solution ？

stay Vue Options API（Vue2） in , You can create multiple  watch The observer

stay Composition API（Vue3） in , You can create multiple   watchEffect  The observer ; You can also create only one watchEffect, But in his callback function , Write all the values to be monitored

watchEffect VS watch

Whether it is necessary to manually pass in dependencies

watch —— It is necessary to specify the monitored properties , Also indicate the monitored callback 【 The dependency needs to be passed in manually 】

watchEffect —— It is not necessary to specify which attribute to monitor , Which property is used in the monitored callback , Then monitor which attribute 【 There is no need to pass in dependencies manually , Will automatically get from the callback function 】

Whether it is inert

watch It's inert. —— Only when the dependency changes , Will trigger ; It can be for watch Pass a immediate attribute , Make it run at initialization

watchEffect Non inert  —— Run immediately after creating the component , meanwhile , Run when any dependencies of the method change

Every time you listen for dependencies The value returned

wach —— Every time I listen , Will return old and new values

watchEffect —— Every time I listen , Only the latest value will be returned ; Only when the page is initialized , To get an old value

watchEffect VS computed

watchEffect and watch equally , It's kind of like  computed

• computed Pay attention to the calculated value （ The return value of the callback function ）, So you have to write the return value
• watchEffect It's about the process （ The body of the callback function ）, So you don't have to write the return value

How to use watchEffect ?

• Run immediately when initializing the component （ When the component is initialized ,watchEffect Will run and record the starting value ）
• Run when dependencies change （ When   The value of the listening object When the change , It will trigger  watchEffect）

From the second point ： It's mounting DOM Before , Try not to visit DOM, Prevent unnecessary monitoring

import { ref, watchEffect } from 'vue'

export default {
  setup () {
    const userID = ref(233)

    watchEffect(() => console.log('userID: ' + userID.value))
    
    setTimeout(() => {
      userID.value = 666
    }, 500)

    return {
      userID
    }
  }
}

//  Print the results 
userID: 233
userID: 666

It can also be in components , Use watchEffect combination props To use

export default {
  props: {
    movieID: String,
  },
  setup(props) {
    watchEffect(() => console.log(props.movieID))
  },
}

Use onInvalidate() eliminate watchEffect side effect

whenever watchEffect When listening for dependency changes , Just execute an asynchronous request ;

But before the asynchronous request completes , The dependencies have changed again ……

How to avoid sending a request again ？

export default {
  setup() {
    watchEffect(onInvalidate => {
      //  Asynchronous requests 
      const apiCall = someAsyncMethod(props.songID)

      onInvalidate(() => {
        //  Cancel asynchronous request 
        apiCall.cancel()
      })
    })
  }
}

Use  watchEffect Back to stop Method , stop it  watchEffect monitor

It can be stopped manually watchEffect monitor

Just imagine , If you want to observe a dependency , Until he becomes a certain value , I don't want to continue listening

Continuing to monitor is a waste of resources , How to realize manual stop watchEffect monitor ？

watchEffect Back to  stop Method , Call it , It can be stopped manually watchEffect monitor

export default {
  setup (props) {
    let stopWatcher = watchEffect(() => console.log(props.movieID))
    stopWatcher()
  }
}

Use  flush modify watchEffect The time to listen

watchEffect By default, before the component is loaded , Will call a monitor , Take a chestnut ：

const state = reactive({
  test: {
    myName: '',
  }
});

state.test.myName = 'Lyrelion' 

watchEffect(() => {
  console.log(' The name has been changed ', state.test.myName );
})

/**
 *  Print the results （ Before component update ,watchEffect  Just perform a monitoring , So it prints twice ）
 *  The name has been changed  
 *  The name has been changed  Lyrelion
 */

If before the component is loaded , I don't want to monitor ？ in other words , modify watchEffect Monitoring opportunity

It can be modified by  watchEffect Medium flush attribute , Specify the listening time

flush There are three settable items ：

• pre （ Default ）
• post （ Trigger after the component is rendered , Access the loaded DOM, This prevents the initial value from being attached , Began to monitor the problem ）
• sync （ And watch equally , Every change forces the listener to be triggered , It's inefficient , There should be little need for ）

in summary , In order to... Before the component is loaded , Do not perform listening , It can be written like this

const state = reactive({
  test: {
    myName: '',
  }
});

state.test.myName = 'Lyrelion' 

watchEffect(() => {
  console.log(' The name has been changed ', state.test.myName );
}, {
  flush: 'post'
})

/**
 *  Print the results （ Before component update ,watchEffect  Just perform a monitoring , So it prints twice ）
 *  The name has been changed  Lyrelion
 */

Add a well written article

VUE3 in watch And watchEffect —— The most detailed series of the whole network _ Underwater barbecue shop ai The blog of -CSDN Blog _watch and watcheffectVUE3——watch And watchEffect Detailed explanation 1 、 watchEffect1. Stop listening 2. Change listening time （ Change the side effect refresh time ）3. Remove side effects 4. Listener debugging one 、watch1. Listen to a single source 2. Listen to multiple sources 3. Listen for responsive objects 4. Deep monitoring 5. Execute immediately in speaking watch Before , Let's take a look first watchEffect One 、 watchEffect Execute an incoming function immediately , At the same time, it is responsive to trace its dependencies , And rerun the function when its dependency changes .watchEffect Some characteristics of ： There is no need to pass in dependencies manually （ Do not specify the listening object ） nothing https://blog.csdn.net/m0_51969330/article/details/123673334?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-123673334-blog-112723178.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-123673334-blog-112723178.pc_relevant_multi_platform_whitelistv3&utm_relevant_index=2