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

已于 2024-03-19 09:21:18 修改
阅读量300 收藏 8
点赞数 8
分类专栏： vue入门学习 文章标签： vue.js 学习 前端
于 2024-03-07 10:18:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinfanfff/article/details/136523986
版权

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

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

yinfanfff
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 2.0 侦听器 watch属性代码详解
10-16
主要介绍了Vue 2.0 侦听器 watch属性代码详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue学习日记17：scoped样式冲突
03-21
vue学习日记17：scoped样式冲突
vue基础知识：watch 侦听器（监视器）详解，watch监听器的作用，1.watch的简单写法：简单类型数据，直接监视，2.完整写法→添加格外的配置项
我就知道你会来，我们一起进步吧！
03-25 4213
watch监听器的作用：监视数据变化，执行一些业务逻辑和异步操作（数据一旦发生变化实时发送请求更新数据）2.immediate：true 初始化立刻执行一次handler方法。1.deep：true对复杂类型深度监视（监视对象中的所有属性）
【Vue】Vue中的侦听器watch
森姐姐的博客
10-13 5462
Vue中的侦听器watch
vue3学习（五）watch侦听器在vue3中的应用
weixin_70617457的博客
12-16 332
watch用于声明在数据更改时调用的侦听回调，监视属性，就是监测指定的属性是否发生变化，如果发生了，则进行一系列操作，如果没发生变化，则监视属性也不会被触发。watch有三个参数第一个参数：需要侦听的数据源第二个参数：是一个回调函数 ，该函数有两个参数（newVal, oldVal)第三个参数：一个配置项数组{:true， //是否立即调用一次deep:true， //是否开启flush:"pre" // pre组件更新之前调用；sync同步执行；post组件更新之后执行}
vue watch侦听器（监视器）
weixin_48235660的博客
02-20 167
vue watch侦听器（监视器）
vue watch 侦听器
m0_65063660的博客
08-29 339
watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。watch: {//监听 username值的变化//newVal 是“变化后的新值”，oldVal 是“变化之前的旧值”}}})
vue watch 侦听器 监视器
abc
09-20 335
vue watch 侦听器 监视器。变量 变化的时候，自动调用处理函数。vue watch 侦听器 监视器。
Vue 学习之 --- 侦听器
qq_33736036的博客
11-30 352
Vue 的侦听器的用法
掌握Vue侦听器(watch)的应用
Kuangtian的博客
11-30 2255
Vue.js 是一个流行的 JavaScript 框架，而其中的 侦听器(watch) 功能是其中的一项重要特性。它可以用来侦听 Vue 实例中数据的变化，并在变化发生时执行相应的操作。
【Vue3 源码解析】watch 侦听器
小秀的博客
09-24 385
函数的一个重载形式，用于在开发环境下检查回调函数的类型，并调用。函数，然后在数据源发生变化时执行回调函数或效果函数。，并在需要时执行回调函数或效果函数，以实现数据的监视和响应。如果不是函数，则发出警告，提示用户。等选项，以及在服务器端渲染（SSR）环境下的特殊处理。的签名已经被移动到单独的 API，建议使用。函数来执行监视操作，并返回一个。它根据不同的数据源类型，设置不同的。这段代码的核心是创建一个响应式。函数来实际执行监视操作。这段代码导出了一个名为。表示要监视的数据源，函数，用于停止监视。
vue学习日记19：记事本-组件版
03-26
记事本组件版本
Vue学习笔记之计算属性与侦听器用法
10-15
主要介绍了Vue学习笔记之计算属性与侦听器用法,结合实例形式详细分析了vue.js计算属性与侦听器基本功能、原理、使用方法及操作注意事项,需要的朋友可以参考下
深入浅析Vue.js计算属性和侦听器
10-18
主要介绍了Vue.js计算属性和侦听器的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 288
在vue.config.js中配置关闭Uncaught runtime errors显示。
vue3如何定义一个组件
Java程序员专栏
06-09 486
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
Vue中 .passive 修饰符的作用
Keep trying, keep going
06-09 184
传统的事件监听器在事件触发时，会先执行事件处理函数，然后再决定是否阻止事件的默认行为（如阻止滚动）。这会导致性能问题，因为浏览器需要等待 JavaScript 执行完成后才能继续处理其他任务，如滚动页面。修饰符可以告诉浏览器，事件处理函数不会阻止事件的默认行为，这样浏览器就不需要等待 JavaScript 执行完成，可以立即进行其他任务。这可以提高页面的滚动性能，尤其是在移动端设备上。它的使用场景通常是针对那些需要频繁触发的事件，例如。来阻止事件的默认行为，因为浏览器会忽略这个调用。需要注意的是，当使用。
vue面试题汇总之响应式理解
最新发布
fyw1789的博客
06-12 254
vue在全局中写了一个用来运行函数的函数,有一个全局变量保存当前运行的是哪个函数,这样在getter的时候只要检查这个全局变量就知道是哪个函数在使用这个变量了,vue还建立了一个对映关系表当setter的时候把对映表中的函数重新运行一遍。vue2使用Object.defineProperty进行数据代理(getter和setter),vue3使用Proxy进行数据代理。会把函数放入异步队列,同一个渲染函数只会存在一个,这样就不会多次渲染造成效率问题。,当需要派发更新的时候不会立即运行函数,而是交给。
vue3 举例说明项目中那些功能实现使用watch侦听器
08-23
1. 监听数据的变化并执行相应的操作：你可以使用`watch`侦听器来监视数据的变化，一旦数据发生变化，就可以执行相应的操作。例如，你可以监听某个数据变量，并在它发生变化时更新页面上的内容。 ```javascript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值