25.Vue监听器(watch)

Vue种的监听器主要是来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

案例:

<template>
  <div>
    值:{{watchData}}
    <br/><br/>
    <button @click="watchClcik">改变值</button>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        watchData: undefined
      }
    },
    methods:{
      watchClcik(){
          this.watchData = {
              name: 'name:' + (Math.random() * 10) .toFixed();
          }
      }
    },
    watch:{
      // 监听watchData数据变化
      watchData(value, oldValue){
         console.log('改变的值:');
         console.log(value);
         console.log('旧值:');
         console.log(oldValue);
      }
    }
  }
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 3,375评论 0 25
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,079评论 0 29
  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 29,591评论 8 265
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 9,730评论 1 52
  • 蜗居在楼群里, 估摸生命 走在三点之间, 感悟真情 一杯茶 承载的太重,太重 一支笔 孕育了太多的感情 这样过活 ...
    冷榆阅读 167评论 9 24