<template>
<div>watchEffect</div>
<h3></h3>
<div>求和1:{{ sum1 }}</div>
<div>求和2:{{ sum2 }}</div>
<div><el-button @click="clicksum1">点击修改sum1</el-button></div>
<div><el-button @click="clicksum2">点击修改sum2</el-button></div>
</template>
<script setup>
import { ref, watch, watchEffect } from 'vue'
let sum1 = ref(1)
let sum2 = ref(1)
function clicksum1() {
sum1.value += 1
}
function clicksum2() {
sum2.value += 1
}
// watch([sum1, sum2], (val) => {
// console.log(val)
// let [new1, new2] = val
// if (new1 + new2 > 8) {
// console.log('需要处理时候')
// }
// })
//watchEffect 监听所有数据,变化使用即可
watchEffect(() => {
if (sum1.value + sum2.value > 8) {
console.log('需要处理时候')
}
})
</script>
<style scoped>
.flex {
display: flex;
align-items: center;
}
</style>
vue3 watchEffect全自动监听,会立即执行
最新推荐文章于 2024-06-25 15:50:09 发布