- 声明属性
- 通过vue按需引入watch
- 对指定声明的属性实行监听
<template>
<el-button type="primary" @click="handleChangeData">修改数据触发watch监听</el-button>
<div class="count">{{sNum}}</div>
</template>
<script>
import { defineComponent, reactive, ref, toRefs, watchEffect, watch } from "vue";
export default defineComponent({
name: "Box",
setup() {
let state = reactive({
sNum: 1,
sObj: {
account: "zhangsan",
password: 111111,
},
fontColor: "black",
});
let rNum = ref(2);
let rObj = ref({account: "lisi", password: 222222});
let handleChangeData = ()=>{
state.sNum = 2;
state.sObj = {
account: "wangwu",
password: 333333,
};
rNum.value = 3;
rObj.value = {
account: "laoliu",
password: 444444,
};
}
watch(() => state.sNum, (value) => {
console.log(value, "sNum即刻监听");
}, {immediate: true});
watch(() => state.sNum, (value) => {
console.log(value, "sNum改变了");
});
watch([() => state.sNum, () => state.sObj], (value) => {
console.log(value, "多个");
});
watch(() => state.sObj, (value) => {
console.log(value, "sObj改变了");
}, {deep: true});
watch(rNum, (value) => {
console.log(value, "rNum即刻监听");
}, {immediate: true});
watch(rNum, (value) => {
console.log(value, "rNum改变了");
});
watch([rNum, rObj], (value) => {
console.log(value, "多个");
});
watch(rObj, (value) => {
console.log(value, "rObj改变了");
}, {deep: true});
watchEffect(() => {
if (state.sNum % 2) {
state.fontColor = "deeppink";
} else {
state.fontColor = "blue";
}
});
return {
...toRefs(state),
rNum,
rObj,
handleChangeData,
};
},
});
</script>
<style lang="scss" scope>
.count {
color: v-bind(fontColor);
font-weight: bold;
font-size: 20px;
}
</style>