Vue中的监听机制

朱雀 2021-09-18 21:10 302阅读 0赞

在日常开发中，我们可能经常会通过一个变量的值，去控制处理一些逻辑。

比如，当我tepm的值为true的时候，我就需要去把某个变量增加1。反之则减一。

但是，在js中，代码一般都是从上往下执行的，当我执行到某一行，去判断temp的值的时候，当然可以做到针对性的逻辑处理，但是当我越过这段代码，之后还需要根据temp的状态实时进行操作，就显得有点无力了。

那么这时候就需要去监听temp值得变化，当值发生改变，然后我们再去控制一些逻辑的处理。

比如原生js中input框的change事件类似于这种机制。

那么在vue中有一种监听机制，也就是 **watch** 。

它只需要我们针对某一变量，然后就能做到实时监听值的变化，然后我们可以根据当前不同值的情况，做出不同的处理。

来看个案例吧。

<template>
        <p>
            数据类型：
            <el-radio v-model="radio" label="1">查询数据</el-radio>
            <el-radio v-model="radio" label="2">录入数据</el-radio>
        </p>
    </template>
    
    
    <script>
        export default {
            name: "JobDataUpdate",
            data(){
                return {
                    radio: '1',
                }
            },
            watch:{
                radio: function (curVal,oldVal) {
                    if(curVal == 1){
                       console.log("查询数据需要处理的逻辑");
                    }else if(curVal == 2){
                        console.log("录入数据需要处理的逻辑");
                    }
                }
            }
    </script>

这里data中定义了一个radio的变量，然后watch中我们监听这个变量，后面是对应的函数，其中两个参数分别对应当前的值和旧的值（也就是变化后的值和变化前的值），然后根据不同的情况，做出不同的处理。

这里的业务是一个单选框，然后根据选中的值得不同，处理不同的逻辑。

效果图：

![20190410095111735.gif][]

这样，无论什么时候我们的值发生改变，我们都能实时监听到，也就能处理其中的逻辑了。

以上就是vue中watch的简单简单简单的用法。

如想更深层次的了解，自己去官网折腾着看。

![20190410095325852.gif][]

附上vue官网地址：[Vue官网][Vue]

如有问题，请指出，接受批评。

个人微信公众号：

![20200824115616238.png][]

[20190410095111735.gif]: /images/20210812/47ea623d52384883ae75f43b2731185e.png
[20190410095325852.gif]: /images/20210812/6a99224c99d5467caa5e935c6652bbf0.png
[Vue]: https://cn.vuejs.org/v2/api/#watch
[20200824115616238.png]: /images/20210812/5901e6a96dfc40b1ae7ae13a06e7d79d.png