vue3中的watchEffect高级侦听器

最新推荐文章于 2024-10-23 19:13:17 发布

原创

最新推荐文章于 2024-10-23 19:13:17 发布 · 437 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

1.watchEffect

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

包含两个参数：

参数一：要运行的副作用函数，该函数有一个参数，这个参数也是一个函数类型，用来注册清理回调。清理回调会在该副作用下一次执行前被调用，可以用来清理无效的副作用。
参数二：配置项。

<template>
  <div>姓名：<input type="text" v-model="name" /></div>
  <div>年龄：<input type="number" v-model="age" /></div>
</template>

<script setup lang="ts">
import { ref, reactive, watchEffect } from 'vue'
const name = ref<string>('张三')
const age = ref<number>(20)

watchEffect((oninvalidate) => {
  console.log('watchEffect', name.value)
  console.log('watchEffect', age.value)
  oninvalidate(() => {
    console.log('before')
  })
})
</script>

立即执行一次，当数据发生改变时触发：