完整写法 → 添加额外配置项
- deep: true 对复杂类型深度监视
- immediate: true 初始化立刻执行一次handler方法
使用场景：一个结果需要通过多个条件来查询控制，这个时候通常会把这些查询条件丢到一个对象里，此时对象里的所有属性我们都需要监视
语法
data: { words: '苹果',obj: {words: '苹果'}
},watch: {数据属性名: {deep:true,handler (newValue) {console.log(newValue)}}
}
完整代码
<body><div id="app"><!-- 条件选择框 --><div class="query"><span>翻译成的语言：</span><select v-model="obj.lang"><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: {obj: {words: '小黑',lang: 'italy'},result: '', // 翻译结果},watch: {obj: {deep: true, // 深度监视immediate: true, // 立刻执行，一进入页面handler就立刻执行一次，比如words有默认值，一进页面就需要立马翻译handler(newValue) {clearTimeout(this.timer)this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',// 这里直接把这个新对象传进去即可params: newValue})this.result = res.data.dataconsole.log(res.data.data)}, 300)}}// 'obj.words' (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.data// console.log(res.data.data)// }, 300)// }}})</script>
</body>
![[数据集][图像分类]茶叶叶子病害分类数据集304张4类别](http://pic.xiahunao.cn/[数据集][图像分类]茶叶叶子病害分类数据集304张4类别)
