vue3 setup中watch监听的使用方法

watch监听器使用方法

1. watch监听器可以监听一个getter函数

• 这个getter要返回一个响应式对象
• 当该对象更新后，会执行对应的回调函

import { reactive, watch } from 'vue'
const state = reactive({ count: 0 })
watch(() => state.count, (newValue, oldValue) => {
    // 因为watch被观察的对象只能是getter/effect函数、ref、active对象或者这些类型是数组
    // 所以需要将state.count变成getter函数
})

2.watch可以监听响应式对象

import { ref, watch } from 'vue' 
const count = ref(0) 
watch(count, (newValue, oldValue) => {
})

3.watch可以监听多个响应式对象，任何一个响应式对象更新，就会执行回调函数

import { ref, watch } from 'vue' 
const count = ref(0) 
const count2 = ref(1) 
//第一种写法
watch([count, count2], ([newCount, newCount2], [oldCount, oldCount2]) => { 
})
//还有第二种写法
watch([count, count2], (newValue, oldVlaue) => {
    console.log(newValue)//[newCount, newCount2]
    console.log(oldValue)//[oldCount, oldCount2]
})

4. 深度监听和立即执行

{ deep: true , immediate: true }

// 定义响应式对象数据
const obj = reactive({
      name: '小象',
      age: 18,
      cp: {
        name: '小花',
        age: 16,
      },
    })

    // 监听 reactive 定义的响应式数据
    //   特点1：newVal === oldVal，根本就是同一个内容地址，就是对象本身
    //   特点2：reactive() 对象默认是深度监听，能监听到所有的子属性的变化
    
    // 注意点：
    //   💥 如果监听的属性值是基本类型数据，需要写成函数返回该属性的方式才能监听到

    watch(
      () => obj.cp,
      val => {
        console.log('小象找到CP了要发红包', val)
      },
      { deep: true , immediate: true }
    )

watchEffect的使用

1. watchEffect会立即执行；
2. 不需要手动传入所需要监听的数据；
3. 接收的参数为一个回调函数；
4. 只能获取新值，无法获取修改之前的值

<div id="app">
<input type="text" v-model="webName">
<p>{{ webName }}</p>
<input type="text" v-model="webUrl">
<p>{{ webUrl }}</p>

</div>

<script>
const app = Vue.createApp({
 setup() {
  const {reactive, watch, watchEffect, toRefs} = Vue;
  let objData = reactive({webName:'自如初', webUrl:'https://www.ziruchu.com'});

  // 监听数据
  watchEffect(() => {
   console.log(objData.webName,'--',objData.webUrl)
  });

  // 数据解构
  let { webName, webUrl } = toRefs(objData);

  return {webName, webUrl}
 }
});
const vm = app.mount('#app');
</script>

停止监听

// 监听数据
let stop = watchEffect(() => {
  console.log(objData.webName,'--',objData.webUrl)
  setTimeout(()=>{
     stop();
  },3000);
});

点赞加关注，永远不迷路