返回

Vue3.0侦听方式详解，让你成为Vue3.0高手

前端

前言

Vue3.0对侦听方式进行了重构，提供了更加灵活和强大的侦听功能。在本文中，我们将详细介绍Vue3.0中的各种侦听方式，包括watchEffect、watch、computed和ref，并提供示例代码，帮助您更好地理解和使用这些侦听方式。

watchEffect

watchEffect 是 Vue3.0 中新引入的侦听方式，它与 watch 相比具有以下特点：

  • 立即执行，没有 immediate 选项。
  • 不需要传递侦听的内容，自动感知代码依赖。
  • 不需要传参，只需要传递一个回调函数。
const count = ref(0)

watchEffect(() => {
  console.log(`count is ${count.value}`)
})

count.value++ // 输出：count is 1

watch

watch 是 Vue2.0 中的侦听方式，在 Vue3.0 中仍然可以使用。与 watchEffect 相比，watch 具有以下特点：

  • 可以指定侦听的内容，支持字符串和函数两种形式。
  • 可以指定侦听选项，包括 immediate 和 deep。
  • 需要传递侦听的内容和侦听选项，以及一个回调函数。
const count = ref(0)

watch('count', (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`)
}, {
  immediate: true,
  deep: true
})

count.value++ // 输出：count changed from 0 to 1

computed

computed 是 Vue2.0 中的侦听方式，在 Vue3.0 中仍然可以使用。与 watch 相比，computed 具有以下特点：

  • 返回一个值，而不是一个函数。
  • 只有当依赖项发生变化时才重新计算。
  • 可以使用缓存来提高性能。
const count = ref(0)

const doubledCount = computed(() => {
  return count.value * 2
})

console.log(doubledCount.value) // 输出：0

count.value++ // 输出：2

ref

ref 是 Vue3.0 中的新特性，它允许您创建响应式变量。与 watch、computed 相比，ref 具有以下特点：

  • 可以直接访问变量的值。
  • 变量的值可以是任何类型。
  • 可以使用 .value 属性访问变量的值。
const count = ref(0)

console.log(count.value) // 输出：0

count.value++ // 输出：1

总结

Vue3.0 中提供了多种侦听方式，包括 watchEffect、watch、computed 和 ref。每种侦听方式都有自己的特点和适用场景。您需要根据自己的需求选择合适的侦听方式。

更多资源