懂点Vue的朋友们都知道，学好这个要基础扎实，响应速度尤其关键！可能有人觉得它也不过如此，但实际操作就会发现，速度超级快，用户体验档次瞬间提升！这儿给大家分享几个妙招，教你怎么巧妙运用Vue把应用提速起来！
使用事件修饰符
聊聊vue里的那些事件修饰符呗（如.stop、.prevent和.once），超实用的，能帮你处理不少麻烦。
例如，你有个按钮要它专注于它自己的事情不要插手别人的，那就用”stop”这个方法解决！这样一来，按着按钮只会激活已经设置好的那个功能，其它都不管了。
这问题听着耳熟？想点击“提交”但不想真的提交咋办？告诉你个小妙招，赶紧试一下，点一下滑鼠就成！这样既可以激活提交功能，同时也不必让表格真正提交运行。
想要把字当成“按钮”？莫慌，来试试神奇的.once！不管是狂敲键盘，还是狠狠戳，用过一回后，它以后就会乖乖听你的话哦～
有了这些事件修饰符，烦心的事儿可都解决了，简直快得像在飞！
Click me
合理使用事件委托
说实话，处理一堆相似的事儿想省力的话，有个小技巧可以帮你忙。这个方法看上去微不足道，但是真的很好使。比如说，咱们就把所有事儿都归纳到那几个领袖那儿去搞定，别再浪费时间慌里慌张地找错地方了。
直接点，咱们不用费劲儿在UL里搞复杂的个性化绑定了，就放满Li就是了呗？然后轻轻点一下那个按钮就成事儿，多省事儿！这样咱们也就不用担心会处理那些让人头疼的函数问题，同时也能提升程序运行速度！
记住，想要知道是哪个元素真的引发了事件，我们可以用event.target这个方法。别再纠结于那些复杂的参数！
- Item 1
- Item 2
- Item 3
节流和防抖
嘿你好告诉你个超方便的App，既可以节省流量又能防止页面抖动。看网页的时候，那天下跳的浏览器太让人眼花缭乱了.
别急，我们在handleScroll里面设置了个计时器。每次只允许它做一件事情，时间也只有1000毫秒这样就不怕它乱来，保证你用得顺手又舒服！
你知道，那个 handleInputChange 每过大约500毫秒就看看有无新消息。没有就刷新下，简单利索！再加上两大神器——“加油门”（省流量）和“刹车”（防卡顿），保证用得溜！所以说，咱们这个 APP 就是快如闪电，挺牛！
import _ from 'lodash';
export default {
methods: {
handleScroll: _.throttle(function(event) {
// 处理滚动事件
}, 1000)
}
}
看看上面这段话，你就能学会怎样用Vue搞定事件修饰符和方法委托。别忘了，还要学会防止过度调用，这样处理页面就轻松多！
别乱搞优化！首先你得确定想要什么效果和性能，接下来找个对的方法搞定就行了。学会用Vue这类超好用的工具，保证你的应用飞起来，吓傻所有人！
import _ from 'lodash';
export default {
methods: {
handleInputChange: _.debounce(function(event) {
// 处理输入框变化事件
}, 500)
}
}
评论0