【前端】Vue中watch的使用方式【实现监听】

Mxin5

已于 2023-10-10 22:42:21 修改

阅读量4k

点赞数 1

分类专栏： Frontend 文章标签： vue.js 前端 javascript

于 2022-10-28 16:54:36 首次发布

本文链接：https://blog.csdn.net/m0_64210833/article/details/127574094

版权

Frontend 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

2.4 immediate (立即处理进入页面就触发)

2.5 deep 深度监听

3. watch简写形式

1. watch是什么？

watch：监听器，是Vue实例的一个属性，是用来监听数据的变化，需要在v-model绑定的数据变化时执行异步请求或级联等实际需求时，都可以使用watch来实现监听。

2. watch的使用

2.1 watch基础语法

watch: {
	被监听的数据: {
		handler(数据改变后的值, 数据改变之前的值) {
			相关代码逻辑...
		}
	}
}

被监听的数据：data中定义的数据；
数据改变后的值：该数据改变后的新值；
数据改变之前的值：该数据改变之前的值。

2.2 watch监听单个简单数据类型

<template>
  <!--v-model 双向绑定模型数据-->
  <div>
    输入: <input type="text" v-model="num">
  </div>
</template>

<script>
export default {
  // vue页面的名称
  name: "Home",
  // 模型数据中加上绑定的值num
  data() {
    return {
      num: "",
    };
  },
  // 监听v-model中值的变化
  watch: {
    num: {
      handler(newVal, oldVal) {
        console.log(`新的值: ${newVal}`);
        console.log(`旧的值: ${oldVal}`);
        console.log("------------------");
      },
    }
  },
};
</script>

在输入框中输入文本后：

这里text改变了三次，分别输入1、2、3，得到如上输出。

2.3 监听复杂数据类型的某个属性的变化

<template>
<!--v-model 双向绑定模型数据-->
  <div>
    姓名: <input type="text" v-model="person.name">
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      // 模型数据有层级关系
      person: {
      	name: ""
      }
    };
  },
  watch: {
    // 监听复杂数据类型的某个属性的变化
   "person.name": {
      handler(newVal, oldVal) {
        console.log(`新的姓名: ${newVal}`);
        console.log(`旧的姓名: ${oldVal}`);
      },
    }
  },
};
</script>

检测某个属性值的时候需要用对象.属性名的写法，用法和简单数据类型一致。

2.4 immediate (立即处理进入页面就触发)

immediate 设为true，进入页面会立即执行handler函数。

<template>
  <div>
    数字: <input type="text" v-model="num">
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      num: "",
    };
  },
  watch: {
    num: {
      handler(newVal, oldVal) {
        
      },
      // immediate 设为true，进入页面会立即执行handler函数。
      immediate: true
    }
  },
};
</script>

2.5 deep 深度监听

对象和数组都是复杂数据类型，复杂数据类型存的是地址值，地址没有变，不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值设为 true，使用deep属性可以监测到整个对象所有属性值的变化，某个属性发生变化，watch都会触发监听该对象。

<template>
<!--v-model 双向绑定模型数据-->
  <div>
    姓名: <input type="text" v-model="person.name">
  </div>
 <div>
    年龄: <input type="text" v-model="person.age">
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      person: {
      	name: "",
        age: ""
      }
    };
  },
  watch: {
   person: {
      // 当name或age发生改变时都能触发监听事件
      handler(newVal, oldVal) {
        alert("name or age have changed")
      },
      deep: true
    }
  },
};
</script>

3. watch简写形式

如果只是监听单个简单的数据，使用watch的简写形式就可以满足需求。

<template>
  <!--v-model 双向绑定模型数据-->
  <div>
    数字: <input type="text" v-model="num">
  </div>
</template>

<script>
export default {
  // vue页面的名称
  name: "Home",
  // 模型数据中加上绑定的值num
  data() {
    return {
      num: "",
    };
  },
  // 监听v-model中值的变化
  watch: {
    num: {
      handler(newVal, oldVal) {
        console.log(`新的数字: ${newVal}`);
        console.log(`旧的数字: ${oldVal}`);
        console.log("这里面可以将改变的值发送请求到后端，也可以做级联（下拉框的值的改变触发另一个下拉框值的改变），可以满足很多需求上的事情，");
      },
    }
  },
};
</script>

总之Vue很好用，简介易上手！！