Vue3 watchEffect

最新推荐文章于 2024-09-12 16:17:49 发布

＊且听风吟

最新推荐文章于 2024-09-12 16:17:49 发布

阅读量881

点赞数 1

分类专栏： # Vue 3 文章标签：前端

本文链接：https://blog.csdn.net/HH18700418030/article/details/124023176

版权

Vue 3 专栏收录该内容

32 篇文章 11 订阅

订阅专栏

本文详细介绍了Vue中watch和watchEffect的区别。watchEffect是watch的增强版，它会自动追踪函数中引用的响应式数据并在变化时重新执行。通过示例代码展示了如何使用watchEffect监听数据变化并控制其停止监听。此外，还讨论了在组件生命周期中停止监听的方法。

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

watch 和 watchEffect 的区别在于：

watch 是既要指明监视的属性，也要指明监视的回调；

watchEffect ：监听器的升级版本，响应式地跟踪函数中引用的响应式数据，当响应式数据改变时，会重新执行函数。

watchEffect 的特点：

不用直接指定要监视的数据，回调函数中使用的哪些响应式数据就监视哪些响应式数据
默认初始时就会执行第一次，从而可以收集需要监视的数据
监视数据发生变化时回调

实例：

<template>
  <div>
    <h1>Example Page</h1>
    <div>
      <p>count is: {{ count }}</p>
      <a-button @click="addHandle">修改</a-button>
    </div>
  </div>
</template>
<script lang="ts">
import { watchEffect, ref } from 'vue'

export default {
  setup() {
    // 定义响应式数据count
    const count = ref(2)
    const addHandle = () => {
      count.value++
    }

    // 当 count 的值被修改时，会执行回调
    watchEffect(() => console.log('watchEffect', count.value))

    setTimeout(() => {
      count.value++
    }, 6000)

    return {
      count,
      addHandle,
    }
  },
}
</script>

页面效果：
请添加图片描述

还可以停止监听，当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时，侦听器会被连接到该组件的生命周期，并在组件卸载时自动停止。

实例：

<template>
  <div>
    <h1>Example Page</h1>
    <div>
      <p>count is: {{ count }}</p>
      <a-button @click="addHandle">修改</a-button>
    </div>
  </div>
</template>
<script lang="ts">
import { watchEffect, ref } from 'vue'

export default {
  setup() {
    // 定义响应式数据count
    const count = ref(2)
    const addHandle = () => {
      count.value++
    }

    // 当 count 的值被修改时，会执行回调
    const stop = watchEffect(() => console.log('watchEffect', count.value))
    stop()
    
    setTimeout(() => {
      count.value++
    }, 6000)

    return {
      count,
      addHandle,
    }
  },
}
</script>