欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問(wèn)題

 更新時(shí)間:2020年08月04日 11:51:08   作者:古蘭精  
這篇文章主要介紹了解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

vue的自定義指令是一個(gè)比較容易引起內(nèi)存泄漏的地方,原因就在于指令通常給元素綁定了事件,但是如果忘記了解綁,就會(huì)產(chǎn)生內(nèi)存泄漏的問(wèn)題。

看下面代碼:

directives: {
  scroll: {
  inserted (el, cb) {
   // 不是元素節(jié)點(diǎn) || 未設(shè)置回調(diào)函數(shù)
   if (el.nodeType !== 1 || !cb) return
   let direct = 'down'
   let rollHeight = 0

   let getScrollEventTarget = (target) => {
   while (target.nodeType === 1 && target.tagName !== 'BODY' && el.tagName !== 'HTML') {
    var overflowY = getComputedStyle(target).overflowY
    if (overflowY === 'scroll' || overflowY === 'auto') {
    return target
    }
    target = target.parentNode
   }
   return window
   }

   let targetNode = getScrollEventTarget(el)

   let scrollListener = () => {
   if (targetNode.scrollTop > rollHeight) {
    direct = 'down'
   } else {
    direct = 'up'
   }
   rollHeight = targetNode.scrollTop
   cb.value(rollHeight, direct)
   }

   el.unbindEventListener = () => {
   targetNode.removeEventListener('scroll', scrollListener)
   }
   targetNode.addEventListener('scroll', scrollListener)
  },
   // unbind (el) {
   // if (el.unbindEventListener) {
   // el.unbindEventListener()
   // }
  // }
  }
 }

起初,我忘記了些注釋的unbind方法,導(dǎo)致出現(xiàn)了內(nèi)存泄漏,給元素綁定的scroll方法,會(huì)一直存在內(nèi)存里。

導(dǎo)致出的情況,就是比如我進(jìn)了頁(yè)面滾動(dòng)到第3頁(yè),出去,再點(diǎn)一個(gè)頁(yè)面,當(dāng)滾動(dòng)到第4頁(yè)時(shí),將會(huì)請(qǐng)求2次,一次是上個(gè)頁(yè)面的第4頁(yè),一次是本次頁(yè)面的第4頁(yè),當(dāng)你退出,再進(jìn)一個(gè)頁(yè)面,當(dāng)滾動(dòng)到第5頁(yè)時(shí),將會(huì)請(qǐng)求3次(上上頁(yè),上頁(yè)和本頁(yè)),這就是典型的事件未解綁導(dǎo)致的內(nèi)存泄漏。

所以需要給元素解綁,好在vue指令提供了unbind鉤子函數(shù),

但是這里依然有個(gè)技術(shù)巧點(diǎn)就是:

1、我們scroll的元素可能是綁定的元素的父級(jí)等等,需要一層一層往上找

2、就是解綁的時(shí)候我們也需要找到那個(gè)父級(jí)元素等等,然后還需要remove對(duì)應(yīng)的方法,那么肯定不可能在unbind里再寫一次,所以就可以在insert鉤子函數(shù)里,給el綁定一個(gè)解綁事件el.unbindEventListener,在unbind鉤子函數(shù)里直接調(diào)用即可。

以上這篇解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Nuxt pages下不同的頁(yè)面對(duì)應(yīng)layout下的頁(yè)面布局操作

    Nuxt pages下不同的頁(yè)面對(duì)應(yīng)layout下的頁(yè)面布局操作

    這篇文章主要介紹了Nuxt pages下不同的頁(yè)面對(duì)應(yīng)layout下的頁(yè)面布局操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-11-11
  • Vue2.x如何解決Element組件el-tooltip滾動(dòng)時(shí)錯(cuò)位不消失的問(wèn)題

    Vue2.x如何解決Element組件el-tooltip滾動(dòng)時(shí)錯(cuò)位不消失的問(wèn)題

    這篇文章主要介紹了Vue2.x如何解決Element組件el-tooltip滾動(dòng)時(shí)錯(cuò)位不消失的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • vant中的toast層級(jí)改變操作

    vant中的toast層級(jí)改變操作

    這篇文章主要介紹了vant中的toast層級(jí)改變操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-11-11
  • Vue?事件處理函數(shù)的綁定示例詳解

    Vue?事件處理函數(shù)的綁定示例詳解

    這篇文章主要為大家介紹了Vue?事件處理函數(shù)的綁定示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02
  • antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式

    antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式

    這篇文章主要介紹了antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡效果

    Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡效果

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue?Electron實(shí)現(xiàn)輸入法自動(dòng)刷字?jǐn)?shù)功能詳解

    Vue?Electron實(shí)現(xiàn)輸入法自動(dòng)刷字?jǐn)?shù)功能詳解

    這篇文章主要介紹了Vue?Electron實(shí)現(xiàn)輸入法自動(dòng)刷字?jǐn)?shù)功能,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)C#有一定的幫助,感興趣的小伙伴可以跟隨小編一起了解一下
    2022-12-12
  • 詳解vue3自定義指令實(shí)現(xiàn)?v-focus?功能

    詳解vue3自定義指令實(shí)現(xiàn)?v-focus?功能

    在Vue3中,可以通過(guò)自定義指令來(lái)實(shí)現(xiàn)v-focus功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2025-05-05
  • 一文帶你吃透Vue3編譯原理

    一文帶你吃透Vue3編譯原理

    一直對(duì)編譯原理的東西都有一種恐懼感,感覺太難了,看不懂,打開vue3源碼看到編譯相關(guān)的代碼,直接嚇退。不要擔(dān)心,小編今天帶你一文吃透Vue3編譯原理
    2023-02-02
  • 基于Vue插入視頻的2種方法小結(jié)

    基于Vue插入視頻的2種方法小結(jié)

    本文通過(guò)兩種方法給大家介紹了基于vue插入視頻的方法,每種方法通過(guò)實(shí)例代碼給大家介紹的都非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-04-04

最新評(píng)論