第一周

日期 早 午 晚 复习内容 完成度
5月30日 keep-alive、动态组件与异步组件（1） keep-alive、动态组件与异步组件（2） 深入应用动态、异步与suspense组件 状态组件 90%
5月31日 HTML元素上指定ref的应用 组件上指定ref的应用 基本认知与类型定义 受控组件 80%
6月1日 attributes传递与继承 attributes传递与继承 自定义事件（1） 表单操作 80%
6月2日 自定义事件（2） 自定义指令概念、生命周期与参数 实现自定义指令v-show/v-if 非受控组件 80%
6月3日 tab切换指令 tab切换指令 tab切换指令 组件通信 90%
6月4日 懒加载指令 懒加载指令 懒加载指令 状态提升 80%
6月5日 复习 复习 复习 复习 0%

知识整理：

  • 组件渲染流程：

    1. template模板编译转为AST树，描述了template的形状，并含有vue指令的特性写法
    2. AST树过滤vue特性转为JS逻辑的DOM树
    3. 最后由虚拟节点转为真实节点

  • 视图更新时：

  • 更新内容转为虚拟节点对比之前组件keep-alive缓存的虚拟节点(如果没有之前的节点则重新组装)，缓存的节点不会经过unmount组件卸载的过程，找差异形成补丁，更新真实节点

  • 关于keep-alive标签：

  • 用一个 <keep-alive> 元素将其动态组件包裹起来。可以使组件实例能够被在它们第一次被创建的时候缓存下来。它不走mounted和unmounted生命周期函数，转而用activated激活和dectivated未激活函数使用

  • 自定义指令：
    开发者也可以给 Vue拓展指令，v-自定义名称，它可以提供一个直接操作dom的接口

第二周

日期 早 午 晚 复习内容 完成度
6月6日 teleport的特点与应用场景 深入研究插件化开发与UI组件库实现 【插件+teleport】Vue3插件化开发 组合继承 90%
6月7日 【插件+extend】Vue2插件化开发 mixin的特性与应用场景 编译过程、渲染函数与h函数 组件更新机制 80%
6月8日 结合react深度学习JSX 渲染函数与h函数的使用事项 DOM Diff专题（1） 组件性能优化 90%
6月9日 DOM Diff专题（2） 应用配置专题课 深入学习setup函数 代码分割 80%
6月10日 组合式API 学习Vue的生命周期 【组合式API】activated应用场景 Vue2.x实现方案（1） 懒加载 80%
6月11日 Vue2.x实现方案（2） Vue2.x实现方案（3） React Hooks普通设计方案实现 路由懒加载 80%
6月12日 复习 复习 复习 复习 40%

知识整理：

  • teleport实现一个模态框，它可以将一个嵌套关系的modal组件移动到<body>标签里，实现该组件可以复用

  • 在Vue 2.x 中，Vue.extend 曾经被用于创建一个基于 Vue构造函数的“子类”，其参数应为一个包含组件选项的对象

  • 为什么使用Vue.extend?

    • 脱离根节点
    • 脱离应用实例app
    • 希望通过插件的方式能够不在模板上调用，而是用方法操作组件的状态，需要Vue.extend创建一个新的应用的构造函数，可以多次实例化不同的应用

  • mixin是什么？
    它是option API时期的产物，如果组件有同样的data或method，则可以将data单独拿出来放到mixin再混入到组件里，使代码减少重复性

  • 为什么vue3.x不推荐使用mixin？

    • 用于多个组件的时候，可能会多出很多不必要的选项或属性
    • 很可能会无限拆分mixin
    • 不好管理也不好取名字，有可能导致命名冲突
    • 导出的mixin对象它不是函数，没办法动态传参调整mixin的option的混入情况，极大的干扰了mixin合理性复用

  • mixin总结：

    1. 当mixin和组件的定义的属性冲突时，组件自身的内容优先
    2. 生命周期钩子函数混入时，优先执行mixin后执行组件
    3. 对象options像methods,components,directives等，会合并对象，存在同名时组件优先

  • 什么是Dom Diff？
    比对(diff)渲染更新前后产生两个虚拟dom对象的差异，并产出差异补丁对象，再将差异补丁对象应用到真实dom节点上

  • 为什么要用Dom Diff?
    在浏览器中，操作dom需要耗费性能的，尽可能的减少操作dom可以保证性能

  • Dom Diff算法的特点：

    • 平级对比，如ul对ul，不跨级对比
    • 里层元素只是位置顺序不一样，但是内容一样时不会重新渲染
    • 深度优先，从外到内嵌套比对

  • setup是什么？
    它是组合式API的入口函数,所有组合式API都可以放入到setup内部执行

  • 执行时期： 组件被创建之前(beforeCreate)到props被解析后执行，即使用组合式API时，没有beforeCreate和created生命周期函数，在组件创建之前自动执行

第三周

日期 早 午 晚 复习内容 完成度
6月13日 复习派发器方案及总结设计思想 编写后端API接口 跑通前后端 错误边界 90%
6月14日 Vue3『封装可编辑表格组件』【插件化开发】 Vue3『封装可编辑表格组件』【插件化开发】 Vue3『封装可编辑表格组件』【插件化开发】 上下文 80%
6月15日 【组合式API】provide与inject 【组合式API】getCurrentInstance与globalProperties Vue3『方法动态操作MessageBox组件』【Vue插件化】 context api 90%
6月16日 React Hooks『useState』逻辑实现课 原生JS『3D轮播的解决方案』 原生DOM『拖拽、回弹与吸附功能』 contextType 80%
6月17日 原生DOM『拖拽、回弹与吸附功能』 原生DOM『拖拽、回弹与吸附功能』 原生DOM『拖拽、回弹与吸附功能』 Fragment 80%
6月18日 原生JS『移动端全屏滑动』功能实现 原生JS『移动端全屏滑动』功能实现 原生JS『移动端全屏滑动』功能实现 生命周期 60%
6月19日 复习 复习 复习 复习 0%

知识整理：

  • 派发器在vue项目中结合reducer的使用原理：
    视图绑定的方法和属性都来自于中央状态管理，它包含了state数据和todoDispatch方法，该方法根据type去执行相应的reducer程序以便于分支执行相应的state数据操作

  • 为什么使用派发器？
    使组件更纯净，专注与视图，业务逻辑任务抽离外部，仅一个方法通过任务类型区分自动执行逻辑程序

  • 派发器思想机制：
    它是一个任务机制，任务可以被封装成函数，将逻辑尽可能合理的转为任务，结合派发器同步异步分配，简单的任务分配到同步或异步，通过通知机制使程序自动运行，命名空间的方式，按照不同任务的类型去自动执行

  • defineExpose：暴露当前 <script setup> 组件里的属性或方法供外界访问，如应用实例或组件

  • <transition>作为根节点的组件从外部被切换时将不再触发过渡效果

  • clientHeight/clientWidth/offsetHeight/offsetWidth：返回该元素的像素高度和宽度，是一个整数，单位px

  • offsetTop/offsetLeft：返回当前元素相对于节点(包含层级上的最近的)顶部边界的偏移像素值

  • Touch.clientY：返回触点相对于可视区上边沿的Y坐标

第四周

日期 早 午 晚 复习内容 完成度
6月20日 JS实现『从工程化到Vue』 JS实现『从工程化到Vue』 Vue3『插件化』方法动态操作组件 Portals 90%
6月21日 Vue核心基础之『动态/异步组件』应用 Vue核心基础之『动态/异步组件』应用待计划 Vue『UI组件库』开发实践 异步加载 80%
6月22日 Vue『UI组件库』开发实践 Vue『UI组件库』开发实践 forEach解决异步问题 react-router-dom 90%
6月23日 CSS3进化历史、结构伪类选择器 元素状态伪类、伪元素、关系选择器 背景、边框图片 HashRouter 70%
6月24日 盒子阴影、边框圆角 word-wrap、white-space、word-break column多列布局 BrowserRouter 80%
6月25日 gradient repeating-linear/radial-grident repeating-linear/radial-grident 常用组件 80%
6月26日 复习 复习 复习 复习 80%

知识整理：

  • 浏览器如何解析vue文件？
    要将单文件组件转为符合浏览器解析规则的JS文件, 创建node应用服务，通过自身的fs模块读取.vue后缀的文件, 对该文件的字符转为符合vue语法的<template>,script,style结构，返回vue-script和导入的绝对路径供自定义的vue-loader使用

  • 插件化思路：通过Vue.use可以全局或局部的注册自定义插件, 封装一个install函数作为第一个参数进行注册

  • 动态加载组件：用一个 <keep-alive> 元素将其动态组件包裹起来。可以使组件实例能够被在它们第一次被创建的时候缓存下来。它不走mounted和unmounted生命周期函数，转而用activated激活和dectivated未激活函数使用

  • CSS3：模块化管理的概念，每一个模块都有CSS2中额外的功能并向后兼容

  • CSS属性选择器通过已经存在的属性名或属性值匹配元素，还有伪类选择器，交互伪类选择器，关系选择器等

  • background-attachment: scroll;固定背景图片不包含边框

  • background-attachment: fixed;固定背景图片包含边框

  • background-attachment: local;相对于文本滚动图片

  • background-clip: border-box;背景延伸至边框外沿（但是在边框下层）

  • background-clip: padding-box;背景延伸至内边距（padding）外沿

  • background-clip: content-box;背景被裁剪至内容区（content box）外沿

  • border-image 允许在元素的边框上绘制图像

  • overflow-wrap用来说明当一个不能被分开的字符串在盒子内部溢出时换行

  • columns属性用来设置元素的列宽和列数

  • 线性渐变： 颜色值沿着一条隐式的直线逐渐过渡 background: linear-gradient(to right,red, orange, yellow, green, blue, indigo, violet);

  • 径向渐变：一个中心点(原点)向外扩散background: radial-gradient(red, yellow, rgb(30, 144, 255));

  • repeating-linear-gradient()创建一个由重复线性渐变组成的<image>

第五周

日期 早 午 晚 复习内容 完成度
6月27日 hsl opacity, rgba overflow-x 路由执行过程 80%
6月28日 resize 传统布局缺陷、弹性盒子 flexContainer 编程式导航 90%
6月29日 flex父元素属性 flex子元素属性 flex-item用法 默认路由 90%
6月29日 实战京东布局 实战京东布局 实战京东布局 匹配模式 90%
6月30日 flex布局深入 grid布局 响应式设计 精确匹配 90%
7月1日 媒体查询 bootstrap案例 bootstrap案例 路由重定向 90%
7月2日 复习 复习 复习 复习 50%

知识整理：

  • 盒子模型中的标准盒子模型和IE盒子模型的区别
  • 标准盒子模型的内容不包含padding和border
  • IE盒子模型的内容包含padding和border
  • overflow-x属性决定溢出内容是否以滚动条形式展示
  • resize属性重新定义元素尺寸，如调整<textarea>标签元素的尺寸大小
  • 弹性布局(Flex Box)的方案解决传统布局弊端，多个浏览器良好支持，它是一个一维布局，只能够一次处理一个维度上的元素布局
  • @media属性可用于媒体查询设备的某种条件是否成立
  • <link>引入是异步加载的，通过预加载的方式(已经下载了该资源)是不会阻塞渲染，并且并不会影响window.onload事件的触发，当媒体查询的语句成立时才采用样式
  • @import时先下载外联文件再import加载