学Vue3核心概念与面试官斗智斗勇（一） 收集触发依赖

本文章依据阅读源码的理解进行编写。如果有什么错误的地方，欢迎指正交流学习。
最近也在帮助想入行前端的朋友进行学习，如果有需要交流学习，可以添加微信 gdgzyw。
聊天、学习、打游戏都阔以~

学习源码最快的方式就是理解概念后，自己写一个简版的功能。所以我们得先搭一个环境，这里采用测试驱动的方式进行。

初始化项目

初始化 package.json 和安装依赖

yarn init -y
yarn add -D @babel/core @babel/preset-env @babel/preset-typescript @types/jest babel-jest jest

添加 scripts 用于启动 jest

package.json

{
   
  // ...
  "scripts": {
   
    "test": "jest"
  },
  // ...
}

根目录创建 babel.config.js

module.exports = {
   
  presets: [['@babel/preset-env', {
    targets: {
    node: 'current' } }], '@babel/preset-typescript'],
}

创建 tsconfig.json 文件

{
   
  "compilerOptions": {
   
    "target": "es2016",
    "lib": [
      "DOM",
      "es6"
    ],
    "module": "commonjs",
    "types": [
      "jest"
    ],
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": false,
    "skipLibCheck": true
  }
}

至此我们的项目就初始化完成了。如果你需要用 git 来管理，可以自行 git init。

编写测试用例

创建 src/reactivity/tests/effect.spec.ts 文件

des