Vue2 Watch的语法

Watch语法

一、监听普通数据类型

字符串,布尔值,number

(1)把要监听的msg值看作方法名,来进行监听。

javascript 复制代码
<template>
  <div id="app">
    <div>
      <button @click="btnClick">触发</button>
      <div>{{ msg }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "codekey",
    }
  },
  methods: {
    btnClick() {
      this.msg = 'pink'
    }
  },
  watch: {
  
    // watch第一次绑定值的时候不会执行监听,修改数据才会触发函数
    msg(newVal,oldVal) {
      console.log('oldVal:',oldVal)   // coderkey
      console.log('newVal:',newVal)   // pink
    }
  }
};
</script>

(2)把要监听的msg值看作对象,利用hanler方法来进行监听

watch第一次绑定值的时候不会执行监听,如果需要第一次就执行监听 则需要设置:immediate: true

javascript 复制代码
<template>
  <div id="app">
    <div>
      <button @click="btnClick">触发</button>
      <div>{{ msg }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "codekey",
    }
  },
  methods: {
    btnClick() {
      this.msg = 'pink'
    }
  },
  watch: {
   //  如果需要第一次就执行监听 则需要设置:immediate: true
    msg: {
      handler(newVal,oldVal) {
        console.log('oldVal:',oldVal)  
        console.log('newVal:',newVal)  
      },
      immediate: true
    }, 
  }
};
</script>

二、监听对象:

(1)监听对象需要用到深度监听,设置deep:true

javascript 复制代码
<template>
  <div id="app">
    <div>
      <button @click="btnClick">触发</button>
      <div>{{ obj.name }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        name: 'coderkey',
        age: 18
      },
    }
  },
  methods: {
    btnClick() {
     this.obj.name = 'pink'
    }
  },
  watch: {
    obj:{
    //  注意:属性值发生变化后,handler执行后获取的 newVal 值和 oldVal 值是一样的
      handler(newVal,oldVal) {
        console.log('oldVal:',oldVal)
        console.log('newVal:',newVal)
      },
      immediate: true,
      // 开启深度监听 deep
      deep: true
    }
  }
};
</script>

(2)可以只监听对象的其中一个属性值 '对象.属性' 的形式

javascript 复制代码
<template>
  <div id="app">
    <div>
      <button @click="btnClick">触发</button>
      <div>{{ obj.name }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        name: 'coderkey',
        age: 18
      },
    }
  },
  methods: {
    btnClick() {
     this.obj.name = 'pink'
    }
  },
  watch: {
    // 函数执行后,获取的 newVal 值和 oldVal 值不一样
    'obj.name'(newVal,oldVal) {
      console.log('oldVal:',oldVal)    // coderkey
      console.log('newVal:',newVal)   // pink
    },  
  }
}
</script>

三、监听路由变化

javascript 复制代码
// 方法一:

watch:{
  $router(to,from){
       console.log(to.path)
  }
}

// 方法二:

watch: {
   $route: {
     handler:  function (val, oldVal){
       console.log(val);
     },
     // 深度观察监听
     deep:  true
   }
},
 

// 方法三:

watch: {
   '$route' : 'getRoutePath'
},
methods: {
   getRoutePath(){
     console.log( this .$route.path);
   }
}
相关推荐
JuicyActiveGilbert几秒前
【Python进阶】第2篇:单元测试
开发语言·windows·python·单元测试
sulikey7 分钟前
Qt 入门简洁笔记:信号与槽
前端·c++·笔记·qt·前端框架·1024程序员节·qt框架
Zyx200710 分钟前
从零学 JavaScript:彻底搞懂 var、let、const(上篇)——告别变量提升的坑
javascript
袁煦丞11 分钟前
安卓旧机变服务器,KSWEB部署Typecho博客并实现远程访问:cpolar内网穿透实验室第645个成功挑战
前端·程序员·远程工作
俩毛豆14 分钟前
【图片】【编缉】图片增加水印(通过组件的Overlay方法增加水印)
前端·harmonyos
gustt14 分钟前
JS 变量那些坑:从 var 到 let/const 的终极解密
前端·javascript
出师未捷的小白14 分钟前
[NestJS] 手摸手~工作队列模式的邮件模块解析以及grpc调用
前端·后端
十年_H17 分钟前
Cesium自定义着色器-模式
javascript·cesium
shuaijie051826 分钟前
表格单元格输入框转换-其一
javascript·elementui
Z_B_L30 分钟前
问题记录--elementui中el-form初始化表单resetFields()方法使用时出现的问题
前端·javascript·vue.js·elementui·1024程序员节