vue3中监听的使用说明

1.说明

2.示例

3.总结

1.说明

watch：侦听一个或者多个数据的变化，数据变化时执行后回调函数。

有两个额外的参数：1.immediate（画面加载后立即执行），2.deep（深度侦听）

2.示例

①侦听单个数据

导入watch函数，然后执行watch函数，传入要侦听的响应式数据（ref对象）和回调函数。回调中可以拿到新值和旧值。

②侦听多个数据的变化

以数组的方式传入多个ref对象，只要其中一个变化了就会触发侦听的回调函数。回调中可以拿到新值和旧值。

③所有示例

<template>
    <el-form :model="form" label-width="120px">
        <el-form-item label="面积">
            <el-input v-model="form.area" />
        </el-form-item>
        <el-form-item label="亩用量">
            <el-input v-model="form.permu" />
        </el-form-item>
        <el-form-item label="总量">
            <el-input v-model="form.total" :readonly="true" />
        </el-form-item>

        <el-form-item label="姓名">
            <el-input v-model="name" />
        </el-form-item>

        <el-form-item label="性别">
            <el-input v-model="sex" />
        </el-form-item>
        <el-form-item>
            <el-button @click="setForm">按钮</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { ref, watch } from 'vue';
const resetForm = () => {
    return {
        area: '',
        permu: '',
        total: ''
    }
}

const form = ref(resetForm());

const name = ref();
const sex = ref();

const setForm = () => {
    form.value = {
        area: '123',
        permu: '234',
        total: '345'
    }
}

// 侦听单个对象
watch(name, (newVal, oldVal) => {
    console.log("新：" + newVal + "，旧：" + oldVal);
})

// 侦听多个对象
watch([name, sex], (newArr, oldArr) => {
    console.log(newArr, oldArr);
})

// immediate：立刻执行，进入页面就执行一次，一般用于画面的初始化显示。
watch(name, (newVal, oldVal) => {
    console.log("进入页面执行了")
    console.log("新：" + newVal + "，旧：" + oldVal);
}, {
    immediate: true
})

// deep：深度监视，如果要监听的响应式对象中有多个属性，默认是浅层监听。
// 传入的响应式对象，如果是简单类型，可以直接监听，如果是复杂类型，监视不到复杂类型内部属性的变化,按照下面的示例，只有form.value重新设置了一个对象，监听才会触发
// 只有对象的地址发生了变化，才会触发监听，设置deep为true时，对象及对象中的某个属性发生变化时，也可以监听到
// 如果对象中的属性过多，会影响使用，一般不建议开深度监听

// ①浅层监听，点击按钮，修改form.value才会触发监听
watch(form, (newval, oldVal) => {
    console.log("监听到了")
    console.log(newval, oldVal);
})
// ②深度监听
watch(form, (newval, oldVal) => {
    console.log("深度监听触发")
    console.log(newval);
}, { deep: true })

// 精确侦听对象的某个属性
watch(
    () => form.value.area,
    (newVal,oldVal) =>{
        console.log("精确侦听对象的某个属性");
        console.log(newVal,oldVal);
    }
)
// 可以侦听某两个属性操作后的值
watch(
    () => Number(form.value.area) * Number(form.value.permu),
    (sum) => {
        console.log("执行了");
        form.value.total = ''
        if (sum) {
            form.value.total = sum.toFixed(2);
        }
    }
)

</script>

<style></style>

3.总结

开发中经常出现，表单中的某个值等于表单中的另外两个值的加减乘除后的值，可以用监听来实现。