Vue2向Vue3过度核心技术watch侦听器

以你之姓@ 2024-03-24 21:33 49阅读 0赞

#### 目录 ####

*   *  1 watch侦听器
     *   *  1.1 作用：
         *  1.2 语法：
         *  1.3 侦听器代码准备
     *  2 翻译案例-代码实现
     *  3 watch侦听器
     *   *  3.1 语法
         *  3.2 需求
         *  3.3 代码实现
         *  3.4 总结

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

### 1 watch侦听器 ###

![在这里插入图片描述][574b258b935e44dbb3baee41f04e8520.png]

#### 1.1 作用： ####

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

#### 1.2 语法： ####

1.  watch同样声明在跟data同级的配置项中
2.  简单写法： 简单类型数据直接监视
3.  完整写法：添加额外配置项
    
        data: {
               
          words: '苹果',
          obj: {
              
            words: '苹果'
          }
        },
        
        watch: {
              
          // 该方法会在数据变化时，触发执行
          数据属性名 (newValue, oldValue) {
              
            一些业务逻辑 或 异步操作。 
          },
          '对象.属性名' (newValue, oldValue) {
              
            一些业务逻辑 或 异步操作。 
          }
        }

#### 1.3 侦听器代码准备 ####

### 2 翻译案例-代码实现 ###

### 3 watch侦听器 ###

#### 3.1 语法 ####

完整写法 —>添加额外的配置项

1.  deep:true 对复杂类型进行深度监听
2.  immdiate:true 初始化 立刻执行一次

data: {
        
      obj: {
        
        words: '苹果',
        lang: 'italy'
      },
    },
    
    watch: {
        // watch 完整写法
      对象: {
        
        deep: true, // 深度监视
        immdiate:true,//立即执行handler函数
        handler (newValue) {
        
          console.log(newValue)
        }
      }
    }

#### 3.2 需求 ####

![在这里插入图片描述][a43ad47c6eb7473584ce830678725aa3.png]

*  当文本框输入的时候 右侧翻译内容要时时变化
 *  当下拉框中的语言发生变化的时候 右侧翻译的内容依然要时时变化
 *  如果文本框中有默认值的话要立即翻译

#### 3.3 代码实现 ####

#### 3.4 总结 ####

watch侦听器的写法有几种？

1.简单写法

watch: {
        
      数据属性名 (newValue, oldValue) {
        
        一些业务逻辑 或 异步操作。 
      },
      '对象.属性名' (newValue, oldValue) {
        
        一些业务逻辑 或 异步操作。 
      }
    }

2.完整写法

watch: {
        // watch 完整写法
      数据属性名: {
        
        deep: true, // 深度监视(针对复杂类型)
        immediate: true, // 是否立刻执行一次handler
        handler (newValue) {
        
          console.log(newValue)
        }
      }
    }

[574b258b935e44dbb3baee41f04e8520.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/2304dcfaf8ce441e84885558902c9be4.png
[a43ad47c6eb7473584ce830678725aa3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/f73b663b220c43f5b2f0333c43e10ac0.png