[{"_1":2,"_48":-5,"_49":-5},"loaderData",{"_3":4,"_46":-5,"_47":-5},"routes/blog._index",{"_5":6,"_15":37,"_38":39,"_40":41,"_42":17,"_43":39,"_44":45},"data",[7,29],{"_5":8,"_21":22,"_23":24,"_25":26,"_27":28},{"_9":10,"_11":12,"_13":14,"_15":16,"_19":20},"type","Post","date","2022-03-31","title","自定义指令","tags",[17,18],"vue","javascript","description","Vue有很多内置指令，比如v-for、v-if","content","\nVue 有很多内置指令，比如`v-for`、`v-if`，我们可以自定义类似的指令。\n\n一个简单的自定义指令`v-bg-color`\n\n```vue\n\n```\n\n```js\nimport {createApp} from 'vue'\nconst app = createApp({})\n\napp.directive('bg-color', {\n mounted(el, {value}) {\n // Update the background color\n el.style.background = value\n }\n})\n```\n","slug","/blog/javascript/vue/custom-directives","isEmpty",false,"excerpt","",{"_5":30,"_21":35,"_23":36,"_25":26,"_27":28},{"_9":10,"_11":31,"_13":32,"_15":33,"_19":34},"2021-11-20","如何在 vue 中使用 Debounce、Throttle",[17,18],"如input、resize、scroll、intersection observer 等事件可能发生得非常频繁，例如每秒发生几次，因此调用一个动作，比如对每个事件发出读取请求，并不是一个明智的方法。","\n## 为什么要使用 debounce 和 throttle\n\n防抖和节流就是针对响应跟不上触发频率这类问题的两种解决方案。在给 DOM 绑定事件时，有些事件我们是无法控制触发频率的。如鼠标移动事件 onmousemove, 滚动滚动条事件 onscroll，窗口大小改变事件 onresize，瞬间的操作都会导致这些事件会被高频触发。如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。在实时检查输入时，如果我们绑定 onkeyup 事件发请求去服务端检查，用户输入过程中，事件的触发频率也会很高，会导致大量的请求发出，响应速度会大大跟不上触发。\n\n## 在 watcher 中使用 debounce\n\n1. 在`created`生命周期将`this.debounce`绑定到`this`上，这样`this.debounce`就可以在`created`生命周期中使用。\n2. 在`watch`函数中，使用`this.debounce`调用`debounce`函数，并传入`this.debounce`的回调函数。\n3. 在事件销毁前，使用`this.debounce`调用`clear`函数，清除定时器。\n\n```html\n\n\n```\n\n## 使用 debounce 处理事件\n\n```html\n\n\n```\n\n为什么不适用`debounce`或`throttle`直接绑定函数呢？比如：\n\n```html\n\n\n```\n\n**使用`export default { ... }`从组件导出的 options 对象，包括方法，将被组件的所有实例重用。如果网页中有 2 个或更多的组件实例，那么所有的组件都将使用相同的`debounce`或`throttle`的函数方法。**\n\n## 总结\n\n在 `vue` 中使用 `debounce` 和 `throttle` 函数，应该在 `created` 和 `beforeUnmount` 生命周期中使用，而不是在 `watch` 中使用。\n\n```html\n\n\n```\n","/blog/javascript/vue/debounce-throttle",[17,18],"currentPage",1,"pageSize",12,"tag","totalPages","total",2,"root","routes/blog","actionData","errors"]

This background is blue

文章列表

自定义指令

如何在 vue 中使用 Debounce、Throttle