Vue watch多种使用场景和详细使用案例

Vue的watch属性提供了一种观察和响应Vue实例上数据变化的能力。以下是一些常见的使用场景和详细案例:

1. 监听数据变化并执行异步操作

<template>
  <input v-model="username">
</template>

<script>
export default {
  data() {
    return {
      username: ''
    };
  },
  watch: {
    username(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.fetchUserData();
      }
    }
  },
  methods: {
    fetchUserData() {
      // 假设根据用户名获取用户数据的异步操作
      console.log(`Fetching data for user: ${this.username}`);
    }
  }
};
</script>

2. 监听路由变化

<template>
  <div>{{ routePath }}</div>
</template>

<script>
export default {
  data() {
    return {
      routePath: ''
    };
  },
  watch: {
    '$route'(to, from) {
      this.routePath = to.path;
    }
  }
};
</script>

3. 监听深层数据变化

<template>
  <div>{{ user.name }}</div>
</template>

<script>
export default {
  data() {
    return {
      user: { name: 'John', age: 30 }
    };
  },
  watch: {
    'user.name'(newVal, oldVal) {
      console.log(`Name changed from ${oldVal} to ${newVal}`);
    }
  }
};
</script>

4. 监听对象属性并执行复杂逻辑

<template>
  <div>{{ user.age }}</div>
</template>

<script>
export default {
  data() {
    return {
      user: { name: 'John', age: 30 }
    };
  },
  watch: {
    'user.age': {
      handler(newVal, oldVal) {
        if (newVal > 18) {
          console.log('User is an adult');
        } else {
          console.log('User is a minor');
        }
      },
      deep: true
    }
  }
};
</script>

5. 立即执行并监听数据变化

<template>
  <div>{{ computedValue }}</div>
</template>

<script>
export default {
  data() {
    return {
      multiplier: 2
    };
  },
  computed: {
    computedValue() {
      return this.multiplier * 10;
    }
  },
  watch: {
    computedValue: {
      immediate: true,
      handler(newVal, oldVal) {
        console.log(`Computed value changed from ${oldVal} to ${newVal}`);
      }
    }
  }
};
</script>

6. 监听数据并执行防抖操作

<template>
  <input v-model="searchText">
</template>

<script>
export default {
  data() {
    return {
      searchText: ''
    };
  },
  watch: {
    searchText: _.debounce(function(newVal, oldVal) {
      console.log(`Search text changed to: ${newVal}`);
    }, 500)
  }
};
</script>

在这个例子中,我们使用了lodash库的debounce函数来限制搜索文本变化的监听频率。

注意事项

  • 使用watch时,可以指定选项,如immediatedeephandler等,以满足不同的监听需求。
  • 对于复杂的监听逻辑,考虑使用方法(methods)或计算属性(computed)。
  • 确保在组件销毁时清理watch,以避免内存泄漏,尤其是使用了异步操作或定时器的情况。

通过上述案例,你可以看到Vue的watch属性在不同场景下的应用,它们可以帮助你以声明式的方式构建响应式的数据观察逻辑。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值