【Vue】watch - 完整写法

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

deep: true 对复杂类型深度监视
immediate: true 初始化立刻执行一次handler方法

使用场景：一个结果需要通过多个条件来查询控制，这个时候通常会把这些查询条件丢到一个对象里，此时对象里的所有属性我们都需要监视

语法

js 复制代码

data: { 
  words: '苹果',
  obj: {
    words: '苹果'
  }
},

watch: {
  数据属性名: {
    deep:true,
    handler (newValue) {
      console.log(newValue)
    }
  }
}

完整代码

html 复制代码

<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.data
              console.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>