vue性能优化-利用防抖和pinia获取基础数据

目录

1、什么是防抖

2、防抖通用方法

3、什么是闭包

4、apply是干什么的

5、新建utils.js文件

6、新建UseBaseData仓库

7、使用

---

1、什么是防抖

在一段时间内多次触发函数，只执行最后一次，常用的场景有搜索框输入，用户连续输入时不发出请求，当用户停止输入一段时间后才发请求。

2、防抖通用方法

const DEBOUNCE = (func, wait) => {
  let timeout;
  return function (...args) {
    if(timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

其中涉及到闭包、apply的使用，此代码可以直接复制

3、什么是闭包

闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。换而言之，闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中，闭包会随着函数的创建而被同时创建。

具体请参考：闭包 - JavaScript | MDN

4、apply是干什么的

以给定的值调用方法

具体请参考：apply使用方法

5、新建utils.js文件

utils文件，顾名思义就是工具文件，一般用于保存公共函数，在utils.js中新增防抖方法

6、新建UseBaseData仓库

引入防抖方法，以获取城市列表为例，在state中定义数组cityList，action新增两个方法，分别是fetchCity和getCity，fetchCity用于远端请求city数据，并且复制给cityList，getCity则是使用防抖，调用fetchCity，具体代码如下

    async fetchCity() {
      if (this.cityList = JSON.parse(localStorage.getItem('cityList'))) {
        return
      }
      // 此处请求获取城市接口
      const { data } = await getList()
      this.cityList = data
      localStorage.setItem('cityList', JSON.stringify(data))
    },
    getCity: DEBOUNCE(async function () {
      await this.fetchCity();
    }, 300),

7、使用

假如页面中有城市下拉框，那么在页面的onMounted方法中调用UseBaseData中的getCity方法，并且给下拉框的option绑定UseBaseData中的cityList。store的具体使用可以参考简介 | Pinia

vue2中也可参考vuex

完结撒花~~~~