vue3+ts的watch全解!

vue3中的watch只能监听以下四种数据:

1.ref定义的数据

2.reactive定义的数据

3.函数返回一个值(getter函数)

4.一个包含上述内容的数组

通常我们在使用watch的时候,通常会遇到以下几种情况:

情况一:

监视ref定义的【基本类型】数据:直接写数据名即可,监视的是其value值的改变。

我们首先写一个watch,这里面要传两个值,一个是监视的字段,还有一个是回调函数,里面返回两个值newValue, oldValue,看下面的截图就知道啦~一个是变化前,一个是变化后!

超过10就会解除监视

复制代码
<template>
  <div class="person">
    <h1>情况一:监视【ref】数据【基本类型】数据</h1>
    <h2>当前求和为:{{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref, watch } from "vue";
let sum = ref(0);
0;
function changeSum() {
  sum.value += 1;
}
const stopWatch = watch(sum, (newValue, oldValue) => {
  console.log("sum变化了");
  console.log(newValue, oldValue);
  if (newValue > 10) {
    stopWatch();
  }
});
</script>

<style scoped>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>

情况二:

监视ref定义的【对象类型】数据:直接写数据名,监视的是对象的【地址值】,若想监视对象内部的数据,要手动开启深度监视。

复制代码
<template>
  <div class="person">
    <h1>情况二:监视ref定义的【对象类型】数据</h1>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref, watch } from "vue";
let person = ref({
  name: "张三",
  age: 19,
});
function changeName() {
  person.value.name += "~";
}
function changeAge() {
  person.value.age += 1;
}
function changePerson() {
  person.value = { name: "李四", age: 40 };
}
// 监视的是对象的地址值!若想监视对象内部属性的变化,需要手动开启深度监视!
watch(
  person,
  (newValue, oldValue) => {
    console.log("person变化了", newValue, oldValue);
  },
  { deep: true }
);
</script>

<style scoped>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>

这里补充一下:

若修改的是ref定义对象中的属性,则newValue和oldValue都是新值,因为他们都是同一个对象

若修改的是整个ref定义的对象,则newValue是新值oldValue是旧值,因为不是同一个对象了

watch有三个参数了,第一个是监视的数据,第二个是监视的回调,第三个是配置对象!

情况三:

监视reactive定义的【对象类型】数据,且默认开启了深度监视!

复制代码
<template>
  <div class="person">
    <h1>情况三:监视reactive定义的【对象类型】数据</h1>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { reactive, watch } from "vue";
let person = reactive({
  name: "张三",
  age: 19,
});
function changeName() {
  person.name += "~";
}
function changeAge() {
  person.age += 1;
}
function changePerson() {
  Object.assign(person, { name: "李四", age: 40 });
}
// 监视reactive定义的对象类型数据,且默认是开启深度监视的!
watch(person, (newValue, oldValue) => {
  console.log("person变化了", newValue, oldValue);
});
</script>

<style scoped>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>

这种会隐式的创建深度监听!而且关不掉!!!

情况四:

监视ref或reactive定义的【对象类型】数据中的某个属性 注意点如下:

1.若该属性不是【对象类型】,需要写成函数形式。

2.若该属性值是依然是【对象类型】,可直接编辑,也可写成函数,不过建议写成函数。

我现在定义了一个reactive的数据对象,然后我想监视这个对象里面的属性,这个就得用一个箭头函数去支撑!才可以做到

复制代码
<template>
  <div class="person">
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <h2>汽车:{{ person.car.c1 }}{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCar">修改第一台车</button>
    <button @click="changeCar2">修改第二台车</button>
    <button @click="changeCar3">修改整个car</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { reactive, watch } from "vue";
let person = reactive({
  name: "张三",
  age: 19,
  car: {
    c1: "奔驰",
    c2: "宝马",
  },
});

function changeName() {
  person.name += "~";
}
function changeAge() {
  person.age += 1;
}
function changeCar() {
  person.car.c1 += "~";
}
function changeCar2() {
  person.car.c2 += "~";
}
function changeCar3() {
  person.car = {
    c1: "雅迪",
    c2: "爱玛",
  };
}

watch(
  () => person.name,
  (newValue, oldValue) => {
    console.log("person变化了", newValue, oldValue);
  }
);
</script>

<style scoped>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>

只要想监视对象中的某个属性,就直接写函数就完了!然后如果你想关注内部的值,就直接deep:true

复制代码
<template>
  <div class="person">
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <h2>汽车:{{ person.car.c1 }}{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCar">修改第一台车</button>
    <button @click="changeCar2">修改第二台车</button>
    <button @click="changeCar3">修改整个car</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { reactive, watch } from "vue";
let person = reactive({
  name: "张三",
  age: 19,
  car: {
    c1: "奔驰",
    c2: "宝马",
  },
});

function changeName() {
  person.name += "~";
}
function changeAge() {
  person.age += 1;
}
function changeCar() {
  person.car.c1 += "~";
}
function changeCar2() {
  person.car.c2 += "~";
}
function changeCar3() {
  person.car = {
    c1: "雅迪",
    c2: "爱玛",
  };
}

// watch(
//   () => person.name,
//   (newValue, oldValue) => {
//     console.log("person变化了", newValue, oldValue);
//   }
// );
watch(
  () => person.car,
  (newValue, oldValue) => {
    console.log("person变化了", newValue, oldValue);
  },
  { deep: true }
);
</script>

<style scoped>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>

情况五:

监视上述多个数据,用一个数组包含一下,然后写函数即可

复制代码
<template>
  <div class="person">
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <h2>汽车:{{ person.car.c1 }}{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCar">修改第一台车</button>
    <button @click="changeCar2">修改第二台车</button>
    <button @click="changeCar3">修改整个car</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { reactive, watch } from "vue";
let person = reactive({
  name: "张三",
  age: 19,
  car: {
    c1: "奔驰",
    c2: "宝马",
  },
});

function changeName() {
  person.name += "~";
}
function changeAge() {
  person.age += 1;
}
function changeCar() {
  person.car.c1 += "~";
}
function changeCar2() {
  person.car.c2 += "~";
}
function changeCar3() {
  person.car = {
    c1: "雅迪",
    c2: "爱玛",
  };
}

watch([() => person.name, () => person.car.c1], (newValue, oldValue) => {
  console.log("person变化了", newValue, oldValue);
});
</script>

<style scoped>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>
相关推荐
知识分享小能手12 分钟前
Typescript学习教程,从入门到精通,TypeScript 泛型与类型操作详解(二)(17)
前端·javascript·学习·typescript·jquery·前端网页学习
stark张宇26 分钟前
Web - Javascript 函数与DOM、BOM
前端
上海张律师38 分钟前
组件截图sdk -- screenshot_hm介绍 ##三方SDK##
前端·harmonyos
lineo_41 分钟前
抛弃陈旧写法,你的uniapp定义globalData的正确姿势(setup语法糖)
前端·javascript
spionbo42 分钟前
Vue 结合 D3 实现可拖拽拓扑图的技术方案及具体应用实例解析
前端·javascript
GIS之路44 分钟前
OpenLayers 图形交互编辑
前端
ViceBoy_1 小时前
前端混淆的概念-缓存&存储
前端·面试
中微子1 小时前
从C++看JavaScript闭包:执行上下文与作用域的跨语言对比
前端·c++
一轮大月亮1 小时前
JavaScript es6 语法 map().filter() 链式调用,语法解析 和常见demo
开发语言·javascript·es6
前端日常开发1 小时前
利用Web Worker实现稳定定时器:解决浏览器后台定时问题
前端