vue学习日记09：watch侦听器（监视器）

yinfanfff

已于 2024-03-19 09:21:18 修改

阅读量337

点赞数 8

分类专栏： vue入门学习文章标签： vue.js 学习前端

于 2024-03-07 10:18:47 首次发布

本文链接：https://blog.csdn.net/yinfanfff/article/details/136523986

版权

vue入门学习专栏收录该内容

20 篇文章 2 订阅

订阅专栏

1.概念

（1）监听

如果words在根目录就只写words，如果是子目录就要'obj.words'

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 18px;
      }
      #app {
        padding: 10px 20px;
      }
      .query {
        margin: 10px 0;
      }
      .box {
        display: flex;
      }
      textarea {
        width: 300px;
        height: 160px;
        font-size: 18px;
        border: 1px solid #dedede;
        outline: none;
        resize: none;
        padding: 10px;
      }
      textarea:hover {
        border: 1px solid #1589f5;
      }
      .transbox {
        width: 300px;
        height: 160px;
        background-color: #f0f0f0;
        padding: 10px;
        border: none;
      }
      .tip-box {
        width: 300px;
        height: 25px;
        line-height: 25px;
        display: flex;
      }
      .tip-box span {
        flex: 1;
        text-align: center;
      }
      .query span {
        font-size: 18px;
      }

      .input-wrap {
        position: relative;
      }
      .input-wrap span {
        position: absolute;
        right: 15px;
        bottom: 15px;
        font-size: 12px;
      }
      .input-wrap i {
        font-size: 20px;
        font-style: normal;
      }
    </style>
  </head>
  <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">mela</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:''
          }
        },
        // 具体讲解：(1) watch语法 (2) 具体业务实现
        watch:{
          // 该方法会在数据变化时调用自行
          //newValue新值 oldValue老值（一般不用）
          // words(newValue,oldValue){
          //   console.log('变化了',newValue,oldValue)
          // },
          'obj.words'(newValue,oldValue){
            console.log('变化了',newValue,oldValue)
          }
        }
      })
    </script>
  </body>
</html>

（2）业务实现

在这段代码中，async 的作用是使得 obj.words 成为一个异步函数，使得函数内部可以使用 await 来等待 axios 发送请求并接收响应。如果不使用 async 声明，就无法在函数内部使用 await。因此，async 关键字在这里的作用是允许该函数进行异步操作，并且在需要时可以等待其他异步操作的完成

加入防抖通过延时来处理个人感觉会好一些但是还是不是很好控制

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 18px;
      }
      #app {
        padding: 10px 20px;
      }
      .query {
        margin: 10px 0;
      }
      .box {
        display: flex;
      }
      textarea {
        width: 300px;
        height: 160px;
        font-size: 18px;
        border: 1px solid #dedede;
        outline: none;
        resize: none;
        padding: 10px;
      }
      textarea:hover {
        border: 1px solid #1589f5;
      }
      .transbox {
        width: 300px;
        height: 160px;
        background-color: #f0f0f0;
        padding: 10px;
        border: none;
      }
      .tip-box {
        width: 300px;
        height: 25px;
        line-height: 25px;
        display: flex;
      }
      .tip-box span {
        flex: 1;
        text-align: center;
      }
      .query span {
        font-size: 18px;
      }

      .input-wrap {
        position: relative;
      }
      .input-wrap span {
        position: absolute;
        right: 15px;
        bottom: 15px;
        font-size: 12px;
      }
      .input-wrap i {
        font-size: 20px;
        font-style: normal;
      }
    </style>
  </head>
  <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: null  //延时器id 与页面渲染无关 可以删了 直接绑定到普通对象就行
        },
        // 具体讲解：(1) watch语法 (2) 具体业务实现
        watch:{
          // 该方法会在数据变化时调用自行
          //newValue新值 oldValue老值（一般不用）
          // words(newValue,oldValue){
          //   console.log('变化了',newValue,oldValue)
          // },
          'obj.words'(newValue,oldValue){
            // console.log('变化了',newValue,oldValue)

            //防抖：延迟执行 一段时间内没有再次触发才执行  因为目前是每个输入的字符都会进行翻译 不是很合理
            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)
            },400)
          }
        }
      })
    </script>
  </body>
</html>

（3）完整写法-->添加额外配置项

翻译结果不仅仅受内容影响也受下拉框选择的影响

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 18px;
      }
      #app {
        padding: 10px 20px;
      }
      .query {
        margin: 10px 0;
      }
      .box {
        display: flex;
      }
      textarea {
        width: 300px;
        height: 160px;
        font-size: 18px;
        border: 1px solid #dedede;
        outline: none;
        resize: none;
        padding: 10px;
      }
      textarea:hover {
        border: 1px solid #1589f5;
      }
      .transbox {
        width: 300px;
        height: 160px;
        background-color: #f0f0f0;
        padding: 10px;
        border: none;
      }
      .tip-box {
        width: 300px;
        height: 25px;
        line-height: 25px;
        display: flex;
      }
      .tip-box span {
        flex: 1;
        text-align: center;
      }
      .query span {
        font-size: 18px;
      }

      .input-wrap {
        position: relative;
      }
      .input-wrap span {
        position: absolute;
        right: 15px;
        bottom: 15px;
        font-size: 12px;
      }
      .input-wrap i {
        font-size: 20px;
        font-style: normal;
      }
    </style>
  </head>
  <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: {
          // words: ''
          obj:{
            words:'小凡',
            lang:'italy'
          },
          result:'',   //翻译结果
          // timer: null  //延时器id 与页面渲染无关 可以删了 直接绑定到普通对象就行
        },
        // 具体讲解：(1) watch语法 (2) 具体业务实现
        watch:{
          // 该方法会在数据变化时调用自行
          //newValue新值 oldValue老值（一般不用）
          // words(newValue,oldValue){
          //   console.log('变化了',newValue,oldValue)
          // },


          // 'obj.words'(newValue,oldValue){
          //   // console.log('变化了',newValue,oldValue)
          //
          //   //防抖：延迟执行 一段时间内没有再次触发才执行  因为目前是每个输入的字符都会进行翻译 不是很合理
          //   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)
          //   },400)
          // }
          obj:{
            deep:true,  //深度监视
            immediate: true,  //一进页面就会执行 当翻译框有默认内容也会进行翻译
            handler (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: newValue

                })
                this.result = res.data.data
                console.log(res.data.data)
              },400)
            }
          }


        }
      })
    </script>
  </body>
</html>

一进页面自动执行

总结

-----------------------------------------------------------------------------------------------------------------------------

注：本人是根据黑马程序员的B站教程来学习的，
链接：https://www.bilibili.com/video/BV1HV4y1a7n4/?spm_id_from=333.999.0.0

本文章仅仅是个人学习笔记无任何其他用途特此说明