• CSS/box/index.html

  • macOS强制显示滚动条 #2
  • 单行文本的省略空白处理 #3

• CSS/视觉格式化模型/常规文档流/外边距折叠.html

  • 外边距折叠 #4

• CSS/视觉格式化模型/浮动/ex/css/common.css

  • 分页器

• CSS/视觉格式化模型/定位/二级菜单/css/2th.css

  • 32~ 元素的隐藏与显示，将 :hover 挂载到共同的父元素上
  • 79~ 二级菜单和上层之间衔接的 border 处理：伪元素遮挡

• CSS/视觉格式化模型/定位/弹出层/css/popup.css

  • 居中

• HTML/表单元素/CSS美化/myRadio.css

  • 自实现选择框

• NodeJS/CMJ

  • .cjs 后缀会永远用 CJS
    • 会覆盖 package.json 中的 type: "module"
  • .mjs → 永远是 ES Module

• Vue2/sandboxs

  • demo created from Vue/CLI

• Vue2/sandboxs/src/utils/getComponentRootDom.js

  • 通过 render 以及 $el 获取某个组件渲染的Dom根元素

• Vue2/sandboxs/src/utils/toast.js

  • 实现 toast 提示函数，通过 JS 创建提示框

• Vue2/sandboxs/vue.config.js

  • 通过开发服务器代理处理开发环境中的、浏览器同源策略导致的跨域问题

• Vue2/sandboxs/src/mock/index.js

  • 拦截 AJAX ，重新赋值 XHR 。 Apifox 和 Postman 也支持 mock 环境

• Vue2/sandboxs/test/Lifecycle/timerDestroyed.vue

  • 类似于组合关系的析构函数，凡是在 mounted / created 中引入的“组件外部副作用”，都应该在 beforeDestroy 中对称清理

• vue2沙盒开发的一系列成果测试脚本 link

• Vue2/sandboxs/src/directives/loading/index.js

  • v-loading 自定义指令实现 Loading 态呈现

• auto update Action for README link

• mixins 混入实现配置代码复用 link

• 组件递归 实现 层级列表组件 TreeListMenu link

• vue-router 动态路由匹配 通过 vue-router 注入的原型对象 $route 提供的路由信息 link

• React 自定义组件想要触发DOM事件，得传递到能响应的元素上 同时注意如果没有特殊处理，在事件处理函数中，this指向undefined 1. bind 2. () => link

• JS执行 - call stack 执行上下文中的 this 和 变量对象VO 虽然 ES6 后 const 和 let 不会污染对象，但是之前代码都用的 var 还是得了解 link

• 当找不到某个属性时，执行上下文通过函数对象的隐藏属性 [[Environment]] (之前叫 [[scope]] )指针连接外层词法环境形成作用域链，然后往上寻找 => 即使 outer 执行完了，inner 仍然保留对 outer 变量的引用、导致GC失败 => 闭包 [ => 内存泄漏风险 ] link

• CSRF danger example and 5 ways to solve link

• 如果setState改变状态的代码处于某个HTML元素的事件中，则其是异步的，否则是同步 如果要使用改变之后的状态，需要使用回调函数 如果新的状态要根据之前的状态链式作用，需要使用函数的方式改变状态 同时React会对异步的setState进行优化，将多次setState进行合并 link

• React 通过 props.children 实现 Vue 插槽功能 具名插槽区分 1. 直接传对象 2. 函数对象属性 3. 直接传递一个 render 函数 => ( JSX ) link

• 默认情况下，Form 对在里面的所有的 Input 都传递了 handleChange, 当其中一个变化时，直接修改了 Form 的 state, 那么整个 Form 、 Form 中所有的 Input 都会 re-rende 通过 useForm 内部管理的 _formValues 实现字段级别订阅更新、 _formState 表单整体状态的观察者模式 link

• 以数组作为下标的影响: 数组变化后，相同位置的元素 key 相同，Vue 会认为是同一个元素，直接复用 DOM 但实际上数据已经变了，导致 DOM 和数据错位 特别是表单元素（input、select、textarea），它们的值存储在 DOM 节点上，不是响应式的，复用 DOM 后值就乱了，导致每次删除的都只可能是最后一个 link

• a 被 B 引用了，形成了闭包，B函数携带了 a 创建时的词法环境，所以其存储于堆内存中、不被回收（如果在栈内存上会导致需要引用的时候已经出栈了）；b 没有被引用，只会在 A 的执行上下文中、短暂的存在栈内存中，在 A 执行结束后变得不可达 link

• 父组件异步处理后返回子组件 1. emit 中回调函数，类似于 React 中父组件传递给子组件处理函数、提供权力子组件影响父组件的数据 2. 父组件返回Promise，子组件通过 .$listeners 拿到父组件的 handle 函数引用（但是 listener 是直接调用的函数，没有触发事件的上报） 3. 父组件直接 props 传下去处理函数，处理函数和 2 一样都是返回的 Promise link

• v-model + event-modifiers v-model 默认是 input 事件，在事件修饰符之后 v-model.lazy 是change 事件 开启 .number 修饰自动将事件value转为数字 link

• 手动实现观察者模式 => 事件总线 方便组件之间通信、组件和普通模块通信、事件处理 ( Vue 自带 $emit, $on, $off 实例成员，直接导出一个 Vue 实例都可以 ) link

• 利用浏览器资源缓存，实现 v-lazy 自定义懒加载图片指令 其中滚轮视图事件通过事件总线管理，抽离出mixin统一上抛事件 link

• 通过 vuex 进行共享数据管理 mutations 方法中不允许副作用操作 通过在 actions 中 dispatch 实现副作用操作

• 通过 vuex 和 router 管理 登陆、注销 vuex. module 实现模块化 开启命名空间防止命名冲突 开启严格模式后，只允许通过 mutations 改变状态 getters 计算属性 mapState 简化命名空间相关代码 通过 template 逻辑容器处理同级元素

• 使用 route 对 vuex 的登陆态进行路由守卫、鉴权拦截 在路由对象中带上目标页信息，方便在登录之后重定向、鉴权 添加 exact-path 防止路由中 hash 和 query 对样式匹配的影响

• 公共库体积优化 利用 tree-shaking 优化 Vuex 利用 CDN: 对 webpack 声明不要对公共库进行打包（私有的要收费） 通过模版代码在index中进行分流，否则开发环境也用CDN资源就无法使用Vue-dev 生产环境传统CDN导入会自动"污染"全局 --modern 开启现代模式打包

• 项目包体积优化 利用webpack对动态import的支持实现页面分包

• 通过 defaultImg 粗略优化首屏体验

• 异步组件 + 进度条

• 通过通配符 * 匹配 404 页面

• Vue3 较 2 的 diff 构造函数 this指向 组合内聚

• 虽然 Vue2-mixins 能实现内聚，但是存在混合之间层次扁平化、执行顺序等问题 而 Vue3 composition 可以直接进行 函数级别的交互

• Vue3 将 LifeCycle Function 都抽离成普通函数了，不需要再限定在配置中

• like LifeCycle, Vue3 has computed() func

• Vue2 中计算属性可以通过 set 影响原始数据 Vue3 的 computed 最佳设计只设置 get 视为是只读的快照

• template 预编译 => render() Vite 本地开发时直接请求、快于 webpack css => str vue => js

• 因为 Vite 利用的是“现代浏览器支持ESM”这一特性，在开发时将模块文件直接传输给浏览器，不需要打包，是实时编译 所以 CMJ 是不支持的

• vue3 运行时缓存机制 vnode 存储到 _cache 中进行复用

• Vue3 不会对静态节点反复创建渲染函数，而是上提、然后在render中重复使用

• Vue3 预字符串化

• Vue3 打标是动态节点还是静态节点 如图是动态

• Vue3 中属性的静动态打标区分

• Vue3 双向绑定 v-model :modelValue , @update:modelValue v-model修饰符

• 虽然 Vue2 v-for > v-if ，但是每次变更后都需要重新循环判断 Vue3直接交换了优先级、报错[vue/no-use-v-if-with-v-for] 正确应该通过计算属性进行判断 当使用进行v-for循环时，需要把key值放到中，而不是它的子元素中

• 当使用v-if v-else-if v-else分支的时候，不再需要像Vue2一样指定key值（否则可能数据没清空) vue3会自动给予每个分支一个唯一的key 即便要手工给予key值，也必须给予每个分支唯一的key，不能因为要重用分支而给予相同的key，否则就无法切换了（Block了、编译成静态节点了）

• Vue3 的 router

• Vue3 异步加载组件

• 通过配置 defineAsyncComponent 对象设置 loading 和 error, Vue3 的 util syncGetComp 比 Vue2的 多等待和错误状态 Vue3 h函数具名了，方便随时创建虚拟节点

• 异步加载页面（本质就是异步加载组件）

• 朦层 通过 Teleport 修改在真实DOM中的位置

• property-descriptor 属性描述符对象 设置 set/get => 存取器属性“Invoke property getter”: 不再是在内存中管理 obj.a ，而是类似于 直接运行get()和set(val) 预检 通过innerText => UI和数据双向绑定

• ES6 => Reflect => 函数式编程、JS底层能力API

• 可以通过 proxy 在 Reflect 的底层实现基础上做想做的

• 通过 Object.defineProperty 实现浅层观察者模式 设置了两个对象，无法时时刻刻保证两个对象一致性（所以 vue2 有 $set 和 $delete 用于在 mounted 之后的属性更改）

• 递归实现深层观察者模式

• 虽然 defineProperty 可以直接通过覆盖 target 来避免 ob 的创建，但是会导致污染原先对象 最佳实践还是 Proxy

• 类代理，自动进行任何构造函数属性赋值