Vue.js监听属性Watch(handler，immediate)

用户10781437

发布于 2023-10-10 12:49:32

2800

发布于 2023-10-10 12:49:32

文章被收录于专栏：CSDN搬运文章CSDN搬运文章

watch属性中 handler方法、immediate属性

Vue中的Watch

在Vue实例中，我们可以通过在watch对象中定义属性来监听数据的变化。当被监听的数据发生变化时，关联的handler方法将被触发。这为我们提供了一种响应式地处理数据变化的方式，尤其是在需要进行异步操作或者复杂逻辑处理时

示例代码

<template>
  <div>
    <p>Current Time: {{ formattedTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: 0,
      formattedTime: ''
    };
  },
  watch: {
    time: {
      handler(newVal, oldVal) {
        this.formattedTime = this.formatTime(newVal);
      },
      immediate: true
    }
  },
  methods: {
    formatTime(time) {
      // 将时间格式化为 HH:MM:SS
      // 实际项目中可能会使用库来处理时间格式
      const hours = Math.floor(time / 3600);
      const minutes = Math.floor((time % 3600) / 60);
      const seconds = time % 60;
      return `${this.pad(hours)}:${this.pad(minutes)}:${this.pad(seconds)}`;
    },
    pad(value) {
      // 在单个数字前面添加零
      return value < 10 ? '0' + value : value;
    }
  },
  mounted() {
    // 模拟计时器，每秒递增时间
    setInterval(() => {
      this.time++;
    }, 1000);
  }
};
</script>

在这个例子中，我们使用watch监听time属性，并在handler方法中调用formatTime方法来格式化时间。通过设置immediate: true，我们确保在组件创建时就会执行一次handler方法，更新初始UI。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-10-09，如有侵权请联系 cloudcommunity@tencent.com 删除

handler