【Vue】watch侦听器（监视器）

本文主要是介绍【Vue】watch侦听器（监视器），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

作用：监视数据变化，执行一些业务逻辑或异步操作

这里的业务逻辑指发送请求等

语法：

watch同样声明在跟data同级的配置项中
简单写法：简单类型数据直接监视

完整写法：添加额外配置项

data: { words: '苹果',obj: {words: '苹果'}
},watch: {// 该方法会在数据变化时，触发执行// 方法名需要和被监视的属性名同名// 形参分别是变化后的新值，和之前的老值数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 },// 对象里的子属性'对象.属性名' (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}

代码示例

<body><div id="app"><!-- 条件选择框 --><div class="query"><span>翻译成的语言：</span><select><option value="italy">意大利</option><option value="english">英语</option><option value="german">德语</option></select></div><!-- 翻译框 --><div class="box"><div class="input-wrap"><textarea v-model="obj.words"></textarea><span><i>⌨️</i>文档翻译</span></div><div class="output-wrap"><div class="transbox">{{ result }}</div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：https://applet-base-api-t.itheima.net/api/translate// 请求方式：get// 请求参数：// （1）words：需要被翻译的文本（必传）// （2）lang： 需要被翻译成的语言（可选）默认值-意大利// -----------------------------------------------const app = new Vue({el: '#app',data: {// words: ''obj: {words: ''},result: '', // 翻译结果// 由于timer不需要具备任何的响应式特性，不需要跟页面渲染相关，它就没必要存到data里去，直接写this.timer就是直接挂到了当前实例上，也就是把app当成普通对象，往上面加属性，这样性能更高一些// timer: null // 延时器id},// 具体讲解：(1) watch语法 (2) 具体业务实现watch: {// 该方法会在数据变化时调用执行// newValue新值, oldValue老值（一般不用）// words (newValue) {//   console.log('变化了', newValue)// }'obj.words'(newValue) {// console.log('变化了', newValue)// 防抖: 延迟执行 → 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行clearTimeout(this.timer)this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: {words: newValue}})this.result = res.data.dataconsole.log(res.data.data)}, 300)}}})</script>
</body>