vue3中使用watch注意事项

编写watch函数需要编写两个参数,第一个是要监听的值,然后是一个回调函数。在函数中你可以获得到新知和老值。 使用watch的时候同样需要先导入

监听使用ref定义的变量的时候时候,第一个参数直接使用

import {
          
   ... , watch} from "vue"
setup() {
          
   
    const selectGirl = ref("");
    const data = reactive({
          
   
      girls: ["a", "b", "c"],
    
      selectGirlFun: (index) => {
          
   
        
        selectGirl.value = data.girls[index];
      },
    });
   const refData = toRefs(data);

      watch(selectGirl,(newValue, old) => {
          
   
       console.log(1111,newValue,old)
     });
    return {
          
   
      ...refData,
      selectGirl
    };
  },

使用reactive定义的变量需要没在监听的时候需要使用函数返回值的形式才能监听到

setup() {
          
   
    
    const data = reactive({
          
   
      girls: ["a", "b", "c"],
      selectGirl: "",
      selectGirlFun: (index) => {
          
   
        
        data.selectGirl = data.girls[index];
      },
    });
  
   const refData = toRefs(data);
    onRenderTriggered((event) => {
          
   
      console.log("状态触发组件--------------->");
      console.log(event);
    });
      watch(()=> data.selectGirl,(newValue, old) => {
          
   
       console.log(1111,newValue,old)
     });
    

    return {
          
   
      ...refData,
    };
  },

如果想要deep监听,

vm.$watch(someObject, callback, {
          
   
  deep: true
})
vm.someObject.nestedValue = 123
// callback is fired

immediate

vm.$watch(a, callback, {
          
   
  immediate: true
})
// 立即以 `a` 的当前值触发 `callback`

注意，在带有 immediate 选项时，你不能在第一次回调时取消侦听给定的 property。

// 这会导致报错
const unwatch = vm.$watch(
  value,
  function() {
          
   
    doSomething()
    unwatch()
  },
  {
          
    immediate: true }
)

监听多个变量

参数需要写成数组的形式,同事返回的参数也是数组

setup() {
          
   
    
    const data = reactive({
          
   
      girls: ["a", "b", "c"],
      selectGirl: "",
      selectGirlFun: (index) => {
          
   
        
        data.selectGirl = data.girls[index];
      },
    });
  
   const refData = toRefs(data);
    onRenderTriggered((event) => {
          
   
      console.log("状态触发组件--------------->");
      console.log(event);
    });
      watch([()=> data.girls,()=> data.selectGirl],(newValue, old) => {
          
   
       console.log(1111,newValue[1],old[1])
     });
    

    return {
          
   
      ...refData,
    };
  },

其实与 watch 类似的 API 还有一个就是：watchEffect，立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。

<template>
  <button @click="change">count is: {
          
   {
          
    state.count }}</button>
</template>

<script>
import {
          
    reactive, watchEffect } from vue
export default {
          
   
  setup () {
          
   
    let state = reactive({
          
   count: 0})
    let change = () => state.count++;
    watchEffect(() => {
          
   
      console.log(state.count, 改变)
    })
    return {
          
    state, change }
  }
}
</script>

区分两者的区别

1、watch 是需要传入侦听的数据源，而 watchEffect 是自动收集数据源作为依赖。

2、watch 可以访问侦听状态变化前后的值，而 watchEffect 没有。

3、watch 是属性改变的时候执行，而 watchEffect 是默认会执行一次，然后属性改变也会执行。