Vue学习(八)passive:true模式
2023-09-27 14:26:39 时间
passive模式
修饰符:.passive
- (2.3.0) 以 { passive: true }
模式添加侦听器,也就是执行默认行为
passive这个修饰符会执行默认方法。你们可能会问,明明默认执行为什么会设置这样一个修饰符。这就要说一下这个修饰符的本意了。
【浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时,才能知道内部是否会调用preventDefault函数来阻止事件的默认行为,所以浏览器本身是没有办法对这种场景进行优化的。这种场景下,用户的手势事件无法快速产生,会导致页面无法快速执行滑动逻辑,从而让用户感觉到页面卡顿。】
通俗点说就是每次事件产生,浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器,不用查询了,我们没用preventDefault阻止默认动作,从而提高了性能
这里一般用在滚动监听,@scoll,@touchmove 。因为滚动监听过程中,移动每个像素都会产生一次事件,每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过,可以大大提升滑动的流畅度。
注:不要把 .passive
和 .prevent
一起使用,因为 .prevent
将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive
会告诉浏览器你不想阻止事件的默认行为,而prevent会告诉浏览器阻止事件的默认行为。
因此passive和prevent冲突,不能同时绑定在一个监听器上。
相关文章
- 精品微信小程序鲜花销售系统购物商城+后台|前后分离VUE
- Vue 关联关系图谱组件
- Vue学习笔记之el-form表单 el-form-item label不换行
- Vue学习笔记之Element-UI表单校验中的多层嵌套处理
- Vue学习笔记之Webpack介绍
- Vue学习笔记之Vue的面向对象
- 使用Vue-cli 3.x搭建Vue项目
- Vue中动态添加多个class
- Es6模块化(有点问题 无法引用,回公司问问,要装环境用vue创建项目才行)
- Vue.js学习笔记(二)
- Vue学习(六)计算属性和侦听属性的区别以及应用场景
- webpack4搭建Vue开发环境笔记~~持续更新
- vue-quill-editor-upload : 实现vue-quill-editor上传图片到服务器
- 前端经典面试题-react/vue为什么不能用index做key?
- vscode:Module ‘“xxx/node_modules/vue/dist/vue“‘ has no exported member ‘ref‘
- 用 Vue 全家桶二次开发 V2EX 社区
- vue 里怎么通过魔数(magic number)去限制上传文件类型?
- Vue.js学习系列一 —— vue-router2学习实践笔记(附DEMO)
- Vue.js学习笔记
- vue.js 由浅至深学习宝典
- 前端学习之Vue项目:电商后台管理系统