第一周

日期 早 午 晚 复习内容 完成度
11月29日 Vue3.0应用实战项目 Vue3.0应用实战项目 Vue3.0应用实战项目 事件流 100%
11月30日 Vue3.0应用实战项目 Vue3.0应用实战项目 Vue3.0应用实战项目 事件代理 100%
12月1日 Vue3.0应用实战项目 Vue3.0应用实战项目 Vue3.0应用实战项目 鼠标坐标 90%
12月2日 『Vue3.0星座物语』项目实战 『Vue3.0星座物语』项目实战 『Vue3.0星座物语』项目实战 拖拽 80%
12月3日 『Vue3.0星座物语』项目实战 『Vue3.0星座物语』项目实战 『Vue3.0星座物语』项目实战 输入框事件 80%
12月4日 『Vue3.0星座物语』项目实战 『Vue3.0星座物语』项目实战 『Vue3.0星座物语』项目实战 鼠标滑入滑出 80%
12月5日 复习 复习 复习 复习 90%

第二周

日期 早 午 晚 复习内容 完成度
12月6日 Vue3.0【基础课】生命周期 createApp、component、mount、unmount setup 键盘事件 90%
12月7日 errorHandler、warnHandler、globalProperties use、plugin,reactive readonly,ref,computed 页面渲染 90%
12月8日 watchEffect watch,toRef、toRefs、isRef ref、unref 回流重绘 90%
12月9日 provide|inject options API 【实践课】第1-3课 【实践课】第4-6课 时间线 80%
12月10日 【源码课】第1-3课 【造轮子】第1-2课 【造轮子】第3-5课 渲染引擎 90%
12月11日 Vue2.0『好书库』移动端实战项目 Vue2.0『好书库』移动端实战项目 Vue2.0『好书库』移动端实战项目 JS执行机制 90%
12月12日 复习 复习 复习 复习 70%

整理总结：

  • 选项式 API 的生命周期选项和组合式 API 之间的映射

    • beforeCreate -> 使用 setup():
      created -> 使用 setup():
      beforeMount -> onBeforeMount:
      mounted -> onMounted:
      beforeUpdate -> onBeforeUpdate:
      updated -> onUpdated:
      beforeUnmount -> onBeforeUnmount:
      unmounted -> onUnmounted:
      errorCaptured -> onErrorCaptured:
      renderTracked -> onRenderTracked:
      renderTriggered -> onRenderTriggered:
      activated -> onActivated:
      deactivated -> onDeactivated:

  • createApp： 方法返回应用实例本身，因此可以在其后链式调用其它方法

  • mount：挂载应用实例的根组件

  • unmont：卸载应用实例的根组件

  • setup:一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口

  • setup方法必须返回view模板里定义的数据和方法

    • 接收的第一个参数为：被解析后的props
    • 接收的第二个参数为：执行期上下文

  • use:安装 Vue.js 插件。如果插件是一个对象，它必须暴露一个 install 方法。如果它本身是一个函数，它将被视为安装方法。

  • reactive:有一个事件触发或一个视图上或数据上的改变，相对于被绑定方的数据也一起被改变

  • computed:接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref对象

  • watchEffect: 立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖(数据)变更时重新运行该函数

  • watch 需要侦听特定的数据源，并在回调函数中执行副作用

  • ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值

  • toRef可以用来为源响应式对象上的某个 property 新创建一个ref

  • toRefs将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref

第三周

日期 早 午 晚 复习内容 完成度
12月13日 Vue3.0源码重写数据劫持 Vue3.0源码重写数据劫持 Vue3.0源码重写数据劫持 同步/异步加载 90%
12月14日 Vue2.0『数据传递』全解析 Vue2.0『数据传递』全解析 Vue2.0『数据传递』全解析 JSON 80%
12月15日 Vue2.0『数据传递』全解析 Vue3.0手册阅读『setup函数』 Vue3.0手册阅读『setup函数』 let/const/解构 80%
12月16日 Vue的模板编译 Vue的模板编译 Vue的模板编译 箭头/rest/拓展 90%
12月17日 Vue的模板编译 Vue的模板编译 Vue的模板编译 属性描述符 90%
12月18日 Vue路由权限『前后端全解析』 Vue路由权限『前后端全解析』 Vue路由权限『前后端全解析』 getter/setter 90%
12月19日 复习 复习 复习 复习 70%

整理总结：

  • 数据劫持：vue3.x中使用了ES6新的语法proxy和reflect相结合进行数据劫持拦截，性能上有很大的提升，而且支持劫持数组

  • 数据劫持：Reflect底下也有Object底层的对象方法且跟proxy的参数3对象里的方法高度一致

  • 虚拟节点和diff算法源码实现：

    • 构建虚拟节点
    • 转换真实DOM
    • 渲染DOM节点
    • 创建补丁包
    • 给真实DOM打补丁

  • 利用domDiff函数对比新老节点处理返回补丁包

  • 前端权限控制:

    • 为什么前端也要进行权限控制？

    • web交互方式也跟数据密不可分的，而数据库最紧密接触的是后端程序，在前后端分离开发时，越来越多的项目也需要在前端进行权限控制

    • 前端的权限控制有什么好处？

    • 降低非法操作的可能性

    • 减少不必要的请求，减轻服务器压力

    • 提高用户体验

    • 前端的权限控制有哪些？

    • 视图层的展示和前端所发送的请求

    • 前端的权限控制解决方案有哪些？

    • 菜单的控制：如侧边栏，根据请求到的数据展示对应的菜单，点击菜单查看相关的界面

    • 界面的控制：

      1. 如用户没有登录，手动输入地址栏时自动跳回登录页面
      2. 如用户以及登录，输入非权限的地址则跳转到404页面

    • 按钮的控制：根据用户的权限，是否显示或隐藏该按钮以及对按钮功能的限制

    • 请求和响应的控制：对没有权限的用户在进行一些非法操作时不提交数据请求减轻服务器的压力

第四周

日期 早 午 晚 复习内容 完成度
12月20日 【造轮子】模板中事件处理函数绑定的编译 【造轮子】自动事件处理函数绑定 【造轮子】编译状态的视图绑定 密封 90%
12月21日 【造轮子】事件触发与视图更新 组件的开发与配置，以及按需注册组件 另一种实现组件按需注册加载的方式 相等 90%
12月22日 编写select组件，编写Link组件 全局注册加载组件库，按需注册加载组件 Vue3.0 『UI组件库』下拉菜单 合并 90%
12月23日 Vue3.0 『UI组件库』下拉菜单 Vue3.0 『UI组件库』多级菜单 Vue3.0 『UI组件库』多级菜单 Symbol 80%
12月24日 Vue3.0 『UI组件库』轮播图 Vue3.0 『UI组件库』轮播图 Vue3.0 『UI组件库』轮播图 迭代器 80%
12月25日 『Websocket』Vue2.0开发 『Websocket』Vue2.0开发 『Websocket』Vue3.0开发 生成器 30%
12月26日 复习 复习 复习 复习 90%

资料：

整理总结：

  • 如何实现编译带事件处理函数绑定视图的标签？

    • 编译视图模板时匹配onClick="xxx"格式
    • 随机生成一个字符串保存在定义flag标识属性
    • 组装一个新的对象包含flag,handler,type属性
    • 匹配xxx内容后，将其内容保存到handler属性里
    • 将组装好的对象存入事件池数组eventPool里
    • 匹配onClick="xxx"格式最后替换为`data-dom=${_flag}的字符串实现在视图里
    • 实现编译标签时<div onClick="add(2)"></div>用一个标识替换原有的绑定句柄onClick="add(2)"，如data-dom="1640242607185"

  • 如何关联视图上绑定的事件处理函数属性和用户methods上定义的方法?

    • 假如视图上绑定onClick="add(2)"
    • 假如用户在methods定义的方法为add(){...}
    • 拿到页面所有的节点
    • 遍历事件池里面的对象和所有节点找到符合标识属性flag条件的那一项
    • 给该项添加绑定事件处理函数addEventListener
    • 找到methods里定义的方法名和参数
    • 执行定义在methods里的对应的方法
    • 实现视图和方法的关联

  • 如何关联视图上绑定的变量属性？

    • 替换视图模板为用户定义标签名的标签<myDiv></myDiv>
    • 给标签新增自定义属性data-dom="1640273806381"
    • 替换视图模板里{{}}为用户定义的state数据
    • 缓存状态池

  • 视图更新时，如何找到绑定变量数据更改时所在的节点？

    • 在setter函数里新增update方法实现state数据发生更改时更新视图
    • 在render文件里定义update方法
    • 遍历所有的元素节点和状态池
    • 当状态池最后一项和state数据的key的变量名一样时
    • 当元素节点带有data-dom的标识跟状态池的的标识字符串一致时
    • 对state数据发生更改的那个节点的文本内容进行更新
    • 实现更新state数据时，页面内容实时发生更改

  • 插件有什么好处？

    • 可以一次性将插件安装到vue中的程序里面去，使用的时候use即可

第五周

日期 早 午 晚 复习内容 完成度
12月27日 【Vue3模态框】1_组件基本配置分析、属性设置 【Vue3模态框】2_组件视图编写与动态样式的设计 【Vue3模态框】3_组件视图编写与事件传递机制 for of 80%
12月28日 【search+checkbox】1_实现搜索和过滤功能 【search+checkbox】2_列表联动与选中状态保持 【search+checkbox】3_【组件化】封装input组件 Array.of 80%
12月29日 【search+checkbox】4_【组件化】封装button-group组件 【search+checkbox】5_【组件化】自定义checkbox组件 【search+checkbox】6、复用UI组件及完成菜单与列表联动功能 Array.from 80%
12月30日 【search+checkbox】7_菜单隐藏的自定义指令 【v-lazyload实现】1_课程简介与后端服务搭建 【v-lazyload实现】2_使用vue-lazyload插件完成图片懒加载 [].fill 90%
12月31日 【v-lazyload实现】3_自定义指令的写法与v-lazy基本设计 【v-lazyload实现】4_完成图片实例创建与loading状态显示 【v-lazyload实现】5_完成图片加载和状态的转换 [].copyWithin 90%
1月1日 【select】1_组件功能介绍、复习插件开发方法 【select】2_input组件编写、自定义指令开发动态input 【select】3_菜单组件的开发、自定义指令控制显示功能 [].keys 90%
1月2日 复习 复习 复习 复习 80%

资料：

整理总结：

  • 问题：如何实现v-if/v-show?

    1. 数据代理实现访问data数据
    2. 数据劫持
    3. 初始化dom数据使v-if/v-show/@click和dom绑定在一起
    4. 初始化视图，根据data数据先初始化时候显示视图组件
    5. 根据事件池去做时间处理函数的循环绑定
    6. 改变数据的同时改变dom视图

  • 问题：为什么初始化dom时绑定v-if/v-show/@click?

    • 在执行methods对象里的方法时才能找到视图相应的节点去更改它的视图

  • 问题：vue在初始化dom时做了什么操作？

    1. 转化为AST树
    2. 转化为虚拟节点
    3. 转化为真实节点
    4. 将数据和真实节点保存在一起

  • 问题：当遇到v-if节点时，如何删除了之后恢复时保证位置不变？

    • 通过新增一个注释节点替换被删除的节点从而实现占位

  • 问题：v-if和v-show什么时候适合使用？

    • 动态操作是否显示时就用v-show
    • 本身通过用户配置，一次性配置好时用v-if