将 obj 或 class 写的方法通过 es6 解构出来会导致,this 不能再访问到 obj 自身亦或者 constructor 中的变量

• 解决方法:
  1. 不使用解构
  2. 将公用的方法另外写一个 function 不挂载在 this 上

Flex 布局中,盒子中的元素顺序排列,使用 margin 隔开位置,每一列的最后一个的盒子会出现 marng 距离,不能完美贴合的问题:

• 使用一个长度为真盒子的 width 外加 margin-right 的长度(calc 计算 css)的假盒子置于真盒子内,真盒子使用 overflow-x:hidden 消除横向滚动条

响应式布局:通过使用 media 标签+百分比布局+计算来布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

$container_width: 100%; // 容器宽度
$box_many: 2; // 内部盒子个数
$margin_width: 20px; // margin的距离
.container {
  width: $container_width;
  height: 200px;
  overflow-x: hidden;
}
.virtual-container {
  width: calc($container_width + $margin_width);
  display: flex;
  flex-wrap: wrap;
}
.container-item {
  width: calc($container_width / $box_many - $margin_width);
  margin-right: $margin_width;
}
@media screen and (max-width: 1600px) {
  .container-item {
    width: calc($container_width / $box_many - $margin_width); // 一行容纳两个
  }
}
@media screen and (max-width: 1200px) {
  // 一行容纳一个
  .container-item {
    width: $container_width;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<div class="container">
  <div class="virtual-container">
    <div class="container-item">
      <div>
        <div class="container-item">
          <div>
            <div class="container-item">
              <div>
                <div class="container-item">
                  <div>
                    <div class="container-item">
                      <div>
                        <div class="container-item">
                          <div>
                            <div>
                              <div></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

在 vue 中，直接将表格的数据映射到表单，会出现未确认修改但已修改的情况，因为响应式的影响，所以表格数据不能直接映射到表单，需要拷贝一份

在数组中，使用.lengh 做判断要小心，如果数组不存在会报错阻断页面运行

在 js 中, ?. 以及 ?? 的用法：

• ?. 代表当对象链式调用后的值存在时则调用否则返回 undefind,用于防止直接调用报错阻断页面运行问题，如 let obj = { a:1,b:{ d:”2” } } , let a = obj?.b?.d。
• ?? 类似于赋默认值,与 || 相似，但它会视 0 空字符串 等为正确，而 || 则相反。如 let a = “” && “good”; 结果就是 “”
• ***但在 vue 中使用,如果“@vue/cli-plugin-babel”版本过低会报错，参考版本 ^4.0.0

es6 数组快速排序的方法：

1
2
3

arr.sort(function(a,b){
 return Number(a.id) - Number(b.id) // 降序，ba位置调换则为升序      
})

页面定时器要在全局作用域，用对象来管理，避免遗漏关闭定时器的问题，减少查找花费时间

不要用 !{} 这样来判断对象值, 因为不管{}有值或者没值其返回的结果会是false

在vue2中，父组件使用v-model传值，子组件需要通过props:{ value:{} }来接收，this.$emit(‘input’,’’) 来修改值

在vue2中，computed只读不可写，若要手动修改，需要给computed设置set方法在其中修改

循环对象时顺序不是有序的

css中：选择并列dom的最后一个元素的选择器是last-child:{}; 选择同类型的元素的第n个 用nth-of-type( 第几个 * n):{}

在书写复杂的逻辑时，一定要避免冗余或无用的变量，影响自己的逻辑判断

vue2.0 切换路由使用 keep-alive 缓存失败,vue3.0 现切换成该形式:

1
2
3
4
5

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

在vue中: 不可通过 v-html 来生成带数据侦测的模板,不然会失去响应

在js中: 判断点击的是否是目标元素: 给目标元素添加自定义属性,给点击区域绑定事件,点击事件拿到点击目标,判断是否有自定义属性，从而判断是否是目标元素

css中： 外层元素点击影响内层元素,给内层元素加position:relative; 则层级比默认元素高,会优先点击到