Vue.js前端框架教程11:Vue监听器watch和watchEffect

文章目录

监听器(watchers)

Vue 中,监听器(watchers)是一种观察和响应 Vue 实例上的数据变动的机制。Vue 提供了 watch 属性,允许我们执行副作用的函数,并且可以精确控制它们应该在何时运行。watch 可以监听 Vue 实例上的数据,或者任何 getter 函数。

基本用法

watch 的基本用法如下:

javascript 复制代码
export default {
  data() {
    return {
      watchedProperty: ''
    };
  },
  watch: {
    // 监听 data 中的属性
    watchedProperty(newValue, oldValue) {
      // 在这里执行操作,当 watchedProperty 发生变化时
    }
  }
};

或者使用 Vue 3Composition API

javascript 复制代码
import { watch, ref } from 'vue';

export default {
  setup() {
    const watchedProperty = ref('');

    watch(watchedProperty, (newValue, oldValue) => {
      // 在这里执行操作,当 watchedProperty 发生变化时
    });

    return {
      watchedProperty
    };
  }
};
deep: true

deep: truewatch 选项的一个参数,用于指定是否进行深度监听。深度监听意味着 Vue 会监听对象内部属性的变化,而不仅仅是对象本身的引用变化。

javascript 复制代码
export default {
  data() {
    return {
      someObject: {
        nestedProperty: ''
      }
    };
  },
  watch: {
    // 深度监听 someObject 对象
    someObject: {
      handler(newValue, oldValue) {
        // 当 someObject 或其内部属性发生变化时,这个函数会被调用
      },
      deep: true
    }
  }
};
immediate: true

immediate: true 也是 watch 选项的一个参数,用于指定是否在监听器被创建之后立即以当前的值触发回调函数。

javascript 复制代码
export default {
  data() {
    return {
      immediateProperty: ''
    };
  },
  watch: {
    // 立即执行,并且监听 immediateProperty 的变化
    immediateProperty: {
      handler(newValue, oldValue) {
        // 当 immediateProperty 发生变化时,这个函数会被调用
      },
      immediate: true
    }
  }
};

在上面的例子中,当组件实例化后,immediateProperty 的监听器会立即执行一次,即使 immediateProperty 还没有发生变化。

总结
  • 基本监听:用于监听数据的变化,并在变化时执行回调函数。
  • deep: true:用于深度监听一个对象,以便能够检测到对象内部属性的变化。
  • immediate: true:用于在监听器被创建时立即执行回调函数,无论监听的值是否已经变化。

这些监听选项使得 Vue 的响应式系统更加灵活和强大,允许开发者根据具体需求来精确控制数据变化时的行为。

watchEffect

Vue 3 中,watchEffect 是一个强大的响应式 API,它用于自动追踪其内部依赖的响应式数据变化,并在数据变化时执行相应的副作用。以下是 watchEffect 的一些关键特性和用法:

基本用法

watchEffect 接受一个函数作为参数,这个函数会在 watchEffect 被创建时立即执行一次,之后每当其依赖的响应式状态发生变化时,都会重新执行。

javascript 复制代码
import { ref, watchEffect } from 'vue';

const count = ref(0);

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

在这个例子中,每当 count 的值发生变化时,控制台都会打印出新的 count 值。

自动追踪依赖

watch 不同,watchEffect 不需要明确指定要监听的目标,而是会根据回调函数中访问的响应式数据自动追踪依赖。

停止监听

watchEffect 返回一个停止函数,调用这个函数可以手动停止监听,这有助于避免内存泄漏。

javascript 复制代码
const stop = watchEffect(() => {
  // ...
});

// 停止监听
stop();
watch 的对比
  • 依赖声明watch 需要显式指定要监听的响应式数据,而 watchEffect 自动追踪内部访问的响应式数据。
  • 回调参数watch 提供新值 (newVal) 和旧值 (oldVal),而 watchEffect 无法直接访问变化前后的值。
  • 立即执行watch 默认不立即执行(可通过 immediate 选项控制),而 watchEffect 默认立即执行。
  • 适用场景watch 适合特定数据变化时执行操作,watchEffect 适合简单逻辑的响应式副作用处理。
性能优化

watchEffect 由于其自动追踪依赖的特性,可以减少冗余的代码,使得副作用的处理更加简洁。但在某些情况下,如果回调函数中的操作非常昂贵,可能会影响性能,因此需要合理使用。

总结

watchEffectVue 3 中用于响应式监听的一个新的工具,它提供了一种更简洁、更自动化的方式来处理响应式数据变化的副作用。通过自动追踪依赖和立即执行的机制,watchEffect 使得开发者可以更专注于业务逻辑的实现,而不需要关心依赖的声明和变化检测的细节。

相关推荐
全宝8 分钟前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele32 分钟前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮38 分钟前
【无标题】
开发语言·前端·javascript
fie888943 分钟前
浅谈几种js设计模式
开发语言·javascript·设计模式
谦行1 小时前
深度神经网络训练过程与常见概念
前端
Simon_He1 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊2 小时前
React Ref使用
前端·javascript·react.js
wu_aceo2 小时前
将本地项目提交到Gitee
git·gitee·提交·本地提交·上传git
拾光拾趣录2 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲2 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts