Vue–1.7watch侦听器（监视器）

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

语法：

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

    const app = new Vue({
      el: '#app',
      data: {
        words:''
      },
      watch:{
        words(newValue,oldValue){

        }
      }
    })

    const app = new Vue({
      el: '#app',
      data: {
        obj: {
          words: ''
        }
      },
      watch: {
        'obj.words'(newValue) {

        }
      }
    })

案例：翻译软件

  



  

    
    
  
  
  
  
    const app = new Vue({
      el: '#app',
      data: {
        obj: {
          words: ''
        },
        result: '',
        timer: null
      },
      watch: {
        '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
          }, 300)
        }
      }
    })
  

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

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

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

    const app = new Vue({
      el: '#app',
      data: {
        obj: {
          words: '',
          lang:''
        }
      },
      watch: {
        数据属性名:{
            deep:true,//深度监视
            immediate: true,//立即执行，一进入页面handler就立刻执行
            handler(newValue){
                
            }
        }
      }
    })

案例：翻译软件Pro

  



  

    翻译成语言：
      英语
      法语
      意大利
    
    


    
    
  
  
  
  
    const app = new Vue({
      el: '#app',
      data: {
        obj: {
          words: '',
          lang: 'english'
        },
        result: '',
        timer: null
      },
      watch: {
        obj: {
          deep: true,
          immediate: true,
          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
            }, 300)
          }
        }
      }
    })
  

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: Zstack 安装 黑群晖未找到硬盘：解决方法

错误原因： 发生错误的原因，黑群晖要求硬盘为Sata格式，而默认创建的硬盘格式为Virtio，我们要做的就是修改挂载的虚拟硬盘改为Sata格式 解决方法： 1、进入 ZStack，找到黑群晖的主机，查看UUID 2、进入 Zstack宿主机，查看所有虚拟机 v…