一、passive作用
詳情請參考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中關於addEventListener中的第三個參數;表示 listener
永遠不會調用 preventDefault()。如果 listener 仍然調用了這個函數,客戶端將會忽略它並拋出一個控制台警告。
二、原理
由於 touchstart 事件對象的 cancelable 屬性為 true,也就是說它的默認行為可以被監聽器通過 preventDefault() 方法阻止,那它的默認行為是什么呢,通常來說就是滾動當前頁面(還可能是縮放頁面),如果它的默認行為被阻止了,頁面就必須靜止不動。但瀏覽器無法預先知道一個監聽器會不會調用 preventDefault(),它能做的只有等監聽器執行完后再去執行默認行為,而監聽器執行是要耗時的,有些甚至耗時很明顯,這樣就會導致頁面卡頓。視頻里也說了,即便監聽器是個空函數,也會產生一定的卡頓,畢竟空函數的執行也會耗時。(這句話來源:https://www.cnblogs.com/ziyunfei/p/5545439.html)
三、vue中的passive修飾符作用
該修飾符表示就是設置{passive:true},表示處理事件函數中不會調用preventDefault函數,就會減少了額外的監聽,從而提高了性能;所以不能和.prevent修飾符一同使用,否則瀏覽器會報錯。