Vue--1.7watch侦听器（监视器）

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

语法：

1.简单写法->简单类型数据，直接监视

复制代码

    const app = new Vue({
      el: '#app',
      data: {
        words:''
      },
      watch:{
        words(newValue,oldValue){

        }
      }
    })

    const app = new Vue({
      el: '#app',
      data: {
        obj: {
          words: ''
        }
      },
      watch: {
        'obj.words'(newValue) {

        }
      }
    })

案例：翻译软件

复制代码

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <div id="app">
    <textarea rows="10" cols="40" v-model="obj.words"></textarea>
    <textarea rows="10" cols="40" v-model="result"></textarea>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        obj: {
          words: ''
        },
        result: '',
        timer: null
      },
      watch: {
        '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
          }, 300)
        }
      }
    })
  </script>
</body>

</html>

2.完整写法->添加额外配置项

1）deep:true对复杂类型深度监视

2）immediate:true初始化立刻执行一次handler方法

复制代码

    const app = new Vue({
      el: '#app',
      data: {
        obj: {
          words: '',
          lang:''
        }
      },
      watch: {
        数据属性名:{
            deep:true,//深度监视
            immediate: true,//立即执行，一进入页面handler就立刻执行
            handler(newValue){
                
            }
        }
      }
    })

案例：翻译软件Pro

复制代码

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <div id="app">
    翻译成语言：<select v-model="obj.lang">
      <option value="english">英语</option>
      <option value="franch">法语</option>
      <option value="italy">意大利</option>
    </select>
    <br><br>
    <textarea rows="10" cols="40" v-model="obj.words"></textarea>
    <textarea rows="10" cols="40" v-model="result"></textarea>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        obj: {
          words: '',
          lang: 'english'
        },
        result: '',
        timer: null
      },
      watch: {
        obj: {
          deep: true,
          immediate: true,
          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.data
            }, 300)
          }
        }
      }
    })
  </script>
</body>

</html>