最新版vue3+TypeScript开发入门到实战教程之watch详解

1、watch概述watch本意是监视、观察。它的功能就是监视数据的变化。数据一旦变化就会产生两种数据新数据、旧数据。如业务场景中当订单量大多某个数时就发放优惠卷。watch非常重要掌握好响应式数据、computed、watchvue写功能不会有太大问题。在vue官网明确表达watch可以监视以下四种数据ref定义的数据reactive定义的数据函数返回一个值getter函数包含上诉三种值的数组2、监视ref定义的基本类型数据创建组件Fish引入ref、watch创建响应式数据name、pricewatch函数监视price变化当price超过10watch停止监视price变化template h2鱼类{{ name }}/h2 h2价格{{ price }}/h2 button clickaddPrice()增加价格/button /template script setup import { ref, watch } from vue let name ref(鲫鱼); let price ref(5); function addPrice() { price.value 1; } let stopWatchPrice watch(price, (newValue, oldValue) { console.log(newValue, oldValue); if (newValue 10) { console.log(stopWatchPrice); stopWatchPrice.stop(); } }) /script运行效果事例注意watch函数监视的是price而不是price.value。当点击按钮price超过10虽然数据在增加但不再监视price。watch函数返回对象有stop函数,调用此函数即可解除监视。控制台打印其结构如下() { effect2.stop(); if (scope scope.active) { remove(scope.effects, effect2); } }3、监视ref定义的对象类型数据监视对象类型的数据与基础类型的数据不同。当对象中的数据变化时是无法监视到但当整个数据改变时是可以监视的。特点如下创建组件Fish引入ref、watch创建响应式对象fishlet fish ref({ name: ‘鲫鱼’, price: 5 });当改变fish.name值时无法监视fish的变化当改变fish.price值时无法监视fish的变化当改变整条鱼时能够监视fish变化template h2鱼类{{ fish.name }}/h2 h2价格{{ fish.price }}/h2 button clickchangeName()修改鱼类/button button clickchangePrice()修改鱼价/button button clickchangeFish()更换真个鱼/button /template script setup import { ref, watch } from vue let fish ref({ name: 鲫鱼, price: 5 }); function changeName() { fish.value.name ~; } function changePrice() { fish.value.price 1; } function changeFish() { fish.value { name: 鲤鱼, price: 10 }; } watch(fish, (newValue, oldValue) { console.log(newValue, oldValue); })运行效果如下当修改响应式对象成员变量时不会引起fish watch函数运行。原因在于watch监视的不是fish.name而是fish。那么如何才能监视fish.name与fish.price数据变化呢watch函数它有三个参数一是监视对象二是监视回调函数三是配置对象参数如deep等等只有在配置对象开启deep即可。template h2鱼类{{ fish.name }}/h2 h2价格{{ fish.price }}/h2 button clickchangeName()修改鱼类/button button clickchangePrice()修改鱼价/button button clickchangeFish()更换真个鱼/button /template script setup import { ref, watch } from vue let fish ref({ name: 鲫鱼, price: 5 }); function changeName() { fish.value.name ~; } function changePrice() { fish.value.price 1; } function changeFish() { fish.value { name: 鲤鱼, price: 10 }; } watch(fish, (newValue, oldValue) { console.log(newValue, oldValue); }, { deep: true }) /script运行效果仔细观看控制台打印的新数据、旧数据。当fish.name改变时新旧数据一样当fish.price改变时新旧数据一样当fish整个改变时新旧数据不一样效果如图注意fish.name与fish.price新旧数据是一样的。因为watch是从对象地址取到的数据。4、watch监视函数返回一个值getter函数它的功能是wath监视响应式对象中一个属性如监视fish.name,是不允许直接监视需要写成一个函数的形式。创建组件Fish引入reactive, watch创建响应式对象fish鱼的名字鱼的体型长度、重量分别监听鱼的名字与体型点击按钮修改鱼类鱼的长度、鱼的重量、鱼的体型template h2鱼类{{ fish.name }}/h2 h2鱼长度{{ fish.body.long }}/h2 h2鱼重量{{ fish.body.weight }}/h2 button clickchangeName()修改鱼类/button button clickchangeFishLong()修改鱼的长度/button button clickchangeFishWeight()修改鱼的重量/button button clickchangeFishbody()修改鱼的体型/button /template script setup import { reactive, watch } from vue let fish reactive({ name: 鲫鱼, body: { long: 1, weight: 24 } }); function changeName() { fish.name ~; } function changeFishLong() { fish.body.long 1; } function changeFishWeight() { fish.body.weight 1; } function changeFishbody() { fish.body { long: 100, weight: 300 }; } watch(() { return fish.name }, (newValue, oldValue) { console.log(监听fish.name, newValue, oldValue); }) watch(() { return fish.body }, (newValue, oldValue) { console.log(监听fish.body, newValue, oldValue); }) /script监听响应式对象中的参数需要写成一个箭头函数并返回监听参数即可。具体操作看下图当点击按钮发现只有修改鱼类、修改鱼的体型才能监听到变化。这是因为watch监听的地址。若想要能够监听到鱼的长度、鱼的重量需要再watch加入deep参数即可。watch(() { return fish.body }, (newValue, oldValue) { console.log(监听fish.body, newValue, oldValue); }, { deep: true })注意点击按钮修改鱼的长度、修改鱼的重量新旧数据是一致的。5、watch监视含有响应式对象数组的数据watch监视的对象是一个数组数组内可以是ref定义基本类型数据也可是对象可以是函数。watch([() { return fish.name },() { return fish.body }], (newValue, oldValue) { console.log(监听素组, newValue, oldValue); }, { deep: true })由于使用配置参数deep操作效果如下具体代码template h2鱼类{{ fish.name }}/h2 h2鱼长度{{ fish.body.long }}/h2 h2鱼重量{{ fish.body.weight }}/h2 button clickchangeName()修改鱼类/button button clickchangeFishLong()修改鱼的长度/button button clickchangeFishWeight()修改鱼的重量/button button clickchangeFishbody()修改鱼的体型/button /template script setup import { reactive, watch } from vue let fish reactive({ name: 鲫鱼, body: { long: 1, weight: 24 } }); function changeName() { fish.name ~; } function changeFishLong() { fish.body.long 1; } function changeFishWeight() { fish.body.weight 1; } function changeFishbody() { fish.body { long: 100, weight: 300 }; } watch([() { return fish.name },() { return fish.body }], (newValue, oldValue) { console.log(监听素组, newValue, oldValue); }, { deep: true }) /script6、总结watch可以监视四种数据再加上配置函数内容多且难记。在项目中多练习几次就能熟记。ref定义的数据reactive定义的数据函数返回一个值getter函数包含上诉三种值的数组在现实开发中第一种和第三种情况最常用。尤其第三种情况加函数加配置参数deep。属于重中之重。watch(() { return fish.body }, (newValue, oldValue) { console.log(监听fish.body, newValue, oldValue); }, { deep: true })