常用API之watch监听函数

最新推荐文章于 2025-05-20 23:23:48 发布

原创

最新推荐文章于 2025-05-20 23:23:48 发布 · 1k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

常用API之watch监听函数

官网地址：响应式 API：核心 | Vue.js (vuejs.org)

watchEffect函数

watchEffect函数和watch一样都是用于监视属性的改变
watchEffect函数：不用指明监听哪个属性，而是在监视的回调函数中用到哪些属性，就监听哪些属性

代码如下：

import {
     
     reactive, ref, watchEffect} from 'vue'
export default {
     
     
    name: 'App',
    setup() {
     
     
        const num = ref(18)
        const person reactive({
     
     
            age: 18,
            name: '张三'
        })
        
        // watchEffect，这里监听的是num属性和person中的name属性
        watchEffect(() => {
     
     
            const x = num.value	
            const y = person.name
            console.log('当num.value和person.name改变时，就会执行watchEffect监听函数的回调')
        })
        
        return {
     
     
            num,
            person
        }
    }
}

watchEffect有些类似于computed
- computed更注重于计算出来的值（回调函数的返回值），并通过返回值将值返回
- watchEffect更注重于过程（回调函数的本身），只要函数指定的回调函数中使用到的数据发生改变，则重新执行回调

watchEffect停止监听

在发生某些情况下希望停止侦听，这个时候可以获取watchEffect的返回值函数，调用该函数即可

import {
     
     ref, watchEffect} from 'vue'
export default {
     
     
  const personInfo = ref({
     
      name: '张三', age: 18})
  
  // 监听personInfo中的name和age
  const stopWatch = watchEffect(() => {
     
     
    console.log