Vue 2.x 几个常用的事件修饰符及其用法

Question

.capture 捕获阶段触发事件

<div @click.capture="log(1)" @click="log(5)">
  <div @click.capture="log(2)">
    <a @click.capture="log(3)" @click="log(4)" 
      href="javascript: console.log('6')">
      点击 a 标签，捕获阶段触发事件
    </a>
  </div>
</div>
// 1 2 3 4 5 6

某些标签拥有自身的默认事件，如 a[href="#"] ​， button[type="submit"] ​ 这种标签在冒泡结束后会开始执行默认事件

默认事件虽然是冒泡后开始，但不会因为 stop 阻止事件传递而停止，而是用 prevent

.passive 告诉浏览器，不用查询了，我们没用 preventDefault 阻止默认动作

因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询 prevent 会使滑动卡顿。
我们通过 passive 将内核线程查询跳过，可以大大提升滑动的流畅度。

浏览器只有等内核线程执行到事件监听器对应的 JavaScript 代码时，才能知道内部是否会调用 preventDefault 函数来阻止事件的默认行为，所以浏览器本身是没有办法对这种场景进行优化的。

这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿。

这里一般用在滚动监听，@scoll，@touchmove 。

如果设置了 passive 为 true，同时又阻止默认行为，阻止是不生效的

// 阻止鼠标滚轮事件
document.body.addEventListener('wheel', function (e) {
  e.preventDefault()
}, { passive: false }) // passive 参数不能省略，用来兼容 ios 和 android

// 移动端控制 body 的滚动
function bodyScroll(event){
  event.preventDefault()
}
function scrControl(t){
  if(t === 0){ //禁止滚动
    document.body.addEventListener('touchmove', this.bodyScroll, { passive: false })
  }else if(t === 1){ //开启滚动
    document.body.removeEventListener('touchmove', this.bodyScroll, { passive: false })
  }
}

<div @touchmove.passive>
// 丝滑般的滚动
</div>

.native 将原生事件绑定到组件

只能用到组件上面，不能用到普通的标签上面

.sync 双向数据流

传统写法

<child :title="title" @updateTitle="updateTitle"></child>
updateTitle (value) {
    this.title = value
},
// child
<button @click="updateTitle">修改 title</button>
updateTitle () {
    this.$emit('updateTitle', '哈哈')
},

sync 写法

<child :title.sync="title"></child>
// child
<button @click="updateTitle">修改 title</button>
updateTitle () {
    this.$emit('update:title', '哈哈')    // 必须 emit update:title 这个方法
},

.self

event.target 是当前元素自身时触发处理函数（即事件不是从内部元素触发的)

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
用 v-on:click.prevent.self 会阻止 所有的点击 ，而 v-on:click.self.prevent 只会阻止对元素 自身 的点击。