Vue3 学习笔记之 watchEffect

最近在看 Vue3 的一些新 feature，顺道学习了一些 hooks 编程的思想，感觉挺有启发的。今天就以 watchEffect 这个很小的 case 为例，开启我的 Vue3 学习笔记。

Vue2 v.s. Vue3

对所有初学者来说，Vue2 到 Vue3 最直观的改变就是 Composition API——几乎所有的 Vue2 options 方法都被放到了 setup 函数里：

+ import { onMounted, reactive, watchEffect } from 'vue'

export default {
  name: "App",

+  setup( props ) {
+    const state = reactive({ /*...*/ });
+    onMounted(() => { /*...*/ });
+    watchEffect(() => { /*...*/ });
+    return { state };
+  },

-  data: () => ({ state: /*...*/ }),
-  mounted(){ /*...*/ },
-  watch: { /*...*/ },
};
复制代码

这是一个比较大的风格转变，通俗来说，就是从基于对象的编程（OOP）转向了函数式编程（FP）。

函数式编程

初学者可能分辨不清 OOP 和 FP 的区别。大家注意看 onMounted 和 watchEffect 方法的参数——箭头函数，大致能体会到不同之处了。

OOP 的特点是：对象（或 class）是数据（variable）和逻辑（methods）的封装。在 Vue2 时代，我们经常写如下代码：

// vue2
export {
  data: () => ({count: 1}),
  methods: {
    message: (prefix) => `${prefix} ${this.count}`,
  },
  watch: {
    count() {
      console.log( this.message('Count is') );
    };
  }
}
复制代码

Vue2 的内部实现比较复杂，不过对外表现的编程模式基本就是：对象调用自己的数据和方法——this + . 操作。所以在 Vue2 时代，我们通常会把相关的数据和操作写在同一个对象里。但是到了 Vue3 的 setup 里，你几乎不会用到 this 了；变成了让函数来调用对象或是另一个函数——就是 FP 的特点了。

// Vue3
import { ref, watchEffect } from "vue