vue使用节流函数会遇到什么问题

小编给大家分享一下Vue使用节流函数会遇到什么问题，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

举一个? 业务场景

概念：

关于防抖函数的介绍

关于addEventListener

使用示例：

function debounce(fn) {        let timeout = null; // 创建一个标记用来存放定时器的返回值        return function () {            clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉            timeout = setTimeout(() => {                // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的                // interval 间隔内如果还有字符输入的话，就不会执行 fn 函数                fn.apply(this, arguments);            }, 500);        };    }    function sayHi() {        console.log('防抖成功');    }    var inp = document.getElementById('inp');    inp.addEventListener('input', debounce(sayHi)); // 防抖

在vue中使用？

首先说一下之前的踩坑行为

下面的代码为简易版的一个场景

function debounce(fn) {        let timeout = null; // 创建一个标记用来存放定时器的返回值        return function () {            clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉            timeout = setTimeout(() => {                // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的                // interval 间隔内如果还有字符输入的话，就不会执行 fn 函数                fn.apply(this, arguments);            }, 500);        };   }

错误的使用方式

<template>    <div class="search-view">        <div class="header">            <Search                 class="search-box"                 v-model='searchValue'                 @input='getSearchResult'                 placeholder='搜索想要的好物' />            <span @click="GoBack" class="cancel">取消</span>        </div>        <div class="serach-view-content" />    </div></template><script>import Search from './components/Search';import debounce from './config';export default {    name: 'SearchView',    components: {        Search    },    data() {        return {            searchValue: ''        };    },    methods: {        getSearchResult() {            debounce(function() {                console.log(this.searchValue);            })();        }    }};</script>

为什么错误？

源码层级分析

vue模板编译 的解析事件

export const onRE = /^@|^v-on:/export const dirRE = /^v-|^@|^:/function processAttrs (el) {  const list = el.attrsList  let i, l, name, value, modifiers  for (i = 0, l = list.length; i < l; i++) {    name  = list[i].name    value = list[i].value    if (dirRE.test(name)) {      // 解析修饰符      modifiers = parseModifiers(name)      if (modifiers) {        name = name.replace(modifierRE, '')      }      if (onRE.test(name)) { // v-on        name = name.replace(onRE, '')        addHandler(el, name, value, modifiers, false, warn)      }    }  }}

总结: 实例初始化阶段调用的初始化事件函数initEvents实际上初始化的是父组件在模板中使用v-on或@注册的监听子组件内触发的事件

vue的事件机制

Vue.prototype.$on = function(event, fn) {    const vm = this;    if (Array.isArray(event)) {        for (let i = 0; i < event.length; i++) {            this.$on(event[i], fn);        }    } else {        //这个_events属性就是用来作为当前实例的事件中心，所有绑定在这个实例上的事件都会存储在事件中心_events属性中。        (vm._events[event] || (vm._events[event] = [])).push(fn);    }    return vm;};Vue.prototype.$emit = function(event) {    const vm = this;    let cbs = vm._events[event];    if (cbs) {        cbs = cbs.length > 1 ? toArray(cbs) : cbs;        let args = toArray(arguments, 1);        for (let i = 0; i < cbs.length; i++) {            try {                cbs[i].apply(vm, args);            } catch (e) {                handleError(e, vm, `event handler for "${event}"`);            }        }    }    return vm;};

vue的initState中 调用了initMethods方法

initMethods中挂在methods方法到this上

for (const key in methods) {        if (process.env.node_ENV !== 'production') {            if (methods[key] == null) {                warn(                    `Method "${key}" has an undefined value in the component definition. ` +                        `Did you reference the function correctly?`,                    vm                );            }            // 如果和props中某个属性名重名了 抛出异常            if (props && hasOwn(props, key)) {                warn(`Method "${key}" has already been defined as a prop.`, vm);            }                        if (key in vm && isReserved(key)) {                warn(                    `Method "${key}" conflicts with an existing Vue instance method. ` +                        `Avoid defining component methods that start with _ or $.`                );            }            // 将method绑定到实例 vm上  这样我们就可以通过this.xxx 来访问了            // 同时如果在vue中  let m1 = this.xxx  m1() this也指向vue            vm[key] = methods[key] == null ? noop : bind(methods[key], vm);        }

划重点：

• 子组件$emit('input事件')

• 父组件接收事件
  

getSearchResult.apply(this, agrs)<===>  apply的调用可以写成下面的形式this.getSearchResult(args)// 进而变成这种执行debounce(function() {      console.log(this.searchValue);})();// 这里的debounce 返回了一个函数 于是变成(function (fn) {      clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉      timeout = setTimeout(() => {          // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的          // interval 间隔内如果还有字符输入的话，就不会执行 fn 函数          fn.apply(this, arguments);      }, 500);})()// 到这里  其实就变成了匿名函数的自执行// 由于每次触发input都会返回一个新的匿名函数  生成一个新的函数执行栈  所以防抖失效~

那么应该如何调用

<template>    <div class="search-view">        <div class="header">            <Search                class="search-box"                v-model='searchValue'                @input='getSearchResult()'                placeholder='搜索想要的好物'            />            <span                @click="goBack"                class="cancel">取消</span>        </div>        <div class="serach-view-content">                    </div>    </div></template><script>import debounce from 'lodash.debounce';export default {    name: 'SearchView',    components: {        Search,    },    data() {        return {            searchValue: '',        };    },    methods: {        getSearchResult: debounce(function () {            console.log(this.searchValue);        }, 500),    },};</script>

分析执行过程

getSearchResult().apply(this, args)<===> 忽略参数行为 只关注执行栈let func = function () {    clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉    timeout = setTimeout(() => {        // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的        // interval 间隔内如果还有字符输入的话，就不会执行 fn 函数        fn.apply(this, arguments);    }, 500);};this.func(args)<===>

子组件触发input的行为  返回的始终是一个同一个函数体  防抖成功

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

以上是“vue使用节流函数会遇到什么问题”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！