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.总结

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

相关推荐
一梦南柯15 分钟前
无需CI/CD!手把手教你用Webpack插件实现Vue项目一键标准化打包
前端·vue.js·webpack
受之以蒙15 分钟前
Rust 宏全解析:从基础到实战,掌握代码生成魔法
前端·笔记·rust
呆萌呆萌怪兽19 分钟前
Flutter三棵树架构深度解析
前端·面试
luoluomo洛尘21 分钟前
适合摸鱼看的TypeScript学习日记 - 更多关于函数的类型知识
前端·typescript
菜心8822 分钟前
说透Android里面的PopupWindow和Dialog的区别
前端
安逸和尚easymonk27 分钟前
Vue的性能优化有哪些?
前端·面试
赵晟鼎28 分钟前
一文说清浏览器事件循环机制所有细节
前端·javascript·浏览器
赵晟鼎29 分钟前
一文说清垃圾回收机制、闭包与上下文
前端·javascript·浏览器
clevali32 分钟前
一文整理下所有关于dom 尺寸的属性、方法
前端
MariaH33 分钟前
搞定Express框架
前端