vue3+ts watch 整理

watch() 一共可以接受三个参数,侦听数据源、回调函数和配置选项

作用:监视数据的变化(和Vue2中的watch作用一致)

特点:Vue3中的watch只能监视以下四种数据:

ref定义的数据。

reactive定义的数据。

函数返回一个值(getter函数)。

一个包含上述内容的数组
ref 定义的数据

复制代码
<template>
  <div>str===={{ str }}</div>
  <div>perosn 的name===={{ personObj.name }}</div>
  <div>Person 的age===={{ personObj.age }}</div>
  <div>Person的Car===={{ personObj.car }}</div>
  <div>Person的Car.color===={{ personObj.car.color }}</div>
  <div>Person的Car.price===={{ personObj.car.price }}</div>
  <div>
    <el-button @click="editPerson">点击修改部分属性</el-button>
    <el-button @click="editPersonAll">点击修改全部</el-button>
    <el-button @click="editString">修改基本数据类型</el-button>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, ref, toRefs, Ref } from "vue";
interface Person {
  name: string;
  age: number;
  car: {
    price: number;
    color: string;
  };
}
// let str: Ref<string> = ref("AAA"); // 泛型写法
let str = ref("AAA");
let personObj = ref<Person>({
  name: "aaa",
  age: 12,
  car: {
    price: 12,
    color: "reds",
  },
});
const editPerson = () => {
  personObj.value.name = "bbb";
};
const editPersonAll = () => {
  personObj.value.car = {
    price: 222,
    color: "blue",
  };
};

const editString = () => {
  str.value = "Bbb";
};
// 监听基本数据类型变化
watch(
  () => str.value,
  (newValue, oldValue) => {
    console.log("监听基本数据类型变化newValue");
    console.log(newValue);
    console.log(oldValue);
  }
);
// 监听对象类型某个值的变化
watch(
  () => personObj.value.name,
  (newValue, oldValue) => {
    console.log("personObj.value.name");
    console.log("newValue==" + newValue);
    console.log("oldValue==" + oldValue);
  }
);

/* 
    监视,情况一:监视【ref】定义的【对象类型】数据,监视的是对象的地址值,若想监视对象内部属性的变化,需要手动开启深度监视
    watch的第一个参数是:被监视的数据
    watch的第二个参数是:监视的回调
    watch的第三个参数是:配置对象(deep、immediate等等.....) 
  */
watch(
  personObj,
  (newValue, oldValue) => {
    console.log("修改整个车");
    console.log("newValue==");
    let { car, name, age } = toRefs(newValue);
    console.log(car, name.value, age.value);
    console.log("oldValue==");
    // let {car,name,age} = toRefs(oldValue)
    // console.log(car,name,age);
  },
  {
    deep: true,
  }
);
</script>

<style scoped></style>

reactive 定义的数据

ref 写法

复制代码
<template>
  <div>perosn 的name===={{ personObj.name }}</div>
  <div>Person 的age===={{ personObj.age }}</div>
  <div>Person的Car===={{ personObj.car }}</div>
  <div>Person的Car.color===={{ personObj.car.color }}</div>
  <div>Person的Car.price===={{ personObj.car.price }}</div>
  <div>
    <el-button @click="editPerson">点击修改部分属性</el-button>
    <el-button @click="editPersonAll">点击修改全部</el-button>
  </div>
</template>
<script setup lang="ts">
import { reactive, watch, ref } from "vue";
interface Person {
  name: string;
  age: number;
  car: {
    price: number;
    color: string;
  };
}
let personObj = reactive<Person>({
  name: "aaa",
  age: 12,
  car: {
    price: 12,
    color: "reds",
  },
});
const editPerson = () => {
  personObj.name = "bbb";
};
const editPersonAll = () => {
  personObj.car = {
    price: 222,
    color: "blue",
  };
};
//监听基本数据类型的写法
watch(
  () => personObj.name,
  (newValue, oldValue) => {
    console.log("newValue==" + newValue);
    console.log("oldValue==" + oldValue);
  }
);
监听对象类型的写法 (推荐使用这种方法)
// watch(
//   () => personObj.car,
//   (newValue, oldValue) => {
//     console.log("修改整个车");
//     console.log("newValue==" + newValue);
//     console.log("oldValue==" + oldValue);
//   }
// );
监听对象类型的写法
watch(personObj.car, (newValue, oldValue) => {
  console.log("修改整个车");
  console.log("newValue==" + newValue);
  console.log("oldValue==" + oldValue);
});
</script>

监听多个值变化

ref 写法

复制代码
<template>
  <div>perosn 的name===={{ personObj.name }}</div>
  <div>Person 的age===={{ personObj.age }}</div>
  <div>Person的Car===={{ personObj.car }}</div>
  <div>Person的Car.color===={{ personObj.car.color }}</div>
  <div>Person的Car.price===={{ personObj.car.price }}</div>
  <div>
    <el-button @click="editPersonName">点击修改name</el-button>
    <el-button @click="editPersonCarColor">点击修改car-color</el-button>
  </div>
</template>

<script setup lang="ts">
import { tr } from "element-plus/es/locales.mjs";
import { reactive, watch, ref, toRefs, Ref } from "vue";
interface Person {
  name: string;
  age: number;
  car: {
    price: number;
    color: string;
  };
}
let personObj = ref<Person>({
  name: "aaa",
  age: 12,
  car: {
    price: 12,
    color: "reds",
  },
});
const editPersonName = () => {
  personObj.value.name = "bbb";
};
const editPersonCarColor = () => {
  personObj.value.car.color = "bule";
};

// 监听对象类型某个值的变化
// 传入的是数组, 获取到的newValue 也是数组,一一对应的关系
watch(
  [() => personObj.value.name, personObj.value.car],
  (newValue, oldValue) => {
    console.log("personObj.value--watch");
    console.log(newValue);
    console.log(oldValue);
  },
  {
    deep: true,
  }
);
</script>

<style scoped></style>

reactive 写法

复制代码
<template>
  <div>perosn 的name===={{ personObj.name }}</div>
  <div>Person 的age===={{ personObj.age }}</div>
  <div>Person的Car===={{ personObj.car }}</div>
  <div>Person的Car.color===={{ personObj.car.color }}</div>
  <div>Person的Car.price===={{ personObj.car.price }}</div>
  <div>
    <el-button @click="editPersonName">点击修改name</el-button>
    <el-button @click="editPersonCarColor">点击修改car-color</el-button>
  </div>
</template>

<script setup lang="ts">
import { tr } from "element-plus/es/locales.mjs";
import { reactive, watch, ref, toRefs, Ref } from "vue";
interface Person {
  name: string;
  age: number;
  car: {
    price: number;
    color: string;
  };
}
let personObj = reactive<Person>({
  name: "aaa",
  age: 12,
  car: {
    price: 12,
    color: "reds",
  },
});
const editPersonName = () => {
  personObj.name = "bbb";
};
const editPersonCarColor = () => {
  personObj.car.color = "bule";
};

// 监听对象类型某个值的变化
// 传入的是数组, 获取到的newValue 也是数组,一一对应的关系
watch(
  [() => personObj.name, personObj.car],
  (newValue, oldValue) => {
    console.log("personObj.value--watch");
    console.log(newValue);
    console.log(oldValue);
  },
  {
    deep: true,
  }
);
</script>

<style scoped></style>
相关推荐
叫我阿柒啊15 小时前
Java全栈开发实战:从基础到微服务的深度解析
java·微服务·kafka·vue3·springboot·jwt·前端开发
Jinuss19 小时前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
Jinuss1 天前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3
Jinuss2 天前
Vue3源码reactivity响应式篇之EffectScope
前端·vue3
叫我阿柒啊4 天前
从Java全栈到前端框架的全面实战:一次真实面试的深度解析
java·spring boot·缓存·微服务·消息队列·vue3·rest api
叫我阿柒啊4 天前
从Java全栈到Vue3实战:一次真实面试中的技术探索
java·数据库·spring boot·微服务·typescript·vue3·restful
叫我阿柒啊5 天前
从Java全栈到前端框架:一位程序员的实战之路
java·spring boot·微服务·消息队列·vue3·前端开发·后端开发
叫我阿柒啊5 天前
从Java全栈到云原生:一场技术深度对话
java·spring boot·docker·微服务·typescript·消息队列·vue3
叫我阿柒啊5 天前
从Java全栈到Vue3实战:一次真实面试的深度复盘
java·spring boot·微服务·vue3·响应式编程·前后端分离·restful api