Vue学习之watch侦听器:案例实现翻译功能

watch侦听器

作用：监视数据的变化，当数据发生变化时，执行一些业务逻辑或者是异步操作

执行的场景例如在线翻译，当文本区域的内容发生变化时，会发生翻译内容的同时更新

语法：简单的写法➡简单数据类型，可以直接的进行监听

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

案例：翻译功能

案例准备代码:

  
    
    
    
    
    
  
  
    

      
      

        翻译成的语言：
        
          意大利
          英语
          德语
        
      

      
      

        

          
          ⌨️文档翻译
        
        

          
mela
        
      
    
    
    
    
  

运行结果：

 

通过watch监听器去完善所有的代码

当文本框的内容发生了变化时，翻译框也会发生变化

注意：本篇文章使用的api翻译内容，并不是根据真实情况所翻译，只是模拟翻译的场景，翻译的内容请忽略不计。

在准备的代码进行修改：

1：带着需要被翻译的文本去发出请求，获取得到的数据（监听）

 代码讲解

一：   

deep: true, // 深度监视，只要是obj下的所有属性都会被监视，只要属性值发生变化就会发生被执行handler中代码部分。

 immediate: true, // 立刻执行，一进入页面handler就立刻执行一次，加载默认的属性值

二： clearTimeout(this.timer)
              this.timer = setTimeout(async () => {  防抖模式：在上面的运行结果中你会发现只要被翻译的内容发生变化事，控制台就会立马的打印，这种操作会极大的消耗我们的内春空间，延迟执行 → 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行。

2：将获取得到的数据，显示在翻译框里 

  
{{result}}

3：在obj下面除了words还有一个属性lang，这个属性发挥的作用则是翻译的语种类型发生改变时，会执行watch监听器的内容。

        翻译成的语言：
        
          意大利
          英语
          德语
        
      

完整的代码

  
    
    
    
    
    
  
  
    

      
      

        翻译成的语言：
        
          意大利
          英语
          德语
        
      

      
      

        

          
          ⌨️文档翻译
        
        

          
{{ result }}
        
      
    
    
    
    
  

运行的结果