【Vue】watch - 完整写法

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

  1. deep: true 对复杂类型深度监视
  2. 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>
相关推荐
m0_748250744 分钟前
高性能Web网关:OpenResty 基础讲解
前端·openresty
前端没钱30 分钟前
从 Vue 迈向 React:平滑过渡与关键注意点全解析
前端·vue.js·react.js
汪洪墩34 分钟前
【Mars3d】设置backgroundImage、map.scene.skyBox、backgroundImage来回切换
开发语言·javascript·python·ecmascript·webgl·cesium
NoneCoder35 分钟前
CSS系列(29)-- Scroll Snap详解
前端·css
无言非影39 分钟前
vtie项目中使用到了TailwindCSS,如何打包成一个单独的CSS文件(优化、压缩)
前端·css
我曾经是个程序员1 小时前
鸿蒙学习记录
开发语言·前端·javascript
顽疲1 小时前
springboot vue 会员收银系统 含源码 开发流程
vue.js·spring boot·后端
羊小猪~~1 小时前
前端入门之VUE--ajax、vuex、router,最后的前端总结
前端·javascript·css·vue.js·vscode·ajax·html5
摸鱼了2 小时前
🚀 从零开始搭建 Vue 3+Vite+TypeScript+Pinia+Vue Router+SCSS+StyleLint+CommitLint+...项目
前端·vue.js
程序员shen1616112 小时前
抖音短视频saas矩阵源码系统开发所需掌握的技术
java·前端·数据库·python·算法