Vue watch侦听器(入门)

一、什么是watch监视器?

概念

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

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

语法
  1. watch同样声明在跟data同级的配置项中

  2. 简单写法: 简单类型数据直接监视

  3. 完整写法:添加额外配置项

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立即执行一次)

你可能感兴趣的:(Vue,vue.js,javascript,前端)