防抖和节流

debounce

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


Typescript语法篇

1.typescript的原始类型

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

EventBus的一种使用场景

所谓事件总线,就是实例化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数据丢失,使用了vuex-persistedstate对vuex进行持久化处理
官方github:https://github.com/robinvdvleuten/vuex-persistedstate

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


点歌台项目总结

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

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

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

js中的变量声明

一、 es5和es6中变量声明的区别

变量提升 块级作用域 重复声明
var
let、const 不会 不能

事件 Event

事件是您在编程时系统内发生的动作或者发生的事情——系统会在事件出现的时候触发某种信号并且会提供一个自动加载某种动作,列举一些可能发生的事件。

  • 用户在某个元素上点击鼠标或悬停光标。
  • 用户在键盘中按下某个按键。
  • 用户调整浏览器的大小或者关闭浏览器窗口。
  • 一个网页停止加载。
  • 提交表单。
  • 播放、暂停、关闭视频。
  • 发生错误。