Vue watch侦听器（入门）

最新推荐文章于 2024-04-27 16:04:53 发布

莫道一龙

最新推荐文章于 2024-04-27 16:04:53 发布

阅读量344

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_57284405/article/details/131688321

版权

Vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

一、什么是watch监视器？

概念

watch: 观看，监视
watch侦听器是Vue实例中的一个对象属性

watch允许开发者监视数据的变化，是 vue 提供的一种用来观察和响应实例上数据变化的属性，属性发生变化，便会触发对应的监听函数。

语法

watch同样声明在跟data同级的配置项中
简单写法：简单类型数据直接监视
完整写法：添加额外配置项

data: { 
  words: '苹果',
  obj: {
    words: '苹果'
  }
},

watch: {
  // 该方法会在数据变化时，触发执行
  //数据属性名
   words (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  },
  //'对象.属性名'
  'obj.words' (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  }
}

watch在vue中是一个单独的配置项
watch中的函数名称必须和属性名称一致,且不能人为调用
没有返回值,如需使用处理结果,必须将结果赋值给data中的成员再进行使用

深度监听

针对复杂数据类型或者需要立即执行的侦听函数可以使用深度监听

深度监听语法

语法:

watch: {
    "要侦听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}

代码示例

<body>
  <div id="app">
    <input type="text" v-model="firstname">
    <input type="text" v-model="lastname">
    <p>{{ firstname +  lastname  }}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        firstname: '',
        lastname:  '',
        obj: {
          a: 100,
          b: 200
        }
      },
      // 监控数据 一旦数据发生变化执行逻辑
      // watch vs computed 
      // 一个数据依赖多个数据，适合用计算属性
      //  当某一个数据发生变化，发异步请求或执行开销大的任务适合watch
      watch:  {
        /* 数据名() { } 只要数据发生改变 这个函数执行*/
        // firstname(newV, oldV) {
        //   // newV 新值  oldV 旧值
        //   // 发异步请求或执行开销大的任务
        //   console.log(newV, oldV);
        // }
        // 假如需要立即调用函数，需要将侦听器写成对象形式
        firstname: {
          immediate: true,  // 立即调用
          handler(newV, oldV) {
            console.log(newV, oldV);
          }
        },
        obj:  {
          deep: true, // 深度监听
          handler(newV) {
            console.log(newV);
          }
        } 
      }
    })
  </script>
</body>

handler: 固定方法触发. 侦听函数必须叫handler(必写)
deep: 开启深度侦听(必写)
immediate: 立即侦听(页面初始化时handler立即执行一次)