前言

大家对于vue的watch属性肯定都很了解了，但是否了解过watch可以取消呢？

一、vue的watch

对于vue的watch属性就不对赘述了，可以直接看官方文档，比我讲的清楚多了，但是在官方文档中其实有一段不太起眼的文字描述：”除了 watch 选项之外，您还可以使用命令式的 vm.$watch API。“；其实vue也提供了watch的api，这个api与watch一样，能够监听响应式的数据变化，在回调方法中执行自己想要的逻辑，但同时也要注意一点，就是这个api的返回值，其实也是一个方法，如下图所示，可以用来取消watch监听，那么下面就可以使用该功能实现单次watch监听啦~

二、简单的单次监听demo

我们简单的写一个输入框，v-model双向绑定到value变量上

<el-input size="mini" v-model="value"></el-input>
<div>我是单次监听变化的值：{{watchValue}}</div>

然后我们展示单次监听的变量watchValue，在created生命周期中watch监听value的变化，当输入框的值改变一次之后，就unwatch掉，不再监听，这样的话后续输入框的值变化，watchValue也不会变化了，就实现了单次watch的功能。

export default {
    data() {
        return {
            value: '我是初始值',
            watchValue: ''
        }
    },
    created() {
        this.watchValue = this.value;
        const unwatch = this.$watch('value', (nVal) => {
            this.watchValue = nVal;
            this.$nextTick(() => {
                unwatch()
            })
        })    
    },
}

效果：

三、应用场景

那在什么时候有这种应用场景嘞，眼界有限，只能说说我碰到的场景啦~ 想像一下，假如前端这边筛选项有好几个下拉框数据是后端返回的（必选并且初始化会全选），但是我们需要在首次加载页面的时候查询表格内容，那么我们是不是可以watch或者computed监听下拉框绑定值，当都有值的时候查询表格内容，但是这时候又有个问题了，后续我们变动下拉选择内容的时候都会触发watch并且查询，这时候我们的单次watch就有用了，可以在首次加载页面的时候watch监听，待查询方法执行完之后，再取消watch监听，这样就满足我们的需求啦~

总结

以上我们就实现单次watch的能力了~ 可以参考gihub：github.com/qiangguangl…