watch函数

0 前言

我们之前学习了computed，可以根据特定数据变化，进行运算。

但是computed是有局限性的，它必须依赖于它监听的那个值，并返回特定值。

但是我们watch不用，我们watch监听某个值，当这个值变化的时候，立马执行自己的方法，甚至监听的这个值可以不用参与watch自己定好的方法。

1 语法

watch(myValue, (newValue, oldValue) => {
  // 监听到数据变化时的处理逻辑
});

myValue，表示要被监听的值，newValue表示变化后的值，oldValue表示以前的值是多少，我们接下来看例子。

2 示例

<template>
  <div>
    <p>当前值为: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup>
import { watch, ref } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count 发生变化，旧值为: ${oldValue}, 新值为: ${newValue}`);
});

const increment = () => {
  count.value++;
};
</script>

在这个例子中，页面上展示了 count 的值，并且每次点击按钮时，count 的值会增加。同时，watch 监听着 count 的变化，一旦 count 发生变化，就会触发 watch 中定义的逻辑，并打印出新旧值。

效果如下，

可以看出watch既可以监控数值变化，同时还可以进行复杂逻辑的书写，是不是很厉害！

那要computed干什么？

那我们就要说到watch的最大弊端，就是没法直接返回值。

所以在赋值上面没有computed简洁高效。

3 结语

我们又学习了一个重要的语法，在vue官方教程中是放在后面才讲的，我们这里放到一块来讲解。

OK，到这里我们跟变量有关的基础语法就讲解完毕，我们开始了解精彩的vue页面语法吧！