小林笔记

Appearance

开发记录 ​

函数式组件 ​

特点：无状态，无实例。 无法使用 vModel 指令。 使用函数组件替换 v-if v-else 场景

浏览器缩放 ​

先说结论：视口缩放后 = 视口缩放前 * （100% / 缩放比例）。

例如一个 1920 * 1080 显示器，浏览器视口默认（100%情况）为 window.innerWidth = 937 和 window.innerWidth = 1920。当缩放达到（150%）时，window.innerWidth = 625 和 window.innerWidth = 1280。

情况一：当某元素尺寸设置绝对单位（1000px），在缩放的过程中可能会元素尺寸可能会大于视口，便出现了外部滚动条，这种做法有效防止视口过小导致页面内容挤压变形。

情况二：当某元素尺寸设置相对单位（50vh），在缩放过程中，会始终保持比例，但内部元素可能会陷入拥挤，此时上下还有 50vh 的空间。

结合以上情况，可以设置元素宽度为固定单位，设置一个最大宽度相对单位，这样可以避免内容元素挤压，同时避免出现外部滚动条。

css
 {
  width: 700px;
  max-width: 80vw;
}

组件与弹窗 ​

设计组件时需要考虑组件是直接嵌入还是弹窗嵌入，二者最好能再后期完全兼容，本次 3 层弹窗改造拉平涉及组件多层混入，组件内部数据初始化，回写处理数据。

首先多层混入混入问题，混入的目的是为了拿到渲染组件函数以及共享的数据，且多层混入很多时候会把一些不用的方法或数据加入，混入的最佳的场景是抽取公共方法与数据，但随着项目不断更新迭代，或许某些方法在一些组件中已弃用，但又不能直接从中删除。此时应该将方法抽离为一个一个函数单独维护，在需要使用的时候引入即可；对于共享数据，应放置在根组件，根组件往后代组件注入共享数据。

设计组件应该考虑兼容直接引入，还是弹窗控制。直接引入应直接实现数据双向绑定，为弹窗控制时应提供一个按钮用于同步数据。第一种为被动同步，第二种为主动同步。弹窗引入数据应作一份深拷贝，当点击取消时，不会影响到源数据。这种方法适用于纯前端设置数据，一旦弹窗数据不为外部传入，就无需考虑这种优化。

切换 tab 保留数据 ​

template 可复用，数据分组，仅展示当前激活数据，切换 tab 时，实际切换的是数据。

优点：复用 dom 结构节约不需要的开销。

缓存与多窗口问题 ​

问题 ​

本地（例如： localStorage ） 缓存，存放一些页面级数据时，多窗口操作缓存数据可能会错乱，导致对应页面展示数据达不到预期。

分析 ​

多窗口读写同一块数据，如果是一些页面级数据（如：项目 id，文章 id 等），此时不同页面级数据会相互错乱或者被覆盖。特别是通过复制 URL 方式打开新窗口时，读取到的数据是最后一次操作窗口数据。

将项目数据放入 URL 中（例如：项目 id），每个页面拿到 URL 中数据请求接口展示页面即可。假如当前页面需要一些类似草稿或填写一半的缓存功能，前端可以结合内存和本地缓存解决。

  • 页面刷新保存数据，页面刷新时写入本地缓存，页面加载时读取本地缓存。
  • 单页应用在组件级导航守卫处理，进入时读取数据，离开时保存数据。
  • 多窗口操作时，做好缓存管理，防止缓存串页。
  • 极端情况，比如浏览器奔溃，这种不可控，可在需要缓存数据变化时写入缓存，使用防抖或节流写入解决因频繁写入可能带来的性能问题。

奇怪的行内块布局 ​

提示

行内元素尽量不嵌套非行内元素。

行内 行内块 行内块 行内块 行内： 行内行内块行内 文字
vue
<template>
  <div class="wrap">
    <span class="shadow">
      行内
      <span class="bg inline-block size">行内块</span>
    </span>
    <span class="shadow inline-block size" style="width: 7em;">
      行内块
      <span class="bg inline-block size">行内块</span>
    </span>
    <span class="shadow">
      行内：
      <span class="bg">行内</span>
    </span>
    <span class="shadow inline-block">行内块</span>
    <span class="shadow">行内</span>
    文字
  </div>
</template>

<style lang="scss">
.wrap {
  line-height: 5;
  & > span {
    margin-right: 5px;
  }
}
.shadow {
  box-shadow: 0 0 4px red;
}
.bg {
  background-color: #000;
}
.inline-block {
  display: inline-block;
}
.size {
  height: 10px;
  width: 3em;
}
</style>

响应式provide与inject ​

example

vue