Vue3中 watch、watchEffect 详解

1. watch 的使用

语法：

import { watch } from "vue"
watch( name , ( curVal , preVal )=>{ //业务处理 }, options ) ；

共有三个参数，分别为：
name：需要帧听的属性；
(curVal,preVal)=>{ //业务处理 } 箭头函数，是监听到的最新值和本次修改之前的值，此处进行逻辑处理。
options ：配置项，对监听器的配置，如：是否深度监听。

1.1 监听 ref 定义的响应式数据

<template>
  <div>
    <div>值：{{ count }}</div>
    <button @click="add">改变值</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';

const count = ref(0);

const add = () => {
  count.value++
};

watch(count, (newVal, oldVal) => {
  console.log('值改变了', newVal, oldVal)
})

</script>

1.2监听 reactive 定义的响应式数据

<template>
  <div>
    <div>{{ obj.name }}</div>
    <div>{{ obj.age }}</div>
    <button @click="changeName">改变值</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from 'vue';
import _ from 'lodash-es';

const obj = reactive({
  name: 'zs',
  age: 14
});

const changeName = () => {
  obj.name = 'ls';
};

watch(obj, (newVal, oldVal) =>
  {
    if( _.isEqual(newVal, oldVal))
      return;
    console.log('值改变了', newVal, oldVal)
  },
  {immediate:true }
)

</script>

1.3 监听多个响应式数据数据

<template>
  <div>
    <div>{{obj.name}}</div>
    <div>{{obj.age}}</div>
    <div>{{count}}</div>
    <button @click="changeName">改变值</button>
  </div>
</template>

<script>
import { reactive, ref, watch } from 'vue';
export default {
  setup(){
    const count = ref(0);
    const obj = reactive({
      name:'zs',
      age:14
    });
    const changeName = () => {
      obj.name = 'ls';
    };

    watch([count,obj],() => {
      console.log('监听的多个数据改变了')
    })

    return {
      obj,
      count,
      changeName,
    }
  }
}
</script>

1.4 监听对象中某个属性的变化

<template>
  <div>
    <div>{{obj.name}}</div>
    <div>{{obj.age}}</div>
    <button @click="changeName">改变值</button>
  </div>
</template>

<script>
import { reactive, watch } from 'vue';
export default {
  setup(){
    const obj = reactive({
      name:'zs',
      age:14
    });
    const changeName = () => {
      obj.name = 'ls';
    };
    watch(() => obj.name,() => {
      console.log('监听的obj.name改变了')
    })
    return {
      obj,
      changeName,
    }
  }
}
</script>

1.5 深度监听（deep)、默认执行（immediate）

<template>
  <div>
    <div>{{obj.brand.name}}</div>
    <button @click="changeBrandName">改变值</button>
  </div>
</template>

<script>
import { reactive, ref, watch } from 'vue';
export default {
  setup(){
    const obj = reactive({
      name:'zs',
      age:14,
      brand:{
        id:1,
        name:'宝马'
      }
    });
    const changeBrandName = () => {
      obj.brand.name = '奔驰';
    };
    watch(() => obj.brand,() => {
      console.log('监听的obj.brand.name改变了')
    },{
      deep:true,
      immediate:true,
    })
    return {
      obj,
      changeBrandName,
    }
  }
}
</script>

2. watchEffect 的使用

<template>
  <div>
    <input type="text" v-model="obj.name"> 
  </div>
</template>

<script>
import { reactive, watchEffect } from 'vue';
export default {
  setup(){
    let obj = reactive({
      name:'zs'
    });
    watchEffect(() => {
      console.log('name:',obj.name)
    })

    return {
      obj
    }
  }
}
</script>

停止侦听

<template>
  <div>
    <input type="text" v-model="obj.name"> 
    <button @click="stopWatchEffect">停止监听</button>
  </div>
</template>

<script>
import { reactive, watchEffect } from 'vue';
export default {
  setup(){
    let obj = reactive({
      name:'zs'
    });
    const stop = watchEffect(() => {
      console.log('name:',obj.name)
    })
    const stopWatchEffect = () => {
      console.log('停止监听')
      stop();
    }

    return {
      obj,
      stopWatchEffect,
    }
  }
}
</script>

刷新时机

<template>
  <div>
    <div id="value">{{count}}</div> 
    <button @click="countAdd">增加</button>
  </div>
</template>

<script>
import { ref,watch,nextTick,watchEffect} from 'vue';

export default {
  setup(){
    let count = ref(0);
    const countAdd = () => {
      count.value++;
    }
    watch(count,() =>  {
      console.log('watch',count.value)
      nextTick(() =>{
        console.log('watch',document.querySelector('#value') && document.querySelector('#value').innerText)
      });
    },
    {immediate:true })

    watchEffect(() => {
      console.log('watchEffect',count.value)
      console.log('watchEffect',document.querySelector('#value') && document.querySelector('#value').innerText)
    },
    {flush: 'post'})
 
 

    return{
      count,
      countAdd
    }
  }
}
</script>