Vue 项目总结

  学习使用vue三个月,从自学三天到项目直接上手,压力渐减,收获颇多。

  来一波总结。 持续更。

1、防抖与节流。

     防抖与节流一般用于前端通过限制访问后台接口频率减缓服务压力,提高系统健壮性。

  (1)防抖

     防抖是在触发一次后的既定时间范围内延时再次触发,每次触发后都会刷新延时初始时间,如果一直触发则会造成访问一直延缓。

     实现1:   

export function debounce(fn, delay) {
        let timer = null
        return function () {
            let arg = arguments
            clearTimeout(timer)   //清空时间
            timer = setTimeout(() => {  //设置延时
                fn.apply(this, arg)
            }, delay)
        }
    }

   ...

//方法调用
save2: debounce(function () {
                window.console.log("================111111111111111====================")
            }, 400),

      实现2:

const delay = (function () {
                    let timer = 0
                    return function (callback, ms) {
                        clearTimeout(timer)
                        timer = setTimeout(callback, ms)
                    }
                })()

    ...

//方法调用
save2() {
    delay(() => {                   
       window.console.log("================111111111111111====================")
                }, 500)
}

  (2)节流

2、监听。

    监听在平时联动操作中很常用,比js写监听方便多了~~

data() {
   return {
       form: {
          demo: '',
       }
    }
  }
 
 ...

watch: {
    'form': {
        handler(newParams,oldParams) {
           window.console.log('触发监听..')
        },
      deep: true  //深度监听,如需监听form.demo属性值的变化则使用deep
      immediate: true  //刷新页面时即开始进行监听
     }
}

3、防抖+监听 实现异步刷新

   在做即时搜索时需用到类似异步刷新操作,可以极大提高用户体验度,但须进行防抖或节流控制保护接口访问频率。

   一次完整请求:

<el-input v-model="form.searchParams"></el-input>

  ...

//防抖函数
export function debounce(fn, delay) {
        let timer = null
        return function () {
            let arg = arguments
            clearTimeout(timer)   //清空时间
            timer = setTimeout(() => {  //设置延时
                fn.apply(this, arg)
            }, delay)
        }
    }

  ...

data: {
  return {
    form: {
      searchParams: '', //查询参数
      pageData: '', //模拟页面数据
    }
  }
}

  ...

watch: {
  'form.searchParams': {
     handler(newParams,oldParams){
        if(this.form.searchParams !== ''){
            this.searchFunc() 
        }
    }
  }
}

  ...

methods: {
  searchFunc: debounce(function () {
      let that = this
      this.$axios({
          method: 'post',
          url: this.$api.search,  //模拟请求
          data: {
             searchParams: this.form.seachParams,
          }
      }.then( (res) => {
        if(res.result == 1){
            that.form.pageData = res.info  //模拟页面数据刷新 
        }else{
            that.$message({
              message: res.msg,
              type: 'error'
            })
          /*this.$alert(res.msg, '提示', {
              type: 'warning'
            })*/
        }
      }).catch(function (error) {
          that.$alert(error,'系统异常,请联系管理员!',{})
      })
    }, 400), //防抖延时
}

4、路由传参

  (1)this.$router.push
     跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面

    携带参数跳转:

this.$router.push({
      path: `/aa/${id}`,
})

 ...
 
   //rooter.js 配置
   {
     path: '/aa/:id',
     name: 'aa',
     component: '@vue/.../aa'
   }

 ...

   //接收

   this.$route.params.id

    query方式: query传递的参数会显示在url后面?id=11

this.$router.push({
          name: 'aa',     //rooter--key
          query: {
               id: '11' 
           }
    })

  ...

this.$route.query.aa     //获取rooter参数

     params方式:  本身定义为params传参,无需再路由配置

this.$router.push({
          name: 'aa',     //rooter--key
          params: {
               id: '11' 
           }
    })

  ...

this.$route.params.aa     //获取rooter参数

  (2)this.$router.replace
     跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面

this.$router.replace({
          name: 'aa',     //rooter--key
          query: Object.assign({
                 param: '11',
               },that.$route.query)
          })

  ...

this.$route.query.aa     //获取rooter参数

     es6:  Object.assign()方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象

              第一个对象为目标对象,其余均为源对象。

  (3)this.$router.go(n)
     向前或者向后跳转n个页面,n可为正整数或负整数

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值