1.注释

• 以 // 开头的注释，不会被编译到css文件中
• 以 /**/ 包裹的注释会被编译到css文件中

回流

指改变几何属性的渲染

重绘

指改变外观属性而不影响几何属性的渲染

上图是对鼠标进行监听，事件执行的很频繁，如果执行的事件是对接口的请求，那么会在短时间内发起大量重复请求，所以我们需要防抖或者节流进行解决。

1.typescript的原始类型

1. boolean
2. number
3. string
4. void（只有null和undefined可以赋给void）
5. undefined 和 null（是所有类型的子类型，严格模式下只能赋值给对应的类型或者any）
6. symbol
7. bigint

codepen：https://codepen.io/
css常见布局：https://csslayout.io/patterns/
常见加载动画：https://tobiasahlin.com/spinkit/
常见css效果：https://emilkowalski.github.io/css-effects-snippets/
css灵感：https://chokcoco.github.io/CSS-Inspiration/#/
自定义css组件：https://animista.net/

所谓事件总线，就是实例化Vue对象，在该实例上通过$on绑定事件、$emit触发事件、$off解绑事件，进行组件通信。

一、使用

实例化Vue对象，并挂载到Vue.prototype

1

Vue.prototype.$bus = new Vue();

二、场景

在多个页面复用一个组件时，每个页面需要有点击按钮后，触发不同的事件

当然可以监听路由进行判断调用不同的函数，但是这样会在一个组件内写上很多其他组件应该触发的事件。

我们利用EventBus可以做到组件间的解耦

三、使用方法

1.我们在各个页面上写好事件触发后调用的函数，然后在mounted（如果用keep-alive则是在activated，否则只挂载一次）this.$bus.$on上绑定该事件，在beforeDestory（如果用keep-alive则是在deactived，否则无法解绑事件）上用this.$bus.$off解绑事件。

1
2
3
4
5
6
7
8
9
10
11

mounted() {
    this.$bus.$on("save", this.save);
}

beforeDestory() {
    this.$bus.$off("save", this.save);
}

save() {
    console.log("我没有写在复用组件上哦！")
}

2.然后在复用的组件上触发事件

1

this.$bus.$emit('save');

也算是第一次尝试使用EventBus把，很好的降低了组件间的耦合度

针对刷新时vuex数据丢失，使用了vuex-persistedstate对vuex进行持久化处理
官方github：https://github.com/robinvdvleuten/vuex-persistedstate

本文主要是对官网不够详细的案例进行补充，官网只讲了对vuex完全存储和对vuex模块的完全存储。
但是我想对某一模块内部一些变量进行存储，谷歌了好多都没找到写法，自己试出来了。

在做项目的时候看到了这个需求，需要用图片替换默认的文字显示

照着官方教程设置好JS接口安全域名并且把文件放到服务器后

首先需要引入weixin-js-sdk

然后创建一个文件

1. img标签src为空的异常样式

根据用户性别来显示不同的图标，但是如果获取失败，导致img的src为空从而显示异常处理

1
2
3
4
5

// 解决src为空的异常样式
img[src=""],
img:not([src]) {
  opacity: 0;
}