Vue3 composition API: watch

首先，import watch，例如：

import { ref, computed, watch } from 'vue';

然后在 setup() 函数中调用 watch 函数：

export default {
  setup() {
    const firstName = ref('');
    const lastName = ref('');
    const uAge = ref(31);

    watch(uAge, function (newValue, oldValue) {
      console.log('Old age: ' + oldValue);
      console.log('New age: ' + newValue);
    });

    const uName = computed(function () {
      return firstName.value + ' ' + lastName.value;
    });

    const setNewAge = () => (uAge.value = 32);
    return {
      userName: uName,
      firstName,
      lastName,
      age: uAge,
      setAge: setNewAge,
    };
};
</script>

watch 函数需要两个参数，第 1 个参数是依赖项，第 2 个参数是函数。第 1 个参数即依赖项一旦发生变化，第 2 个参数也就是函数，立即执行。

watch( age, function(newValue, oldValue) {
// ...........................................
}) 

第 2 个参数，也就是 function 通过 watch 自动获取两个参数，即 new 和 old 两个值。分别是新值，即 age 变化后的当前值和变化前的旧的值。

如果使用 Options API，一个 watcher 只能有一个依赖项。不同于Options API，使用 composition API， watch 依赖项可以有多个，也就是说，可以像下面这样使用依赖数组。依赖数组中的任何一项依赖发生变化，都会触发 function 的执行。如果使用依赖数组，function 自动获得的参数也会发生变化，不再是单个值，而是也变成了数组。数组里值的顺序与前面的依赖项数组一致：

    watch([uAge, uName], function (newValues, oldValues) {
      console.log('Old age: ' + oldValues[0]);
      console.log('New age: ' + newValues[0]);
      console.log('Old name: ' + oldValues[1]);
      console.log('New name: ' + newValues[1]);
    });

因为 uName 是 computed 值，要放在 watch 前面，下面的code顺序浏览器会有警告， watch 无法监视 uName:

    watch([uAge, uName], function (newValues, oldValues) {
      console.log('Old age: ' + oldValues[0]);
      console.log('New age: ' + newValues[0]);
      console.log('Old name: ' + oldValues[1]);
      console.log('New name: ' + newValues[1]);
    });
    
    // 应该放在watch前面！
   const uName = computed(function () {
      return firstName.value + ' ' + lastName.value;
    });