vue的监听属性watch的详解

文章目录

    1. 监听属性 watch
    1. 常规用法
    1. 监听对象和route变化
    1. 使用场景

1. 监听属性 watch

watch 是一个对象,键是需要观察的表达式,用于观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数的参数是新值和旧值。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个 property。

2. 常规用法

watch 监听有两个形参,第一个是新值,第二个是旧值。如下例子:使用 watch 监听了 total 的值,当 total 的值改变时,控制台会打印出旧值和新值。

javascript 复制代码
<template>
  <div class="home_box">
    <h1>{{ total }}</h1>
    <button @click="handleAddTotal">增加</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  watch: {
    total(newValue, oldValue) {
      console.log('旧值:', oldValue)
      console.log('新值:', newValue)
    }
  },
  data() {
    return {
      total: 0
    }
  },
  methods: {
    handleAddTotal() {
      this.total++
    }
  }
}
</script>

3. 监听对象和route变化

watch监听的目标,可以是基本类型,也可以是对象,也可以是对象里的一个值。而监听目标的属性,可以是一个函数,也可以是一个包含handler(回调函数),immediate(是否初始化后立即执行一次)和deep(是否开启深度监听)的对象。

javascript 复制代码
<script>
export default {
  name: 'Home',
  watch: {
    // 监听基本类型
    aaa(newValue, oldValue) {
      console.log('旧值:', oldValue)
      console.log('新值:', newValue)
    },
    // 监听基本类型,并且回调函数写在methods里,且初始化加载立即执行一次
    bbb: {
      handler: 'handleBBB',
      immediate: true
    },
    // 监听对象类型,需要开启深度监听
    ccc: {
      handler: (newValue, oldValue) {
        console.log('旧值:', oldValue)
        console.log('新值:', newValue)
      },
      deep: true
    },
    // 监听对象里的某个值
    'ddd.d2.d21': {
      handler: (newValue, oldValue) {
        console.log('旧值:', oldValue)
        console.log('新值:', newValue)
      }
    },
    // 监听route变化
    '$route': {
      handler: (newValue, oldValue) {
        console.log('旧值:', oldValue)
        console.log('新值:', newValue)
      }
    }
  },
  data() {
    return {
      aaa: 0,
      bbb: 0,
      ccc: {
        c1: 0,
        c2: 0
      },
      ddd: {
        d1: 0,
        d2: {
          d21: 0
        }
      }
    }
  },
  methods: {
    handleBBB() {
      this.bbb++
    }
  }
}
</script>

4. 使用场景

watch监听属性使用场景很多。比如:

  1. 即时表单验证
  2. 搜索
  3. 监听数据变化,做出相应改变
  4. ...

如下例子,监听 keyword 的值,实时打印出来。

javascript 复制代码
<template>
  <div class="home_box">
    <input type="text" v-model="keyword">
  </div>
</template>

<script>
export default {
  name: 'Home',
  watch: {
    keyword: {
      handler: 'handleKeywordChange'
    }
  },
  data() {
    return {
      keyword: '',
    }
  },
  methods: {
    handleKeywordChange(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
</script>

本次分享就到这儿啦,我是鹏多多,如果您看了觉得有帮助,欢迎评论,关注,点赞,转发,我们下次见~

往期文章

个人主页

相关推荐
清幽竹客32 分钟前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim32 分钟前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
paopaokaka_luck34 分钟前
基于SpringBoot+Vue的电影售票系统(协同过滤算法)
vue.js·spring boot·后端
滿36 分钟前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年36 分钟前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
夏梦春蝉2 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室3 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子4 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W5 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端6 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app