Vue技巧功能

节流

请求时间内禁止再次请求 , 除非上次请求结束(指的是单个请求)

// 设置节流阀
data() {
  return {
    // 是否正在请求数据
    isloading: false
  }
}

// 请求操作 方法
async query() {
  // ** 打开节流阀
  this.isloading = true
  // 发起请求
  const res = await uni.request({url:'xxx'});
  // ** 关闭节流阀
  this.isloading = false

  // 省略其它代码...
}

// 触发 请求 方法
request() {
  // 判断是否正在请求其它数据，如果是，则不发起额外的请求
  if (this.isloading) return

  this.query()
}

限流

限流 能够将一段时间内频繁操作设置成一次操作

data() {
  return {
    // 延迟器
    timer: null
  }
}

//  触发 操作 方法
operate(){
    // 清除 timer 对应的延时器
    clearTimeout(this.timer);
    // 1s 未触发则更新数值
    this.timer = setTimeout(() => {
        // 执行内容
    }, 1000);
}

跳转外部URL

操作步骤 :

创建 webview.vue 页面 (page.json也需要添加)

<template>
  <web-view :src="url"></web-view>
</template>
 
<script>
export default {
  data() {
    return {
      url: ''
    }
  },
  onLoad(item) {
    this.url = decodeURIComponent(item.url)
    console.log(this.url)
    // 传入需要跳转的链接 使用web-view标签进行跳转
  }
}
</script>
 
<style lang="scss">
</style>

触发跳转

<view @click="hrefrouterApp()"> 平台跳转 </view>
// 触发跳转
hrefrouterApp() {
  let url = 'http://xxxxxx/routerApp'  // URL是要跳转的外部地址 作为参数
  uni.navigateTo({
    url: '/pages/common/webview?url=' + url
    // page.json定义的路径 传url 到webview界面去接收 实现跳转
})

uniApp

返回传参

可以传递 对象/数组/...

// 返回后接收的页面
uni.$once('number' ,(number)=>{
    this.templateNum = number - 1; 
});


// 页面返回操作
backTest(index) {
    uni.$emit('number' , index);
    uni.navigateBack();
},

踩坑

Vuex

问题 : setData 内存过大 (不能操作1M)

原因1 : Vuex 的 state数据在 mutations方法中调用时使用了 arr = [...arr, ...] 链式添加

原因2 : 组件通信传递无用参数

解决 : 改用 Array.push() 方法进行添加数组

克隆

问题 : 批量克隆对象到数组 , 那么修改里面的数据 , 那么数组的所有元素也收到影响

原因 : 浅克隆 会连同引用原型对象进行克隆过去 (地址)

解决 : 进行深克隆 (蠢方法)

JSON.parse(JSON.stringify(obj));