Vue中的 watch监听属性详情

Vue中的watch是用来监听数据变化，并根据变化执行某些操作的一个高级选项。它包含一个监听对象和一个处理函数，当监听对象发生变化时，处理函数就会被执行。在Vue中watch有多种不同的使用方式，下面将介绍Vue中的watch监听属性的详细攻略。

1.什么是watch

在Vue中，我们通常使用computed属性来根据数据的变化，生成新的派生数据，并更新视图。但是，如果我们想要监听某个数据的变化，并在数据变化后执行一些特定逻辑，这时就需要使用watch属性了。

2.watch的基本使用方式

我们可以通过在Vue实例的watch选项中添加一个监听对象来实现对数据的监听，监听对象的key值为我们要监听的数据属性名称，value则为对应的处理函数。下面是一个简单的实例：

<template>
  <div>{{ count }}</div>
</template>
<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  watch: {
    count (val) {
      console.log(`count变为了${val}`)
    }
  },
  mounted () {
    setInterval(() => {
      this.count++
    }, 1000)
  }
}
</script>

在这个例子中，我们使用watch监听data中的count属性，当count属性变化时，watch中的处理函数就会被执行。这时，控制台会输出count变为了1,2,3,……等。

3.watch的高级用法

除了基本的监听外，watch还支持更为高级、复杂的用法。比如：触发异步操作、节流、深度监听等等。

• 触发异步操作

有时候，我们需要根据数据变化触发异步操作，比如发送一个AJAX请求。这时候，我们需要在watch的处理函数中进行异步操作，需要注意的是，当我们在watch中进行异步操作时，必须返回一个Promise对象，否则异步操作可能不会被完成。

<template>
  <div>{{ count }}</div>
</template>
<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  watch: {
    async count (val) {
      const result = await axios.get(`http://xxx/count/${val}`)
      console.log(result)
    }
  },
  mounted () {
    setInterval(() => {
      this.count++
    }, 1000)
  }
}
</script>

在这个例子中，我们使用watch监听data中的count属性，并通过axios发送一个异步请求。当count属性变化时，watch中的处理函数就会被执行，异步操作就会被触发。

• 节流

有时候，我们需要在多次数据变化时，只触发一次数据处理函数，这时候，我们就可以使用节流操作。Vue提供了一个类似lodash的throttle操作，可以让我们在监听到多次数据变化时，只在某个时间段内触发一次函数。

<template>
  <div>{{ count }}</div>
</template>
<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  watch: {
    count: {
      handler: _.throttle(function (val) {
        console.log(`count变为了${val}`)
      }, 1000)
    }
  },
  mounted () {
    setInterval(() => {
      this.count++
    }, 100)
  }
}
</script>

在这个例子中，我们使用watch监听data中的count属性，并使用Vue提供的throttle函数，使得在1000毫秒内多次数据变化只会触发一次处理函数。

• 深度监听

有时候，我们需要深度监听一个对象或数组，当对象中的某个属性或数组中的某个元素改变时，就能够触发被监听的函数。这时候，我们可以使用Vue提供的deep属性实现深度监听。

<template>
  <div>{{ user.name }}</div>
</template>
<script>
export default {
  data () {
    return {
      user: {
        name: '小明',
        age: 18
      }
    }
  },
  watch: {
    user: {
      handler (val) {
        console.log(`user对象中的name属性变为了${val.name}`)
      },
      deep: true
    }
  },
  mounted () {
    setTimeout(() => {
      this.user.name = '小红'
    }, 1000)
  }
}
</script>

在这个例子中，我们使用watch监听data中的user对象，并设置deep为true，表示深度监听。当user对象中的name属性改变时，watch中的处理函数就能够触发。

总结

本文主要讲解了Vue中的watch监听属性的详细攻略，包含watch的基本使用方法、watch的高级用法、包括触发异步操作、节流、深度监听等等。在实际开发中，watch往往是非常有用的一个Vue选项，能够帮助我们更好的实现数据驱动的应用程序。