vue全家桶进阶之路32:Vue3 WatchEffect和watch 监听

这篇具有很好参考价值的文章主要介绍了vue全家桶进阶之路32:Vue3 WatchEffect和watch 监听。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在 Vue 3 中,watchEffect 是一个用于监听响应式数据变化的 API。它可以在函数内部自动跟踪数据的依赖,并在依赖变化时重新运行函数。

watchEffect 的作用以及各个参数的功能讲解:

watchEffect(effect: (onInvalidate: InvalidateCbRegistrator) => void | (() => void) | Promise<void>, options?: WatchEffectOptions): WatchStopHandle

    • effect:要监听的响应式数据以及需要执行的副作用函数。effect 函数接收一个 onInvalidate 回调函数作为参数,用于在 effect 的依赖发生变化时执行清理函数。effect 函数可以返回一个清理函数,也可以返回一个 Promise,Promise 完成时执行的函数也会被视为清理函数。如果 effect 函数中使用的数据没有在响应式对象中被引用,那么 watchEffect 不会监听到这些数据的变化。
    • options:监听选项对象,可选。可以用来配置监听的行为,例如 deepflush 等选项。具体的选项请参考下面的讲解。
    • 返回值:一个函数,调用它可以停止监听。

WatchEffectOptions

    watchEffect 函数接受一个可选的选项对象,用于配置监听行为。以下是 WatchEffectOptions 对象的属性及其功能:

    • lazy:是否延迟执行 effect 函数。如果设置为 true,则在首次调用 watchEffect 时不会执行 effect 函数,只有在其依赖发生变化时才会执行。默认为 false
    • deep:是否深度监听对象和数组的变化,默认为 false。如果设置为 true,则会递归监听对象和数组中的所有属性。
    • flush:何时执行回调函数。默认为 'pre',表示在响应式数据变化后立即执行回调函数,但在同一事件循环中的其他变化不会触发回调函数。如果设置为 'post',则会在同一事件循环中的所有变化都发生后执行回调函数。

例如,以下代码使用 watchEffect 监听 message 的变化,并在变化时执行回调函数。

import { watchEffect } from 'vue';

watchEffect(() => {
  console.log(`message 变为 ${message}`);
});

 

下面是一个简单的例子,演示了如何使用 watchEffect 监听响应式数据变化:

<template>
  <div>
    <p>输入框的值为:{{ message }}</p>
    <input v-model="message" />
  </div>
</template>

<script>
import { defineComponent, ref, watchEffect } from 'vue';

export default defineComponent({
  setup() {
    const message = ref('');

    watchEffect(() => {
      console.log(`message 值改变为:${message.value}`);
    });

    return {
      message
    };
  }
});
</script>

在这个例子中,我们使用 ref 函数定义了一个名为 message 的响应式数据,并将其初始化为空字符串。我们使用 watchEffect 函数监听 message 的变化,并在函数内部打印出 message 的值。因为 watchEffect 函数会自动跟踪 message 的依赖,所以当用户在输入框中输入内容时,watchEffect 函数就会重新运行,打印出新的 message 值。

需要注意的是,watchEffect 函数的回调函数不需要显式地指定依赖项,它会自动跟踪回调函数内部使用到的所有响应式数据。因此,当你使用 watchEffect 函数时,不需要再使用 watch 函数或 computed 函数来监听数据变化。但是,如果你需要监听某个特定的响应式数据变化,可以在回调函数中使用该数据,这样 watchEffect 就会自动跟踪它。

watchEffect 函数的返回值是一个用于停止监听的函数。当你调用这个函数时,watchEffect 就会停止监听响应式数据的变化。

以下是一个示例,演示如何使用 watchEffect 函数的返回值停止监听:

<template>
  <div>
    <p>输入框的值为:{{ message }}</p>
    <button @click="stopWatching">停止监听</button>
    <input v-model="message" />
  </div>
</template>

<script>
import { defineComponent, ref, watchEffect } from 'vue';

export default defineComponent({
  setup() {
    const message = ref('');

    const stopWatching = watchEffect(() => {
      console.log(`message 值改变为:${message.value}`);
    });

    function stopWatching() {
      stopWatching();
    }

    return {
      message,
      stopWatching
    };
  }
});
</script>

在这个例子中,我们定义了一个名为 stopWatching 的函数,它调用了 watchEffect 函数的返回值,从而停止了监听。我们在模板中添加了一个按钮,当用户点击它时,就会调用 stopWatching 函数,从而停止监听 message 的变化。

 

 

watch的作用以及各个参数的功能讲解:

watch 是 Vue 3 中用于监听响应式数据变化的 API,它能够在响应式数据发生变化时执行回调函数。以下是 watch 函数的参数及其功能:

  1. watch(source: string | Function | Ref, callback: Function, options?: WatchOptions): WatchStopHandle
  • source:要监听的响应式数据,可以是一个字符串(表示要监听的数据在组件实例中的属性名)、一个函数(返回要监听的数据)或一个 ref 对象。
  • callback:响应式数据变化时要执行的回调函数。回调函数接收两个参数:新值和旧值。
  • options:监听选项对象,可选。可以用来配置监听的行为,例如 deepimmediate 等选项。具体的选项请参考下面的讲解。
  • 返回值:一个函数,调用它可以停止监听。
  1. WatchOptions

watch 函数接受一个可选的选项对象,用于配置监听行为。以下是 WatchOptions 对象的属性及其功能:

  • immediate:是否在监听开始时立即执行回调函数,默认为 false
  • deep:是否深度监听对象和数组的变化,默认为 false。如果设置为 true,则会递归监听对象和数组中的所有属性。
  • flush:何时执行回调函数。默认为 'pre',表示在响应式数据变化后立即执行回调函数,但在同一事件循环中的其他变化不会触发回调函数。如果设置为 'post',则会在同一事件循环中的所有变化都发生后执行回调函数。
  • onTrack:监视属性被访问的函数。它接收一个追踪对象(TrackOpTypes)和追踪的目标对象(target)。可以用它来进行依赖追踪分析等操作。
  • onTrigger:监视属性被修改的函数。它接收一个触发对象(TriggerOpTypes)和触发的目标对象(target)。可以用它来进行调试、性能分析等操作。
  • 例如,以下代码监听 message 的变化,并在变化时执行回调函数,同时设置 immediate 选项为 true,表示在组件挂载时立即执行一次回调函数。

import { watch } from 'vue';

watch(
  () => message, // 要监听的响应式数据
  (newValue, oldValue) => {
    console.log(`message 从 ${oldValue} 变为 ${newValue}`);
  },
  {
    immediate: true // 在组件挂载时立即执行回调函数
  }
);

 

watchEffectwatch 都是 Vue 3 中用于监听响应式数据变化的 API,它们之间的主要区别在于回调函数的类型和依赖项的声明方式。

  • watchEffect 接收一个不带参数的函数作为回调函数,在函数内部使用到的响应式数据变化时会自动触发回调函数。watchEffect 会自动追踪响应式数据的变化,并在每次变化时重新运行回调函数。
  • watch 接收两个参数:第一个参数是要监听的响应式数据,第二个参数是一个回调函数。回调函数接收两个参数:新值和旧值。在响应式数据变化时,watch 会调用回调函数,并传入新值和旧值。可以通过第三个参数来声明要监听的选项,例如 deepimmediate 等。

因为 watchEffect 自动追踪响应式数据的变化,所以它更适合处理简单的数据逻辑。如果需要监听特定的响应式数据或使用更高级的选项,可以使用 watch 函数。使用 watch 函数需要显式声明要监听的响应式数据,这可以使代码更具可读性。此外,watch 函数还支持声明多个要监听的响应式数据,这使得它可以处理更复杂的数据逻辑。

总之,如果你只需要监听一些简单的响应式数据变化,可以使用 watchEffect 函数。如果需要监听特定的响应式数据或使用更高级的选项,可以使用 watch 函数。

以下是一个示例,演示 watchEffectwatch 的差别:

<template>
  <div>
    <p>message1 值为:{{ message1 }}</p>
    <p>message2 值为:{{ message2 }}</p>
    <button @click="increment">增加 message1 和 message2 的值</button>
  </div>
</template>

<script>
import { defineComponent, ref, watchEffect, watch } from 'vue';

export default defineComponent({
  setup() {
    const message1 = ref(0);
    const message2 = ref(0);

    // watchEffect 自动追踪响应式数据的变化
    watchEffect(() => {
      console.log(`message1 值变为 ${message1.value}`);
    });

    // watch 需要显式声明要监听的响应式数据
    watch(message2, (newValue, oldValue) => {
      console.log(`message2 从 ${oldValue} 变为 ${newValue}`);
    });

    function increment() {
      message1.value++;
      message2.value++;
    }

    return {
      message1,
      message2,
      increment
    };
  }
});
</script>

在这个例子中,我们声明了两个响应式数据 message1message2,并分别使用了 watchEffectwatch 监听它们的变化。watchEffect 自动追踪 message1 的变化,并在变化时触发回调函数。而 watch 则需要显式声明要监听的 message2,并在它的变化时触发回调函数。在点击按钮时,我们同时增加了 message1message2 的值,从而触发了相应的回调函数。

watchEffectwatch 的区别在于,watchEffect 监听的是一个函数的副作用,而 watch 监听的是一个具体的响应式数据,因此 watchEffect 不需要显式指定监听的数据,它会自动检测 effect 函数中使用的响应式数据,并在其发生变化时执行回调函数。此外,watchEffect 也不需要手动停止监听,它会在组件卸载时自动停止监听。但是,watchEffect 不支持监听选项对象中的 immediateonTrackonTrigger 属性。

 

 

如果watch的监听对象是数组:

如果 watch 监听的是一个数组,则可以使用 deep 选项来深度监听数组元素的变化。当 deeptrue 时,watch 会递归监听数组中每个元素的变化。

例如,以下代码使用 watch 监听 list 数组的变化,并在变化时执行回调函数。

import { watch } from 'vue';

watch(
  () => list,
  (newList, oldList) => {
    console.log('list 变化了', newList, oldList);
  },
  { deep: true }
);

在上面的代码中,watch 监听的是一个计算属性,计算属性返回 list 数组。由于在监听选项中设置了 deep: true,因此 watch 会深度监听 list 数组,即递归监听数组中每个元素的变化。

注意,当使用 deep 选项监听数组时,如果数组中的元素是对象,则需要确保这些对象是响应式的,否则无法监听它们的变化。如果数组中的元素不是响应式的对象,则无法监听其变化。文章来源地址https://www.toymoban.com/news/detail-416507.html

到了这里,关于vue全家桶进阶之路32:Vue3 WatchEffect和watch 监听的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue全家桶进阶之路34:Vue3 路由基本配置

    在Vue3中,路由的基本配置是通过使用Vue Router库来实现的。以下是Vue3中路由的基本配置步骤: 安装Vue Router 使用npm或yarn在项目中安装Vue Router: 创建路由实例 创建一个路由实例并定义路由规则。路由规则是一个对象数组,其中每个对象都定义了一个路由的路径和组件。 例如

    2023年04月18日
    浏览(46)
  • vue全家桶进阶之路46:Vue3 Axios拦截器

    在Vue.js 3中,使用Axios与Vue.js 2.x中类似,但是需要进行一些修改和更新,下面是Vue.js 3中Axios的定义和使用方式: 首先,你需要安装Axios和Vue.js 3.x,可以使用npm或yarn等包管理工具安装: 然后,在你的Vue.js 3应用程序中,你可以使用以下代码来导入和使用Axios: 上面的代码使用

    2023年04月20日
    浏览(52)
  • vue全家桶进阶之路50:Vue3 环境变量+跨域设置实例

    使用.env加后缀的方式来建立某个模式下的环境变量, 例如:项目根目录新建两个环境变量文件(development开发环境和production生产环境):  在新建的两个环境变量文件中设置相同的环境变量名: 环境变量名称必须以\\\"VUE_API_\\\"+名称的格式,否则不生效,这个格式是死的。至于

    2023年04月21日
    浏览(44)
  • vue3 watch & watchEffect

    watch watchEffect 函数都是监听器, 用于监视数据的变化; watch 有惰性,watchEffect 无惰性;watch 需要指定具体的监视属性,watchEffect 不需要指定具体的监视属性和配置参数,会自动感知代码依赖;watch 能获取到以前的旧值和新值,watchEffect 只能拿到最新值 一、watch 监听 1、watch 监视

    2024年02月09日
    浏览(45)
  • vue全家桶进阶之路48:Vue3 跨域配置devServer的参数和设置

    devServer 是一个用于配置开发服务器的选项对象。它可以用来配置服务器的各种选项,例如代理,端口号,HTTPS 等。 以下是一些常用的 devServer 参数和设置: port :指定开发服务器的端口号,默认为 8080 。 host :指定开发服务器的主机名,默认为 localhost 。 https :开启 HTTPS,可

    2023年04月21日
    浏览(42)
  • vue全家桶进阶之路47:Vue3 Axios拦截器封装成request文件

    可以将Axios拦截器封装成一个单独的request文件,以便在整个应用程序中重复使用。 以下是一个示例,展示如何将Axios拦截器封装成一个request文件: 1、创建一个名为request.js的新文件,并导入Axios: 2、创建一个名为request的函数,并将其导出: 这将创建一个名为request的函数,

    2023年04月21日
    浏览(49)
  • vue全家桶进阶之路46:Vue3 Axios拦截器和globalProperties全局设置

    在Vue.js 3中,使用Axios与Vue.js 2.x中类似,但是需要进行一些修改和更新,下面是Vue.js 3中Axios的定义和使用方式: 首先,你需要安装Axios和Vue.js 3.x,可以使用npm或yarn等包管理工具安装: 然后,在你的Vue.js 3应用程序中,你可以使用以下代码来导入和使用Axios: 上面的代码使用

    2023年04月20日
    浏览(47)
  • [vue3] watch和watchEffect简记

    watch函数的第一个参数是监听的数据源,可以是: ref和computed创建的响应式数据; reactive创建的响应式对象; getter函数; 多个数据源组成的数组; 注 : 响应式对象的属性需要使用getter监听。 当数据源是响应式对象时,其属性的变更会触发回调函数,但是接收到的 newValue 和

    2024年02月06日
    浏览(42)
  • vue全家桶进阶之路43:Vue3 Element Plus el-form表单组件

    在 Element Plus 中, el-form 是一个表单组件,用于创建表单以便用户填写和提交数据。它提供了许多内置的验证规则和验证方法,使表单验证更加容易。 使用 el-form 组件,您可以将表单控件组织在一起,并对表单进行验证,以确保提交的数据符合预期的格式和要求。该组件具有

    2023年04月20日
    浏览(42)
  • vue全家桶进阶之路31:Vue3 数据和方法的双向绑定ref、reactive、toRefs

    ref 在 Vue 3 中,你可以使用 setup 函数来定义组件的数据和方法。在 setup 函数中,你可以使用 ref 、 reactive 和 computed 等 Vue 3 的响应式 API 来定义数据,并返回一个包含你需要公开的数据和方法的对象。下面是一个例子: 在这个例子中,我们使用 ref 函数来定义了一个名为 mes

    2023年04月19日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包