Vue中watch的用法总结

话不多说，代码页：

<template>
    <div class="about">
        <p>{{num}}</p>
        <p><input type="text" v-model="num"></p>
        <p>{{str}}</p>
        <p><input type="text" v-model="str"></p>
        <p>{{obj.name}}</p>
        <p><input type="text" v-model="obj.name"></p>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                num: '初始num',
                str: '初始str',
                obj: {
                    id: 1,
                    name: '初始name',
                },
            };
        },
        watch: {
            num(newNum, oldNum) {
                console.log(newNum);
            },
            str: {
                handler(newStr, oldStr) {
                    console.log(newStr);
                },
                immediate: true,
            },
            'obj.name': {
                handler(newName, oldName) {
                    console.log(newName);
                },
                immediate: true,
                deep: true,
            },
        },
    };
</script>

页面效果：

 

handler和immediate

      不使用handle时watch首次绑定值不会执行监听函数，改变后才会执行。如上图num的初始值就没有被打印。若是需要最初绑定值的时候执行函数，就需要用到immediate: true。如上图所示，str和obj.name的初始值没改变之前也会打印。用途的话例如父传子的初始值就可以用到这个属性。

deep

      deep为深度监听。一般watch无法监听到对象属性的改变，但是可以监听到data中的数据，设置deep：true即可监听到data中的对象。若是只需要监听对象其中的一个属性，方法名就需要写成字符串的形式，如上代码所示。

 

结语：如果有错误或不足，恳请指出。如果有用的话，请多多点赞和关注吧，谢谢了！