Vue中的监听机制

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

比如，当我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中我们监听这个变量，后面是对应的函数，其中两个参数分别对应当前的值和旧的值（也就是变化后的值和变化前的值），然后根据不同的情况，做出不同的处理。

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

效果图：

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

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

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

附上vue官网地址：Vue官网

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

个人微信公众号：