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可为正整数或负整数