vue监听数据变化

最新推荐文章于 2024-07-07 14:44:39 发布

住汪星球的喵星人

最新推荐文章于 2024-07-07 14:44:39 发布

阅读量3.8k

点赞数

本文链接：https://blog.csdn.net/weixin_43117402/article/details/105427574

版权

Vue 中实现数据变化监听主要通过侦听器（watcher），它用于异步操作，如模拟异步接口请求。watch属性用于添加侦听器，包括基本用法、获取旧值、使用handler方法、immediate属性以及deep深度监听。深度监听允许监控对象内部属性变化，案例展示了如何结合定时器实现伪模糊搜索。

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

监听数据变化，在Vue中是通过侦听器来实现的，你也可以将它理解为监听器，时刻监听某个数据的变化。

watch的基本用法

在之前我们在js中添加了data、methods，这一次我们要添加的是watch属性。下面我们先来眼熟一下侦听器的添加位置：

<script>
export default {
   
    name: "app",
    // 数据
    data() {
   
        return {
   };
    },
    // 方法
    methods:{
   },
    // 侦听器
    watch:{
   }
};
</script>

一个简单的例子：

<template>
    <p>你点击按钮的次数是： {
   {
    count }} </p>
    <button @click="add" v-model="count">点击</button>
</template>

<script>
export default {
   
    name: "app",
    data(){
   
        return {
   
            count:0
        }
    },
    methods:{
   
        add(){
   
            this.count++;
        }
    },
    watch:{
   
        // 被侦听的变量count
        count(){
   
            console