Vue搜索功能的正确姿势

涉及到input搜索功能，就会涉及到节流，防抖的性能优化

好记性不如烂笔头，先把写的案例记录下来吧

App.js
<template>
  <div id="app">
    <input type="text" placeholder="请搜索" @input="searchInput($event)" />
    <List ref="child" :msg="course" :resurceArr="resurceArr"/>
  </div>
</template>

<script>
import List from './components/List.vue'
import course from './dataCourse';
import {throttle} from './throttle'; // 导入节流函数

export default {
  name: 'App',
  components: {
    List
  },
  data() {
    return {
      course,
      resurceArr:[]
    }
  },
  methods: {
    searchInput:throttle(function(e) {
      // 父组件通过 $refs 可以给子组件传递事件，子组件直接在methods里调用parentMsg方法名即可
      this.$refs.child.parentMsg(e.target.value)
    },3000)
  },
}
</script>

<style>
</style>
===============================================================================

子组件 List
<template>
  <div>
    <ul v-if="resultArr.length>0">
      <li v-for="(item,index) in resultArr" :key="index">
        <div>{{item.name}}</div>
        <div>{{item.price}}</div>
      </li>
    </ul>
    <ul v-else>
      <li v-for="(item,index) in arr_course" :key="index">
        <div>{{item.name}}</div>
        <div>{{item.price}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'List',
  props:{
    msg:Array,
    resurceArr:Array
  },
  data() {
    return {
      arr_course: this.msg,
      resultArr:this.resurceArr
    }
  },
  methods: {
    // parentMsg 父组件绑定的事件
    parentMsg(value) {
      this.resultArr = this.arr_course.filter(function(item){
        if(item.name.includes(value)){
          return item
        }
      })
      console.log(this.resultArr );
    }
  },
}
</script>

<style scoped>
ul li{
  margin: 10px;
}
</style>
======================================================================
节流函数

// 节流：一段时间内重复触发，最后只执行一次
export function throttle(fn, delay) { 
    var timer = null;
    var begin = new Date().getTime();

    return function () { 
        var _that = this;
        var args = arguments;
        var currentTime = new Date().getTime();
        clearTimeout(timer);
        if (currentTime - begin >= delay) {
            fn.apply(_that, args)
            begin = currentTime
        } else {
            setTimeout(() => {
                fn.apply(_that,args)
            }, delay);
        }
    }
}