摘要: 1、为什么要学习函数式编程 函数式编程是随着React的流行受到越来越多的关注 Vue3也开始拥抱函数式编程 函数式编程可以抛弃this 打包过程中可以更好地利用 tree shaking 过滤无用代码 方便测试 、方便并行处理 有很多库可以帮助我们进行函数开发:loadsh、underscore、 阅读全文
posted @ 2022-12-03 09:46 菜菜123521 阅读(59) 评论(0) 推荐(0) 编辑
摘要: 1.先来看先要实现的需求,解析下面的文件,实现正确渲染和响应式 // vue-demo/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl 阅读全文
posted @ 2022-10-14 09:25 菜菜123521 阅读(180) 评论(0) 推荐(0) 编辑
摘要: 1.使用vue-cli创建一个配置Router,且是history模式的项目,可以看到使用vue-router的相关代码: // route-demo/src/router/index.js import Vue from 'vue' import VueRouter from 'vue-route 阅读全文
posted @ 2022-10-14 09:23 菜菜123521 阅读(60) 评论(0) 推荐(0) 编辑
摘要: 一、模块联邦概述 Module Federation 即为模块联邦,是Webpack5中新增的功能。可以实现跨应用共享模块,如图所示: 2.准备实现以下应用 3.应用的结构如图所示: 4.切换到products目录下,安装以下依赖: npm i faker@5.5.2 -S npm i html-w 阅读全文
posted @ 2022-10-09 14:47 菜菜123521 阅读(368) 评论(0) 推荐(0) 编辑
摘要: 一、创建容器应用 1.全局安装single-spa脚手架工具:npm i create-single-spa -g 2.新建workspace文件夹,切换到文件夹下,使用create-single-spa 创建: # 应用是否创建到当前目录,因为首先创建的是一个容器应用,所以新建到container 阅读全文
posted @ 2022-10-08 09:52 菜菜123521 阅读(388) 评论(0) 推荐(0) 编辑
摘要: 1.props初始化 之前发现在setup启动函数中会初始化Props: // packages/runtime-core/src/component.ts export function setupComponent( instance: ComponentInternalInstance, is 阅读全文
posted @ 2022-09-24 16:18 菜菜123521 阅读(1737) 评论(0) 推荐(0) 编辑
摘要: 之前两节看了模板生成AST和AST内部转化,这一节看最后的生成代码,编译配置是mode为module,prefixIdentifiers开启,hoistStatic开启,其他配置均不开启,先看示例: 源代码: <div class="app"> <hello v-if="flag"></hello> 阅读全文
posted @ 2022-09-23 14:52 菜菜123521 阅读(137) 评论(0) 推荐(0) 编辑
摘要: 在编译one中,template经过解析最终返回了一个AST节点对象,它是对模板的完整描述,但是还是不能用于生成代码,因为语义化还不够,没有包含编译优化相关的属性,vue内部还进行了进一步的转化,来看实现: // packages/compiler-dom/src/index.ts export f 阅读全文
posted @ 2022-09-21 15:58 菜菜123521 阅读(97) 评论(0) 推荐(0) 编辑
摘要: 首先找到编译的入口compile函数: // 支持两个参数,第一个template是待编译的模板字符串,第二个options是编译的一些配置信息 export function compile( template: string, options: CompilerOptions = {} ): C 阅读全文
posted @ 2022-09-17 13:54 菜菜123521 阅读(135) 评论(0) 推荐(0) 编辑
摘要: vue3.0中我们使用依赖注入的API函数provide和inject,可以在setup函数中调用它们,子孙组件中访问祖先组件提供的数据,祖先组件不需要知道哪些后代组件在使用它的数据,后代组件也不需要住到注入的数据来自哪里,先看provide API的实现packages/runtime-core/ 阅读全文
posted @ 2022-09-15 10:39 菜菜123521 阅读(400) 评论(0) 推荐(0) 编辑