vue中的watch用法

1.watch 

watch 是一个监听器，是Vue实例的一个属性，是用来监听数据的变化，当被监听的数据发生变化时，watch会自动触发对应的回调函数。

2.vue2中watch的用法

<template>
  <div>
    <button @click="count++">++</button>
    姓名: <input type="text" v-model="user.username">
  </div>
</template> 

<script>
   export default {
     data() {
       count:1,
       user:{
         username:""   
       }
     },
        
     watch:{
       // 基本数据类型简写
       count(newValue, oldValue) {
         console.log('newValue', newValue);
         console.log('oldValue', oldValue);
       },
       // count:{
       //   handler(newValue, oldValue) {
       //     console.log('newValue', newValue);
       //     console.log('oldValue', oldValue);
       //   }
       // },
       // 监听复杂数据类型
       "user.username":{
         handler(newValue, oldValue) {
           console.log('newValue', newValue);
           console.log('oldValue', oldValue);
         }
       },
       user:{
         handler(newValue, oldValue) {
           console.log('newValue', newValue);
           console.log('oldValue', oldValue);
         },
         deep: true, //深度监听对象的属性
         immediate: true //立即执行函数，进入页面会立即执行handler函数。
       }
      },
     
     }
</script>

3.vue3中的watch用法

3.1 监听简单数据类型

<template>
  <div>
    <input type="text" v-model="message1">
    <input type="text" v-model="message.count">
  </div>
</template>
<script setup lang="ts">
   let message1 = ref('张')
   let message = ref({
     count:0
   })

   //监听单个属性
   watch(message1, (newVal, oldVal) => {
     console.log('newVal', newVal);
     console.log('oldVal', oldVal);
   })
    
    //监听多个属性
   watch([message1, () => message.value.count], ([m1NewValue, mNewValue], 
     [m1OldValue,mOldValue]) => {
     console.log('newVal', m1NewValue, mNewValue);
     console.log('oldVal', m1OldValue, mOldValue);
   }) 
    
</script>

3.2 监听复杂数据类型

watch监听器是惰性的，监听的数据没有改变，就不会触发，如果想组件创建时触发，可以使用immediate为true进行触发，deep为true 开启深度监听，用于深度监听一个对象或数组的变化，lush选项可以设置watch的回调函数在何时执行， pre 组件更新之前调用  sync 同步执行  post 组件更新之后执行。

<template>
  <div>
    <input type="text" v-model="message.nav.bar.name">
    <input type="text" v-model="message.nav.bar.age">
  </div>
</template>

<script setup lang="ts">
    let message = ref({
      nav: {
        bar: {
          name: '',
          age:18
       }
      }
    })

    watch(message.value, (newVal, oldVal) => {
     console.log('newVal', newVal);
     console.log('oldVal', oldVal);
    }, {
     deep: true, // 深度监听
     immediate:true, //立即执行
     flush: 'pre'  //pre 组件更新之前调用  sync 同步执行  post 组件更新之后执行
    })

    //也可以使用箭头函数形式 监听到具体某个属性
    // watch(()=>message.value.nav.bar.age, (newVal, oldVal) => {
    //   console.log('newVal', newVal);
    //   console.log('oldVal', oldVal);
    // })
</script>

4.有时候，我们可以使用computed来代替watch的使用，节省性能。computed会自动计算出结果，具有缓存性，只有当他的依赖项发生改变时，才会重新计算。

<template>
  <div>
    <input type="text" v-model="message1">
  </div>
</template>

<script setup lang="ts">

import { reactive, ref, toRef, computed, watch } from 'vue';

let message = reactive({
  count:1
})

let result = computed(() => {
  return message.count * 2
})
console.log(result.value); // 2

message.count++

console.log(result.value); // 4

</script>