• Vue--1.7watch侦听器（监视器）

    作用：监视数据变化，执行一些业务逻辑或异步操作。

    语法：

    1.简单写法->简单类型数据，直接监视

    1.     const app = new Vue({
    2.       el: '#app',
    3.       data: {
    4.         words:''
    5.       },
    6.       watch:{
    7.         words(newValue,oldValue){
    8.  
    9.         }
    10.       }
    11.     })
    1.     const app = new Vue({
    2.       el: '#app',
    3.       data: {
    4.         obj: {
    5.           words: ''
    6.         }
    7.       },
    8.       watch: {
    9.         'obj.words'(newValue) {
    10.  
    11.         }
    12.       }
    13.     })

    案例：翻译软件

    1. <!doctype html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6. </head>
    7.  
    8. <body>
    9.   <div id="app">
    10.     <textarea rows="10" cols="40" v-model="obj.words"></textarea>
    11.     <textarea rows="10" cols="40" v-model="result"></textarea>
    12.   </div>
    13.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    14.   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    15.   <script>
    16.     const app = new Vue({
    17.       el: '#app',
    18.       data: {
    19.         obj: {
    20.           words: ''
    21.         },
    22.         result: '',
    23.         timer: null
    24.       },
    25.       watch: {
    26.         'obj.words'(newValue) {
    27.           clearTimeout(this.timer)//防抖
    28.           this.timer = setTimeout(async () => {
    29.             const res = await axios({
    30.               url: 'https://applet-base-api-t.itheima.net/api/translate',
    31.               params: {
    32.                 words: newValue
    33.               }
    34.             })
    35.             this.result = res.data.data
    36.           }, 300)
    37.         }
    38.       }
    39.     })
    40.   </script>
    41. </body>
    42.  
    43. </html>

    2.完整写法->添加额外配置项

    1）deep:true对复杂类型深度监视

    2）immediate:true初始化立刻执行一次handler方法

    1.     const app = new Vue({
    2.       el: '#app',
    3.       data: {
    4.         obj: {
    5.           words: '',
    6.           lang:''
    7.         }
    8.       },
    9.       watch: {
    10.         数据属性名:{
    11.             deep:true,//深度监视
    12.             immediate: true,//立即执行，一进入页面handler就立刻执行
    13.             handler(newValue){
    14.                 
    15.             }
    16.         }
    17.       }
    18.     })

    案例：翻译软件Pro

    1. <!doctype html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6. </head>
    7.  
    8. <body>
    9.   <div id="app">
    10.     翻译成语言：<select v-model="obj.lang">
    11.       <option value="english">英语</option>
    12.       <option value="franch">法语</option>
    13.       <option value="italy">意大利</option>
    14.     </select>
    15.     <br><br>
    16.     <textarea rows="10" cols="40" v-model="obj.words"></textarea>
    17.     <textarea rows="10" cols="40" v-model="result"></textarea>
    18.   </div>
    19.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    20.   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    21.   <script>
    22.     const app = new Vue({
    23.       el: '#app',
    24.       data: {
    25.         obj: {
    26.           words: '',
    27.           lang: 'english'
    28.         },
    29.         result: '',
    30.         timer: null
    31.       },
    32.       watch: {
    33.         obj: {
    34.           deep: true,
    35.           immediate: true,
    36.           handler(newValue) {
    37.             clearTimeout(this.timer)//防抖
    38.             this.timer = setTimeout(async () => {
    39.               const res = await axios({
    40.                 url: 'https://applet-base-api-t.itheima.net/api/translate',
    41.                 params: newValue
    42.               })
    43.               this.result = res.data.data
    44.             }, 300)
    45.           }
    46.         }
    47.       }
    48.     })
    49.   </script>
    50. </body>
    51.  
    52. </html>

    监听Vuex中的数据（.vue文件）

    1. watch: {
    2.     "$store.state.xxx": {
    3.       handler: function (newV) {
    4.         console.log("watch中：", newV);
    5.       },
    6.     },
    7.   }
  • 相关阅读:
    CentOS8 安装 erlang 和 RabbitMQ
    杨校老师项目之SpringBoot整合Vue与微信小程序的外卖订餐系统
    Shell sed编辑器
    SpringCloud解决feign调用token丢失问题
    【附源码】Python计算机毕业设计企业员工信息管理
    GBase 8c V3.0.0数据类型——范围操作符
    Promise, async, await 学习
    光影交织：汽车穿越隧道的视觉盛宴
    后台管理系统加水印（react）
    docker——入门介绍、组件介绍、安装与启动、镜像相关命令、容器相关命令、应用部署
  • 原文地址：https://blog.csdn.net/weixin_46479909/article/details/133695269