Vue 语法糖

Vue 语法糖

因为昨天项目遇到的bug，可以用语法糖完美解决，这里总结一些比较常用的。
问题描述：一个Modal，自己实现点击表单聚焦，点击外围失焦的效果。表单点击在nextTick里聚焦，外围是直接设置失焦，但是好像测试环境和本地环境不太一致的缘故，同样的代码表现不同，测试环境父级的失焦会比nextTick内的执行还要快。
解决方式：表单点击使用click.stop阻止冒泡

总结常用的语法糖

• .stop：阻止冒泡
• .native：一个组件的根元素上直接监听一个原生事件
• .self：只当在 event.target 是当前元素自身时触发处理函数（并不阻止冒泡，不可替代.stop）
• .capture：使用事件捕获模式（即内部元素触发的事件先在此处理，然后才交由内部元素进行处理）
• .once：只执行一次
• .lazy：在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。你可以添加lazy修饰符，从而转变为使用change事件进行同步
• .number：输入值转为数值类型
• .trim：自动过滤用户输入的首尾空白字符
• .prevent：拦截默认事件，比如submit将会提交并重载表单，默认事件虽然是冒泡后开始，但不会因为.stop阻止事件传递而停止
• .passive：xx事件的默认行为将会立即触发，而不会等待其完成。

这是什么意思呢？
.passive这个修饰符会执行默认方法。你们可能会问，明明默认执行为什么会设置这样一个修饰符。这就要说一下这个修饰符的本意了。

       > 【浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认行为，所以浏览器本身是没有办法对这种场景进行优化的。这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿。】

       > 通俗点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上.passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。

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

注：passive和prevent冲突，不能同时绑定在一个监听器上。

`passive`修饰符尤其能够提升移动端的性能（不要把`.passive`和`.prevent`一起使用，因为`.prevent`将会被忽略，同时浏览器可能会向你展示一个警告。请记住，`.passive`会告诉浏览器你_不_想阻止事件的默认行为。）