获得徽章 10
- 使用chatgpt查找setup的位置
ChatGPT 告诉我，setup 函数在packages/runtime-core/src/component.ts 文件中。
从组件挂载开始调用createComponentInstance创建组件实例
传递组件实例给setupComponent
setupComponent内部初始化 props 和 slots
setupStatefulComponent 执行组件的setup
完成 setup 流程
返回渲染函数展开评论点赞 - #青训营笔记创作活动#
2月9日 打卡day17
# Clamp(), Max(), 和 Min() 函数
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
## 流体的尺寸和定位
一般：使用百分比单位
clamp():
```css
.section-image {
width: clamp(70px, 80px + 15%, 180px);
}
```
## 装饰性元素
在页面边角加一些响应式的修饰元素
pc端：
p9-juejin.byteimg.com)
移动端：
使用媒体查询：
```scss
.decorative--1 {
left: 0;
}
.decorative--2 {
right: 0;
}
@media (max-width: 600px) {
.decorative--1 {
left: -8rem;
}
.decorative--2 {
right: -8rem;
}
}
```
clamp()：
```css
.decorative--1 {
left: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
}
.decorative--2 {
right: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
}
```
## 流体高度
页面的主区的高度需要根据视口大小而变化展开评论点赞 - #青训营笔记创作活动#
2月8日 打卡day16
## 总结
比定时器而言，CSS 在控制定时器的开启和暂停上更有优势，下面总结一下
* :hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
* :active配合transition延时、transitionend监听可以实现长按触发效果
* CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
* 可以直接通过:hover来控制台动画的暂停和播放
当然，可以利用的不仅仅是以上几个案例，任何和 CSS 交互（:hover、:active）有类似功能的都可以朝这个方向去思考展开评论点赞 - #青训营笔记创作活动#
2月4日 打卡day15
# antd
antd 是 react 主流组件库，我们经常使用它但可能并没有调试过它的源码。
我们可以在 renderWithHooks 里调用函数组件的地方打个条件断点，在调用想调试的组件时断住，这样我们就可以 step into 到该组件定义的地方。
但是这样调试的并不是最初的源码，没有 jsx 和 ts 语法。
想调试最初的 tsx 源码需要用 sourcemap。
antd 有三种入口：es 目录对应 esm 入口，lib 目录对应 commonjs 入口，dist 目录对应 UMD 入口。
把 antd 代码下载下来，执行 npm run dist 就可以生成 UMD 形式的代码。
想要 sourcemap 映射到 tsx 源码，需要把 devtool 设置成 cheap-module-source-map，然后开启 babel-loader 和 ts-loader 的
sourcemap。
把产物覆盖 antd 的 dist 下的产物，再调试就可以直接调试 antd 组件的 tsx 源码了。展开评论点赞 - #青训营笔记创作活动#
2月1日 打卡day14
# fabric开发图片编辑器
## 架构设计
选型： fabric.js 和 konva.js都是强大的canvas库，功能上类似，konva.js比较新中文文档也多一些
要点：因为框架用的vue，主要解决如何把fabric的实例对象共享给各个功能组件，区分出是未选中、单选、多选状态，然后将选中、取消选中事件暴露给各个功能组件，子组件根据状态进行独立的功能开发
方法：在入口文件中初始化实例，然后与mixins结合，在mixins中定义了选择类型（多选、单选、未选中）、选中元素类型、选中id等属性，以及选中、取消选中的事件，子组件通过引入mixins来开发对应功能；如子组件需要对fabric对象进行操作，则可以通过inject获得原始对象。
## 初始化
初始化比较简单，fabric.js创建对象，用EventEmitter创建事件发射器，可订阅单选、多选、取消选择事件。 通过vue的provide语法把fabric对象、EventEmitter对象向下传递，在mixins中保存选中的元素和选展开评论点赞 - #青训营笔记创作活动#
1月31日 打卡day13
函数节流是一个非常常见的优化方式，可以有效避免函数过于频繁的执行
CSS 的实现思路和 JS 不同，重点在于在于找到和该场景相关联的属性
CSS 实现“节流”其实就是控制一个动画的精准控制，假设有一个动画控制按钮从禁用->
可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态，这样就达到了“节流”的效果
还可以通过 transition 的回调函数动态设置按钮禁用态
这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的
不过，这种实现方式还是比较有局限的，仅限于点击行为，像很多时候，节流可能会用在滚动事件或者键盘事件上，像这些场景就用传统方式实现就行了展开评论点赞 - #青训营笔记创作活动#
1月30日 打卡day12
今日学习 设计一个不能操作dom和调接口的环境
评论点赞 - #青训营笔记创作活动#
1月22日 打卡day10
今日看了这篇文章，这篇文章介绍了一些不常用的css属性![[呲牙]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
评论点赞
p9-juejin.byteimg.com![[泣不成声]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_40.348108b.png)
![[呲牙]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
![[可怜]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_5.ece2a96.png)