Vue利用watch偵聽器模擬實現(xiàn)翻譯功能

更新時間：2024年11月11日 10:18:50 作者：程序猿教你打籃球

本期將會介紹 Vue 中的 watch 偵聽器,它語法是怎么樣的呢？具有怎樣的功能呢？最后用模擬實現(xiàn)百度翻譯來更進(jìn)一步練習(xí) watch 偵聽器,需要的朋友可以參考下

1、認(rèn)識翻譯功能

翻譯軟件相信大家都不陌生，通常網(wǎng)頁版的翻譯就是，在給定的左側(cè)文本框中輸入英文，過一小會右側(cè)的文本框就會給出中文的翻譯。

實現(xiàn)這個翻譯功能，這里先不考慮后端是如何執(zhí)行翻譯這個業(yè)務(wù)的，只考慮前端的設(shè)計。

設(shè)計方案：

① 可以是在用戶輸入英文后，假設(shè) 0.5s 中用戶沒有任何輸入了，右側(cè)文本框就會自動展示出翻譯后的結(jié)果。

② 當(dāng)用戶輸入英文后，需要敲回車，或者單擊翻譯按鈕，右側(cè)的文本框才會展示出翻譯后的結(jié)果。

方案 ② 就容易實現(xiàn)一點，無非就是單擊按鈕，提交請求給后端翻譯，就OK了，而方案 ① 相當(dāng)于是捕捉用戶的行為，自動的提交請求給后端翻譯，這里就需要用到本期講解的 Vue 中的 watch偵聽器了！

2、watch偵聽器(監(jiān)視器)語法

首先需要先了解 watch 的作用：

監(jiān)視數(shù)據(jù)變化，執(zhí)行一些業(yè)務(wù)邏輯或異步操作

語法如下：

watch同樣聲明在跟data同級的配置項中
簡單寫法：簡單類型數(shù)據(jù)直接監(jiān)視
完整寫法：添加額外配置項

data: { 
  words: 'hello',
  obj: {
    words: 'cat'
  }
},

watch: {
  // 該方法會在數(shù)據(jù)變化時，觸發(fā)執(zhí)行
  words (newValue, oldValue) {
    // code ... 一些業(yè)務(wù)邏輯 或 異步操作。 
  },
  'obj.words' (newValue, oldValue) {
    // code ... 一些業(yè)務(wù)邏輯 或 異步操作。 
  }
}

簡單來說，就是在 watch 配置項中配置要監(jiān)視的數(shù)據(jù)名，或者對象，一旦監(jiān)視的對象，的內(nèi)容發(fā)生變化了，就會立刻執(zhí)行配置項中對應(yīng)的代碼塊。

有了上述的簡單認(rèn)識，后面就模擬實現(xiàn)一個翻譯功能，來更直觀的感受偵聽器。

3、模擬實現(xiàn)翻譯功能

這里直接看代碼，主要關(guān)注最終的運行結(jié)果和 js 里面的代碼部分。

<!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>
      const getRandomCharacter = () => {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        const randomIndex = Math.floor(Math.random() * characters.length);
        return characters[randomIndex];
      }
      const getRandomEnglishString = (length) => {
        let randomString = '';
        for (let i = 0; i < length; i++) {
            randomString += getRandomCharacter();
        }
        return randomString;
      }
      
      const app = new Vue({
        el: '#app',
        data: {
          obj: {
            words: ''
          },
          result: '', // 翻譯結(jié)果
          timer: null // 延時器
        },
        watch: {
          // 該方法會在數(shù)據(jù)變化時調(diào)用執(zhí)行
          // newValue新值, oldValue老值（一般不用）
          'obj.words' (newValue) {
            // 防抖: 延遲執(zhí)行 → 干啥事先等一等，延遲一會，一段時間內(nèi)沒有再次觸發(fā)，才執(zhí)行
            clearTimeout(this.timer)
            this.timer = setTimeout(() => {
              this.result = getRandomEnglishString(10) // 隨機(jī)生成長度為10的字符串
            }, 300)
          }
        }
      })
    </script>
  </body>
</html>

上述代碼的功能就是，隨便輸入，300 毫秒未輸入，就會自動更新 result 里面的只，代碼層面看，就是當(dāng) obj.words 這個變量的值發(fā)生的變化，那么就會立馬觸發(fā)對應(yīng)代碼塊的代碼。

看到這可能有點小疑問，我難道不能直接偵聽 obj 整個對象嗎？當(dāng)然可以，但是這里就需要用到深度監(jiān)視了！

也就是后面要講到的 watch 的完整寫法。

4、watch 的深度監(jiān)視

這里才是真正的 watch 的完整體。

完整寫法 —>添加額外的配置項

deep:true 對復(fù)雜類型進(jìn)行深度監(jiān)聽
immdiate:true 初始化立刻執(zhí)行一次

data: {
  obj: {
    words: 'hello',
    lang: 'italy'
  },
},

watch: {// watch 完整寫法
  obj: {
    deep: true, // 深度監(jiān)視
    immdiate:true,//立即執(zhí)行handler函數(shù)
    handler (newValue) {
      console.log(newValue)
    }
  }
}

深度監(jiān)視，也就是 obj 這個對象中的 words 或者 lang 屬性任何一個發(fā)生變化，都會立即執(zhí)行里面的 handler 函數(shù)！

上面的模擬實現(xiàn)翻譯的代碼留了個小坑，當(dāng)切換語言的時候，是不會觸發(fā)翻譯效果的，這時用上深度監(jiān)聽整個 obj 對象，就可以實現(xiàn)了，快去優(yōu)化一下吧！

到此這篇關(guān)于Vue利用watch偵聽器模擬實現(xiàn)翻譯功能的文章就介紹到這了,更多相關(guān)Vue watch模擬實現(xiàn)翻譯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: