加入收藏 | 设为首页 | 会员中心 | 我要投稿 温州站长网 (https://www.52wenzhou.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

vue的防抖与节流是什么意思?如何理解?

发布时间:2022-01-11 18:46:26 所属栏目:语言 来源:互联网
导读:vue的防抖和节流是什么意思?一些朋友可能对防抖和节流不是很了解,对此这篇文章就给大家具体的介绍一下什么是防抖和节流,感兴趣的朋友接下来跟随小编一起学习一下吧。 函数防抖(debounce) 解释:当持续触发某事件时,一定时间间隔内没有再触发事件时,事
   vue的防抖和节流是什么意思?一些朋友可能对防抖和节流不是很了解,对此这篇文章就给大家具体的介绍一下什么是防抖和节流,感兴趣的朋友接下来跟随小编一起学习一下吧。
 
  函数防抖(debounce)
 
  解释:当持续触发某事件时,一定时间间隔内没有再触发事件时,事件处理函数才会执行一次,如果设定的时间间隔到来之前,又一次触发了事件,就重新开始延时。
 
  案例:持续触发scroll事件时,并不立即执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发一次handle函数。
 
  function debounce(fn, wait) {
   let timeout = null
   return function() {
   if(timeout !== null) clearTimeout(timeout)  
   timeout = setTimeout(fn, wait);
   }
  }
  function handle() {
   console.log(Math.random())
  }
  window.addEventListener('scroll', debounce(handle, 1000))
  addEventListener的第二个参数实际上是debounce函数里return回的方法,let timeout = null 这行代码只在addEventListener的时候执行了一次 触发事件的时候不会执行,那么每次触发scroll事件的时候都会清除上次的延时器同时记录一个新的延时器,当scroll事件停止触发后最后一次记录的延时器不会被清除可以延时执行,这是debounce函数的原理
 
  函数节流(throttle)
 
  解释:当持续触发事件时,有规律的每隔一个时间间隔执行一次事件处理函数。
 
  案例:持续触发scroll事件时,并不立即执行handle函数,每隔1000毫秒才会执行一次handle函数。
 
  function throttle(fn, delay) {
   var prev = Date.now()   
   return function() {    
   var now = Date.now()    
   if (now - prev > delay) {     
    fn()    
    prev = Date.now()    
   }   
   }  
  }  
  function handle() {   
   console.log(Math.random())  
  }
  window.addEventListener('scroll', throttle(handle, 1000))
  原理和防抖类似,每次执行fn函数都会更新prev用来记录本次执行的时间,下一次事件触发时判断时间间隔是否到达预先的设定,重复上述操作。
 
  防抖和节流都可以用于 mousemove、scroll、resize、input等事件,他们的区别在于防抖只会在连续的事件周期结束时执行一次,而节流会在事件周期内按间隔时间有规律的执行多次。
 
 
 
  Vue中实践
 
  在vue中实现防抖无非下面这两种方法
 
  封装utils工具
  封装组件
  封装utils工具
 
  把上面的案例改造一下就能封装一个简单的utils工具
 
  utils.js
 
  let timeout = null
  function debounce(fn, wait) {
   if(timeout !== null) clearTimeout(timeout)
   timeout = setTimeout(fn, wait)
  }
  export default debounce
  app.js
 
  <input type="text" @input="debounceInput($event)">
 
  import debounce from './utils'
  export default {
   methods: {
   debounceInput(E){
    debounce(() => {
    console.log(E.target.value)
    }, 1000)
   }
   }
  }
  封装组件
 
  至于组件的封装我们要用到$listeners、$attrs这两个属性,他俩都是vue2.4新增的内容,官网的介绍比较晦涩,我们来看他俩到底是干啥的:
 
  $listeners: 父组件在绑定子组件的时候会在子组件上绑定很多属性,然后在子组件里通过props注册使用,那么没有被props注册的就会放在$listeners里,当然不包括class和style,并且可以通过 v-bind=”$attrs” 传入子组件的内部组件。
 
  $listeners: 父组件在子组件上绑定的不含.native修饰器的事件会放在$listeners里,它可以通过 v-on=”$listeners” 传入内部组件。
 
  简单来说$listeners、$attrs他俩是做属性和事件的承接,这在对组件做二次封装的时候非常有用。
 
  我们以element-ui的el-input组件为例封装一个带防抖的debounce-input组件
 
  debounce-input.vue
 
  <template>
   <input v-bind="$attrs" @input="debounceInput"/>
  </template>
  <script>
  export default {
   data() {
   return {
    timeout: null
   }
   },
   methods: {
   debounceInput(value){
    if(this.timeout !== null) clearTimeout(this.timeout)  
    this.timeout = setTimeout(() => {
    this.$emit('input', value)
    }, 1000)
   }
   }
  }
  </script>
  app.vue
 
  <template>
   <debounce-input placeholder="防抖" prefix-icon="el-icon-search" @input="inputEve"></debounce-input>
  </template>
  <script>
  import debounceInput from './debounce-input'
  export default {
   methods: {
   inputEve(value){
    console.log(value)
   }
   },
   components: {
   debounceInput
   }
  }
  </script>
  上面组件的封装用了$attrs,虽然不需要开发者关注属性的传递,但是在使用上还是不方便的,因为把input封装在了内部这样对样式的限定也比较局限。有接触过react高阶组件的同学可能有了解,react高阶组件本质上是一个函数通过包裹被传入的React组件,经过一系列处理,最终返回一个相对增强的React组件。那么在vue中可以借鉴这种思路吗,我们来了解一下vue的函数式组件。
 
  函数式组件
 
  什么是函数式组件?
 
  函数式组件是指用一个Function来渲染一个vue组件,这个组件只接受一些 prop,我们可以将这类组件标记为 functional,这意味着它无状态 (没有响应式数据),也没有实例 (没有this上下文)。
 
  一个函数式组件大概向下面这样:
 
  export default () => {
    functional: true,
    props: {
      // Props 是可选的
    },
    // 为了弥补缺少的实例, 提供第二个参数作为上下文
    render: function (createElement, context) {
      return vNode
    }
  }
  注意:在 2.3.0 之前的版本中,如果一个函数式组件想要接收 prop,则 props 选项是必须的。在 2.3.0 或以上的版本中,你可以省略 props 选项,所有组件上的特性都会被自动隐式解析为 prop。但是你一旦注册了 prop 那么只有被注册的 prop 会出现在 context.prop 里。
 
  render函数的第二个参数context用来代替上下文this他是一个包含如下字段的对象:
 
  props:提供所有 prop 的对象
  children: VNode 子节点的数组
  slots: 一个函数,返回了包含所有插槽的对象
  scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
  data:传递给组件的整个数据对象,作为 createElement 的第二个参数传入组件
  parent:对父组件的引用
  listeners: (2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
  injections: (2.3.0+) 如果使用了 inject 选项,则该对象包含了应当被注入的属性。
  vm.$slots API 里面是什么
 
  slots用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如:v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点,或 v-slot:default 的内容。
 
  slots() 和 children 对比
 
  你可能想知道为什么同时需要 slots() 和 children。slots().default 不是和 children 类似的吗?在一些场景中,是这样――但如果是如下的带有子节点的函数式组件呢?
 
  <my-functional-component>
    <p v-slot:foo>
      first

(编辑:温州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读