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: ''
  }
}

2. 然后，我们在 template 中绑定 input：

<input type="text" v-model="keyword" />

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

watch: {
  keyword: {
    handler: function (value) {
      if (value) {
        this.search(value);
      }
    },
    deep: true
  }
}

4. 最后，在 methods 中编写 search 方法，用于进行实际的请求：

methods: {
  search (keyword) {
    // Your ajax request
  }
}

结论

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