写在前面的话

使用vue3已经有一段时间了，对尤大神那是顶礼膜拜，总想框架类到底是如何实现的呢？总想窥测里层天机；目前从事前端工作已经有4年，写过原生小程序，vue2+element-ui; vue2移动端和pc端官网，vue3+vite+antpro的管理系统；想着一直只是做应用级的实现，那么我工作即便到7年8年，水平也很难有很大的突破了；因此想要往更高级别的发展，就必须进行深入的学习。技术方面都是先混沌，蹂躏，再舒展，都有相似的思想和规律，初时学谓之艰难，后续豁然开朗，一通百通；

偶然关注到技术大v催大，被其键盘侠的手法吸引，听其课，一种技术享受悠然而生；非冒失，毅然决然步入技术的烟尘茫茫中。开始时只能周末学，像个被扭捏上课堂的学生，哪哪不得劲，一天下来能学个半小时算万幸了，然后晚上就会责备自己；但我深知总得循序渐进，这次学10分钟，明天学11分钟，也算是进步了，这样想想也就心态平和下来；现在，有时中午也不午休，偷偷看看，因为在里面学的重构的思想，很快能运用到实际开发工作中；加之其越发解疑答惑，让窥其里，工作虽疲，但所学所得让自己颇为兴奋；有时晚上九十点下班回去，也会打开看个一二；

现在有时怕学了又容易忘；所以决定进行笔记记录，也以此督促自己坚持✊

初步计划是能够一周更新2-3篇

1-1-环境搭建-集成test做单元测试；

初始化项目

mkdir min-vue3
cd min-vue3
yarn init -y

接着新建src/reactive/index.ts出口文件；新建src/reactive/tests/index.spec.ts测试文件

// index.spec.ts
it('init', () => { 
    expect(1+3).toBe(4);}
)

支持ts

// 安装依赖
yarn add typescript --dev
// 初始化tsconfig.json文件
npx tsc --init

引入jest并让jset无需单独引入类型中文官网

yarn add --dev jest
// 这个对全jest不需要单独引入类型
yarn add --dev @types/jest

配置命令行脚本

"scripts": {  
    "test": "jest"  
}

然后在tsconfig.json中找到"types"写入"types": ["jest"];

这时在终端执行yarn test; 可以看到执行通过；

配置要支持ES Module语法

// src/reactive/index.ts
export function add(a, b) {
    return a + b
}

// src/reactive/tests/index.spec.ts
import { add } from '../index.ts'
it('init', () => { 
    expect(add(1,3)).toBe(4);}
)

这时执行yarn test 终端提示该错误SyntaxError: Cannot use import statement outside a module

这时要支持bable，参考jest官方说明

yarn add --dev babel-jest @babel/core @babel/preset-env
// 在根目录创建`babel.config.js`
module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};
//  babel要支持ts
yarn add --dev @babel/preset-typescript
// babel.config.js最终配置
module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

最后再运行yarn test; 执行成功；这时表示环境已经配置好了

模拟实现mini版vue3学习笔记

写在前面的话

1-1-环境搭建-集成test做单元测试；