vue3系列：（三）vue3使用watch、watchEffect实现监听

最新推荐文章于 2024-09-15 16:33:50 发布

不爱码代码的程序猪

最新推荐文章于 2024-09-15 16:33:50 发布

阅读量4.6k

点赞数

分类专栏： vue3 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/MissRen920/article/details/124198239

版权

vue3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中watch和watchEffect的用法。watch用于监听特定的数据源并在变化时执行回调，支持监听单个数据源、多个数据源和响应式对象。watchEffect则在依赖变化时自动运行副作用，无需指定监听内容，但无法获取之前的值。文中通过实例展示了这两个功能的使用场景和差异。

摘要由CSDN通过智能技术生成

watch

watch API 完全等同于组件侦听器 property。watch 需要侦听特定的数据源，并在回调函数中执行副作用。默认情况下，它也是惰性的，即只有当被侦听的源发生变化时才执行回调，它接受3个参数

一个想要侦听的响应式引用或 getter 函数
一个回调
可选的配置选项

侦听单个数据源

侦听器数据源可以是返回值的 getter 函数，也可以直接是 ref：


// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ...do some thing... */
  }
)

// 直接侦听ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ...do some thing... */
})

侦听多个数据源

如果你在同一个函数里同时改变这些被侦听的来源，侦听器仍只会执行一次：

setup() {
  const firstName = ref('')
  const lastName = ref('')

  watch([firstName, lastName], (newValues, prevValues) => {
    console.log(newValues, prevValues)
  })
  
 //注意多个同步更改只会触发一次侦听器
  const changeValues = () => {
    firstName.value = 'John'
    lastName.value = 'Smith'
    // 打印 ["John", "Smith"] ["", ""]
  }

  return { changeValues }
}

侦听响应式对象

使用侦听器来比较一个数组或对象的值，这些值是响应式的，要求它有一个由值构成的副本

const numbers = reactive([1, 2, 3, 4])

watch(
  () => [...numbers],
  (numbers, prevNumbers) => {
    console.log(numbers, prevNumbers)
  }
)

numbers.push(5) // logs: [1,2,3,4,5] [1,2,3,4]

watchEffect

为了根据响应式状态自动应用和重新应用副作用，我们可以使用 watchEffect 函数。它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数

它是立即执行的，在页面加载时会主动执行一次，来收集依赖
不需要传递需要侦听的内容，它可以自动感知代码依赖，只需要传递一个回调函数
它不能获取之前数据的值
它的返回值用来停止此监听

import { ref, reactive, watchEffect } from "vue"; 
const age = ref(18);
const watchAge = ref(0); 
const doubleAge = () => { 
    watchAge.value = age.value * 2; 
    }; 
const stop = watchEffect(() => { 
if (watchAge.value < 60) { doubleAge();
} else { 
stop();  //停止监听
} });

(\ _ /)
( * . *)
/>❤️