浅聊一下vue中的watch监听器方法，计算属性，监听器到底该怎么去选择呢？

站长

2024年03月18日 14:56 · 阅读数 2

浅聊一下watch监听器都能实现功能计算属性和方法，监听器如何去做选择呢？

哈喽哈喽，大家好。我是你们的金樽清酒。今天我要给大家分享一下vue中的watch监听器。它是干什么的呢？怎么去使用呢？它跟计算属性有什么区别呢？

watch 的作用和特性

watch的作用 watch是用来干嘛的呢？我们知道，计算属性是可以根据响应数据源来得到一个计算的值，所以它的返回结果一定是一个值。那要是我们需要在数据源发生变化的时候去完成一些业务逻辑呢？这个时候我们是不是就不只是满足于得到一个值啦，而是完成一个更加复杂的逻辑。
watch的用法和特性 1.在组合式api中，我们用watch去触发回调函数，回调函数里面有两个参数，一个代表闲杂的值，一个代表以前的值。让我们看一下代码，打印看一下。

<template>
  <div>
    <h2>{{ title }}</h2>
    <h2> {{ totalPrice }} </h2>
    <button @click="addCount">add</button>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
const title = ref("物品的价格")
const price = ref("100")
const count = ref(2)
const totalPrice = computed(() => price.value * count.value, console.log("1"))
watch(count, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})
const addCount = () => {
  count.value++
}
</script>
<style lang="scss" scoped></style>

在代码15行到17行，watch函数监听了变量count的值。并触发了后面的回调函数。里面的参数就代表了count现在的值和以前的值。让我们看一下效果。

浅聊一下vue中的watch监听器方法，计算属性，监听器到底该怎么去选择呢？在我点击一下按钮的时候，count由2变为3，打印出来为3 2。