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)
})

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。