携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

前言

事件监听器（watch）一直是vue的一个重要组成部分，主要作用是监听data中的数据的变化，当data中的数据改变时就会触发 watch，我们可以进行一系列监听回调操作

vue2中的watch

在vue2中，watch属性功能及写法如下:

 watch: {
         deep: true,
         immediate:true,
         value: {
           handler (newVal, oldVal) {
             
           }
         },
        }
        value:监听的属性名
        newVal:属性变化最新值
        oldVal:属性变化改变前值
        deep:是否深度监听，可以监听引用数据类型的每一层，如数组/对象里面的每一项
        immediate:是否立即调用监听
      

vue3中的watch

vue中watch写法如下:

监听ref:

import { ref, watch ,reactive } from 'vue'
监听ref:
let value = ref({
    val:'1212'
  })

watch(value, (newVal, oldVal) => {
    // value:监听的属性名
    // newVal:属性变化最新值
    // oldVal:属性变化改变前值
},{
    immediate:true,
    deep:true
})

vue3中监听多个值写法如下：

监听多个ref 会变成一个数组

import { ref, watch ,reactive} from 'vue'
 
let vlue1 = ref('')
let value2 = ref('')
 
watch([value1,value2], (newVal, oldVal) => {

})

监听Reactive

监听Reactive开启和不开启deep 效果一样

import { ref, watch ,reactive} from 'vue'
 
let value = reactive({
    val:{
        name:''
    }
})
 
 
watch(value, (newVal, oldVal) => {

})

监听reactive 某个值时:

import { ref, watch ,reactive} from 'vue'
 
let value = reactive({
    val1:"",
    val2:""
})
 
watch(()=>value.val2, (newVal, oldVal) => {

})

注意:

• 定义了reactive的数据在使用watch监听数据改变时，不能正确获取改变之前的值，并且deep属性配置无效，会自动强制开启了深层次监听
• 使用 ref 初始化一个对象类型或者数组类型的数据时，会自动转成reactive的实现方式，会生成proxy代理对象，也无法正确取改变之前的值
• 如果接收的变量是一个proxy代理对象，在使用watch监听时，会导致watch回调里无法正确获取改变之前的值

vue3中的高级侦听器(watchEffect)

定义:watchEffect 也是一个帧听器，本质是一个副作用函数。它会监听引用数据类型的所有属性，不需要具体到某个属性，一旦运行就会立即监听，立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数，组件卸载的时候会停止监听。

用法:

import { reactive, watchEffect } from 'vue';

  setup(){
    let valueObj = reactive({
      name:'12'
    });
    watchEffect(() => {
      console.log('name:',valueObj.name)
    })

    return {
      obj
    }
  }