vue开发：watch 侦听器（监视器）

1.作用：

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

2.语法：

1. watch同样声明在跟data同级的配置项中
2. 简单写法： 简单类型数据直接监视
3. 完整写法：添加额外配置项

2.1 监听器简单写法

data: { 
 words: '苹果',
 obj: {
   words: '苹果'
 }
},
  watch: {
    // 该方法会在数据变化时，触发执行
    数据属性名 (newValue, oldValue) {
      一些业务逻辑 或 异步操作。 
    },
    '对象.属性名' (newValue, oldValue) {
      一些业务逻辑 或 异步操作。 
    }
  }

2.2 监听器复杂写法

完整写法 —>添加额外的配置项

1. deep:true 对复杂类型进行深度监听
2. immdiate:true 初始化 立刻执行一次

watch: {// watch 完整写法
  数据: {
    deep: true, //加入该配置,表示深度侦听;当对象的任意属性改变后,都可以侦听到
    immediate: true, //立即侦听(页面刷新,马上执行一次handler函数)handler
    handler (变化后的值，变化前的值) {
      console.log(newValue)
    }
  }
}

案例-实现翻译功能

<script>
    const app = new Vue({
      el: '#app',
      data: {
        words: '',
        obj: {
          q: 'What the fuck is a surprise',//把输入框双向绑定
          from: 'en', //你输入的是什么语言
          to: 'zh' //翻译成什么语言
        },
        result: '', //翻译后的结果
        timer: null
      },
      // 侦听器
      watch: {
        obj: {
          handler(val) {
            if (val === '') {
              this.result = ''
              return
            }
            clearTimeout(timer)
            this.timer = setTimeout(async () => { // async加在离await最近一层的函数上
              const { data: res } = await axios({
                url: 'http://www.itcbc.com:3006/api/translate',
                params: val
              })
              console.log(res)
              // 把服务器返回的结果,赋值给数据项
              this.result = res.trans_result[0].dst
            }, 1000)
          },
          deep: true, //加入该配置,表示深度侦听;当对象的任意属性改变后,都可以侦听到
          immediate: true //立即侦听(页面刷新,马上执行一次handler函数)
        }
      }
    })
  </script>