vue3 watch 函数基本用法

在Vue.js中我们经常会需要监听属性，我们可以通过 watch 来响应数据的变化。下面通过举例来介绍一下watch的基本使用方法。

浅层监听

<template>
    <div>
    <button @click="setCount">+{{ count }}</button>
    <button @click="setName">{{ name }}</button>
    </div>
</template>

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

const count = ref(0)
const name = ref('jons')
const setCount = () => {
    count.value++
}

const setName = () =>{
  name.value= 'hello'
}

//侦听一个参数
watch(count,(newval,oldVal) => {
    console.log(newval, oldVal)
})

//侦听多个参数，不会立即执行
watch([count, name],([newCount, newName], [oldCount, oldName]) => {
   console.log('比之前变了', [newCount, newName], [oldCount, oldName])
})

//侦听多个参数,并立即执行
watch([count, name],([newCount, newName], [oldCount, oldName]) => {
   console.log('比之前变了', [newCount, newName], [oldCount, oldName])
}, 
{   //立即执行
    immediate:true
})


</script>

多个监听、深层监听、监听响应式对象属性

<template>
    <div>
    <button @click="setCount">+{{ count }}</button>
    <button @click="setName">{{ name }}</button>
    <button @click="setAge">age:{{ state.age }}</button>
    </div>
</template>

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

const count = ref(0)
const name = ref('jons')
const setCount = () => {
    count.value++
}

const setName = () =>{
  name.value= 'hello'
}

const state = ref({age:1, name: 'jon'}
)

const setAge = () => {
   state.value.age++
}

//无效
watch(state,()=> {
 console.log(state.value.age)
})

//有效
watch(
//返回响应式对象属性
    ()=> state.value.age,
    (age,oldAge) => {
    console.log(age, oldAge)
})

//有效，慎用，递归影响性能
watch(state,() =>{
    console.log('深度监听',state.value.age)
},{
    deep:true
})

//侦听一个参数
watch(count,(newval,oldVal) => {
    console.log(newval, oldVal)
})

//侦听多个参数，不会立即执行
watch([count, name],([newCount, newName], [oldCount, oldName]) => {
   console.log('比之前变了', [newCount, newName], [oldCount, oldName])
})

//侦听多个参数,并立即执行
watch([count, name],([newCount, newName], [oldCount, oldName]) => {
   console.log('比之前变了', [newCount, newName], [oldCount, oldName])
}, 
{   //立即执行
    immediate:true
})

</script>

watchEffect

watchEffect则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。

const  phone = ref(119)
const changePhone = () => {
    phone.value++
}

//会立即执行
watchEffect(()=> {
   console.log(phone.value, state.value.age)
})