vue2之侦听器的简单使用

xinxin-l

发布于 2022-03-29 08:11:39

3960

发布于 2022-03-29 08:11:39

文章被收录于专栏：xinxin的随笔记录xinxin的随笔记录

侦听器watch

函数名就是要侦听的元素的名字 传入的参数第一个是变化后的新值newval，第二个是变化前的旧值oldval

格式

方法格式的侦听器

无法在刚进入页面时自动触发，只有在侦听到变化才会触发如果侦听的是对象，当对象的属性发生变化时，不会侦听到

对象格式的侦听器

通过immediate选项，可以让侦听器刚进入页面时自动触发 通过deep选项，使侦听器深度侦听到对象中属性的变化

设置侦听器

这是Vue实例中的data对象：

data:{
  tem:'方法格式的侦听器', //input中的内容
  already:[],
  foo:{
    name:'property of object',
    age:13
  }
}

方法格式的侦听器

该方式实现的是，当input中内容变化时，触发侦听，侦听input中的内容（内容是与tem绑定好的），如果当前input中的内容不在already数组中，就添加到already中，否则弹出提示框该名称已存在

watch:{
  tem(n){
    if(this.already。indexOf(n)!==-1){
      alert("It already exists")
    }else{
      this.already.push(n)
    }
  }
}

对象格式的侦听器

该方法实现的是，页面一旦载入就立即触发侦听，侦听foo对象name属性的变化。

watch:{
  foo:{
    // 自动触发，只能使用handler
    handler(newVal,oldVal){
      console.log(newVal,oldVal)
    },
    // true表示侦听器立即触发（immediate默认为false）
    immediate:true,
    // true表示深度侦听，侦听对象属性的变化
    deep:true
  }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-02-14，如有侵权请联系 cloudcommunity@tencent.com 删除

data