25.Vue监听器(watch)

作者: 圆梦人生 | 来源:发表于2018-06-25 10:46 被阅读54次

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>

相关文章

  • 25.Vue监听器(watch)

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

  • vue3 setup中watch监听的使用方法

    watch监听器使用方法 1. watch监听器可以监听一个getter函数 这个getter要返回一个响应式对象...

  • vue3.0 watch监听器使用方法

    watch监听器使用方法 watch监听器可以监听一个getter函数这个getter要返回一个响应式对象当该对象...

  • watch监听器

    如果是普通的监听data中的数据变化 1.可以用computed计算 例如通过input绑定v-model来通...

  • 微信小程序之watch属性值(仿Vue)

    Vue通过监听watch属性来观测Vue实例数据的变化。 监听器的原理,将data中需监听的属性写在watch对象...

  • 关于watch监听器

    我们在使用属性监听watch属性时都知道,只有在改变这个值时才会触发watch函数的触发,但有些情况我们希望首次就...

  • 11、webpack 监听watch

    在webpack中可以配置watch监听器时时打包: 1、配置如下: webpack.config.js完整配置:

  • computed与watch的区别

    计算属性computed和监听器watch都可以观察属性的变化从而做出响应,不同的是: 计算属性computed更...

  • 监听器和计算属性的区别watch,computed

    计算属性computed和监听器watch区别?1.能使用计算属性computed的尽量使用计算属性,但是计算属性...

  • Vue3:Watch 监听器

    1、什么是 watch 侦听器 watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。例如,...

网友评论

    本文标题:25.Vue监听器(watch)

    本文链接:https://www.haomeiwen.com/subject/dqgeyftx.html