vue3调用Android原生代码 vue3源码

转载

mob64ca13f40f3d 2024-08-12 19:54:16

文章标签 vue3调用Android原生代码 vue3 源码 vue.js json 文章分类 Android 移动开发

文章目录

前言
源码目录

前言

Vue.js 3.0 (以下简称Vue3)，正式发布在 2020 年 09 月 18 日

源码目录

学习源码时，首先对源代码的目录结构做一个解析，了解作者写项目框架的大体思路：

├── CHANGELOG.md    // 多个版本提交记录、时间和内容
├── LICENSE         // MIT协议是所有开源许可中最宽松的一个，除了必须包含许可声明外，再无任何限制。
├── README.md       // 项目说明
├── api-extractor.json   // 这是所有包的共享基本配置文件
├── jest.config.js       // 测试配置文件
├── package.json         // 项目依赖
├── rollup.config.js     // rollup打包配置文件
├── tsconfig.json        // 定了用来编译这个项目的根文件和编译选项
├── packages              
│   ├── compiler-core    // 编译器（平台无关），例如基础的 baseCompile 编译模版文件, baseParse生成AST
│   ├── compiler-dom     // 基于compiler-core，专为浏览器的编译模块，可以看到它基于baseCompile，baseParse，重写了complie、parse
│   ├── compiler-sfc     // 编译vue单文件组件
│   ├── compiler-ssr     // 服务端渲染编译
│   ├── global.d.ts      // 声明文件
│   ├── reactivity       // vue独立的响应式模块，可以与任何框架配合,使用proxy
│   ├── runtime-core     // 与平台无关的运行时。有虚拟DOM渲染器，vue组件和各种API。可针对某个具体平台实现高阶runtime，比如自定义渲染器
│   ├── runtime-dom      // 针对浏览器的runtime。包含处理原生DOM API 
│   ├── runtime-test     // 一个专门为了测试而写的轻量级 runtime。由于这个 rumtime 「渲染」出的 DOM 树其实是一个 JS 对象，所以这个 runtime 可以用在所有 JS 环境里。你可以用它来测试渲染是否正确。
│   ├── server-renderer     // 服务端渲染
│   ├── sfc-playground
│   ├── shared             // 内部工具库,不暴露API
│   ├── size-check          // 简单应用，用来测试代码体积
│   ├── template-explorer  // 用于调试编译器输出的开发工具
│   └── vue                 // 面向公众的完整版本, 包含运行时和编译器
├── scripts              // vue3脚本文件，包含配置文件，进行编译和打包等
│   ├── bootstrap.js
│   ├── build.js
│   ├── checkYarn.js
│   ├── dev.js
│   ├── release.js
│   ├── setupJestEnv.ts
│   ├── utils.js
│   └── verifyCommit.js
├── test-dts             // 测试文件
│   ├── README.md
│   ├── component.test-d.ts
│   ├── componentTypeExtensions.test-d.tsx
│   ├── defineComponent.test-d.tsx
│   ├── functionalComponent.test-d.tsx
│   ├── h.test-d.ts
│   ├── index.d.ts
│   ├── inject.test-d.ts
│   ├── reactivity.test-d.ts
│   ├── ref.test-d.ts
│   ├── setupHelpers.test-d.ts
│   ├── tsconfig.build.json
│   ├── tsconfig.json
│   ├── tsx.test-d.tsx
│   └── watch.test-d.ts
└── yarn.lock // 此会锁定安装的每个依赖的版本，可以确保不会意外获得不良依赖；并且会避免由于开发人员意外更改或则更新版本，而导致糟糕的情况！

LICENSE —— 开源协议，MIT 协议可能是几大开源协议中最宽松的一个，核心条款是：
该软件及其相关文档对所有人免费，可以任意处置，包括使用，复制，修改，合并，发表，分发，再授权，或者销售。唯一的限制是，软件中必须包含上述版权和许可提示。
api-extractor.json —— 所有包共享的配置文件。当我们 src 下有多个文件时，打包后会生成多个声明文件。使用 @microsoft/api-extractor 这个库是为了把所有的 .d.ts 合成一个，并且，还是可以根据写的注释自动生成文档。
template-explorer: 用于调试编译器输出的开发工具。您可以运行npm run dev dev template-explorer并打开它index.html以获取基于当前源代码的模板编译的副本。在线编译网址：vue-next-template-explorer.netlify.app/#
这是因为Vue3采用 monorepo 是管理项目代码的方式。不同于 Vue2 代码管理，它是在一个 repo 中管理多个package，每个 package 都有自己的类型声明、单元测试。 package 又可以独立发布，总体来说更便于维护、发版和阅读的。例如我们可以单独引用 reactivity 这个模块，在导入这些软件包时，需要@vue/前缀。

例如，单独使用@vue/reactivity模块，该模块可以和任何框架结合使用

const  { ref, effect }  = require('@vue/reactivity');

const count = ref(1);

effect(() => {
    console.log('count的值为：', count.value)
})

setTimeout(() => {
    count.value++;
}, 2000)

输出的结果：