首页
   /       /   
Vue中使用watch——详细使用教程
2月
25
Vue中使用watch——详细使用教程
作者: 大彭Sir    分类: 教学教程     正在检查是否收录...

Vue中watch的使用教程

Vue中watch用于观察某个变量,当被观察的变量发生变化时,可以触发一些自定义回调函数,让我们可以做很多事情。Watch属于Vue实例,下面我们来做一个Vue实例,并在实例中设置一个watch属性。

Watch用法

watch属性里面有四种方式来定义监听:

  • 字符串形式
  • 对象形式
  • 回调函数
  • 立即执行的函数

字符串形式

 watch: {
     'myValue': 'methodName'
  },
  methods:{
    methodName:function(){
      // do something
    }
  }

对象形式

 watch: {
    myValue: {
      handler:function(){
        // do something
      },
      deep: true
    }
  }

deep参数用于设置深度观察,即可以检测到对象内部属性的改变。

回调函数

watch: {
    myValue:function(val, oldVal){
       // do something
    }
  }

立即执行的函数

watch: {
    myValue: {
       handler:function(val, oldVal){       
         // do something
       },
       immediate: true // 立即执行
    }
  }

例子

下面通过一个例子来解释watch的使用:

<div id="app">
      <p>{{message}}</p>
      <button @click="handleButtonClick">修改message值</button>
</div>
<script>
    new Vue({
      el: '#app',
      data() {
        return {
          message: '这是message的初始值'
        }
      },
      watch: {
        // 监听message值的变化
        message: {
          handler: function(val, oldVal) {
            console.log('message值改变了,val: ' + val + ', oldVal: ' + oldVal);
          },
          immediate: true // 是否立即执行
        }
      },
      methods: {
        handleButtonClick() {
          this.message = 'message的值被改变了';
        }
      }
    })
</script>

上面的例子中,当点击button的时候,会改变message的值,这时候,就会触发watch中的回调函数,从而打印一句话 message值改变了,val: ${message},oldVal: ${oldVal}

实例——watch实现异步搜索

在实际开发中,我们需要借助于watch来实现复杂逻辑中的异步搜索,这里用一个关于搜索用户的实例来介绍:

  1. 首先,我们定义一个keyword变量,用于接收来自 input 输入框的值:
data () {
  return {
    keyword: ''
  }
}
  1. 然后,我们在 template 中绑定 input
<input type="text" v-model="keyword" />

3.接下来,我们需要在实例上加上 watch,当 keyword 的值发生改变时,就会处理请求:

watch: {
  keyword: {
    handler: function (value) {
      if (value) {
        this.search(value);
      }
    },
    deep: true
  }
}
  1. 最后,在 methods 中编写 search 方法,用于进行实际的请求:
methods: {
  search (keyword) {
    // Your ajax request
  }
}

结论

以上就是Vue中watch的使用教程,watch可以用来观察变量,当变量发生改变时,触发回调函数来做特殊的事情,Vue中watch有四种方式来定义,使用起来不用太过难理解。

本文标签: 标签: VUE 监听属性 watch
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者 大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

评论

Theme By Brief 鄂ICP备19010459号

sitemap

首页

分类

友链