watch监视的作用
watch
: 监视数据的变化,与Vue2
中的watch作用相同。
特点:Vue3中的watch只能监视以下四种数据:
ref
定义的数据reactive
定义的数据- 函数返回的一个值(
getter
函数)- 一个包含上述情况的数组
语法:
watch(参数1,参数2,参数3)
参数1:被监视的数据
参数2:监视的回调,有俩个参数,一个是newValue
,一个是oldValue
参数3:配置对象(deep
(是否开启深度监视)、immediate
(立即执行一次)等等....)
情况一
监视
ref
定义的基本类型数据:直接写数据名即可,监视的是其value
的变化。
运行结果
代码
<template>
<div class="root">
<h2>监视ref定义的基础数据类型</h2>
<h3>n = {{ n }}</h3>
<button @click="changeN">n加一</button>
</div>
</template>
<!--Vue 3 setup语法糖 -->
<script setup lang='ts' name="App">
import { ref, watch } from 'vue';
//ref定义的数据
let n = ref(10);
const changeN = () => {
n.value += 1;
}
//监视
/**
* 语法结构:
* watch(参数1,参数2,参数3)
* 参数1:被监视的数据
* 参数2:监视的回调,有俩个参数,一个是newValue,一个是oldValue
* 参数3:配置对象(deep(是否开启深度监视)、immediate(立即执行一次)等等....)
*/
const stopWatch = watch(n, (newValue, oldValue) => {
console.log("n发生了改变", newValue, oldValue);
//做逻辑
if (newValue > 20) {
//停止监视
stopWatch()
}
})
</script>
<style scoped>
.root {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
.roles {
background-color: rgb(211, 216, 218);
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
h2 {
width: 1000px;
}
button {
margin: 0 5px;
}
div {
margin: 10px;
}
</style>
标签:Vue3,10px,watch,参数,监视,ref,newValue
From: https://www.cnblogs.com/me-me/p/18248798