2. 程式人生 > >關於vue元件的destory和事件傳遞的一些問題

關於vue元件的destory和事件傳遞的一些問題

阿新 • • 發佈：2018-12-17

事情是這樣的，遇到了一個問題：

使用vue進行開發的時候，在一個元件中使用事件匯流排進行事件監聽之後，當元件銷燬後該事件依然被監聽。

背景

vue對於跨元件的事件監聽處理有一個逐漸變遷的過程。

$dispath和$broadcast

在新版vue中廢棄了舊版的一種事件傳遞方式。使用dispath和broadcast兩種方式進行事件的傳遞響應。

  • dispath

    是由子元件發起事件通知，向其父元件鏈中尋找對應的事件監聽。直到找到最近的父元件的一個事件監聽之後停止尋找，除非監聽器返回true。(如果該子元件存在對該事件的監聽也會被觸發)

    Usage: Dispatch an event, first triggering it on the instance itself, and then propagates upward along the parent chain. The propagation stops when it triggers a parent event listener, unless that listener returns true. Any additional arguments will be passed into the listener’s callback function.

  • broadcast

    則是由父元件向其子元件中傳遞訊息，在子元件鏈路中找到事件監聽之後，停止尋找，除非監聽器返回true

    Usage: Broadcast an event that propagates downward to all descendants of the current instance. Since the descendants expand into multiple sub-trees, the event propagation will follow many different “paths”. The propagation for each path will stop when a listener callback is fired along that path, unless the callback returns true.

後來這種方案就被廢棄了。因為

因為基於元件樹結構的事件流方式實在是讓人難以理解，並且在元件結構擴充套件的過程中會變得越來越脆弱。這種事件方式確實不太好，我們也不希望在以後讓開發者們太痛苦。並且 d i s p

a t c h 和 broadcast 也沒有解決兄弟元件間的通訊問題。

後來的設計也就改成了子元件使用$emit可以通知父元件，然後父元件在該元件的子元件上用@事件名稱監聽回撥。但是這種方式無法進行更廣泛的事件通知監聽。官方文件建議在簡單的情況下可以使用使用全域性vue例項的方法進行事件通知。

使用vue事件匯流排

在簡單情況下，我們可以新建一個全域性的vue例項，使用$on, $off和$emit三個函式構建一個事件通知體系。

let bus = new Vue()

... A Vue Component
methods: {
    hello () {
        bus.$emit('eventName')
    }
}
... B Vue Component
methods: {
    mounted () {
        bus.$on('eventName', () => {
            // answer the event
        })
    },
    destoryed () {
        bus.$off('eventName')
    }
}

使用這種方式就可以實現在整個工程中的事件通知操作。

回到問題

有一次筆者在進行開發的時候沒有對事件進行解綁的操作，也就是沒有在destoryed函式中呼叫$off進行事件解綁。事件中包含http請求的函式。然後在後續的操作中有一些重新掛載該元件的操作。檢查devtool的network時發現多次發出該請求。定位後發現是$on的事件被多次執行。遂在destoryed中$off掉該事件則沒有該問題。

筆者於是產生了些疑惑，決定模擬一下該問題並去vue的原始碼一探究竟，畢竟vue的原始碼也就萬把來行嘛(手動滑稽)

情景復現

編寫了一段程式碼復現了上文中出現的問題。不是特別長就貼上來了。

復現程式碼

<html>
    <body>
        <div id="app">
            <button v-on:click="hide">{{ message }}</button>
            <my v-if="show"></my>
            <my v-if="show"></my>
            <my v-if="show"></my>
            <button v-on:click="print">觸發匯流排事件</button>
            <button v-on:click="printBus">列印事件匯流排</button>
            <button v-on:click="printApp">列印app例項</button>
        </div>
        <script src="./vue.js"></script>
        <script type="text/javascript">
            let bus = new Vue()
            Vue.component('my', {
                data () {
                    return {
                        nowIndex: 1
                    }
                },
                template: `
                    <div>
                        元件運算元：{{ nowIndex }} </br>
                        <button v-on:click="nowIndex ++">新增</button><button v-on:click="selfDestory">呼叫元件destory函式</button>
                    </div>
                `,
                mounted () {
                    bus.$on('eventone', value => {
                        console.log('id: ', this._uid, ' \'s nowIndex is', this.nowIndex)
                    })
                },
                destroyed () {
                    console.log('hello destoryed')
                },
                methods: {
                    selfDestory () {
                        this.$destroy()
                    }
                }
            })
            let app = new Vue({
                el: '#app',
                data: {
                    message: '隱藏',
                    show: true
                },
                methods: {
                    hide () {
                        this.show = !this.show
                        if (this.show) {
                            this.message = '隱藏'
                        } else {
                            this.message = '顯示'
                        }
                    },
                    print () {
                        bus.$emit('eventone')
                    },
                    printBus () {
                        console.log(bus)
                    },
                    printApp () {
                        console.log(this)
                    }
                }
            })
        </script>
    </body>
</html>

復現操作

  1. 先對頁面進行操作之後，觸發匯流排事件

    這裡寫圖片描述

  2. 隨後取消三個元件的掛載

    這裡寫圖片描述

  3. 再度掛載三個元件

    這裡寫圖片描述

    可以看出控制檯依舊打印出了三個已經通過v-if取消掛載的元件，destoryed函式也被觸發了

提出問題

  1. 為什麼事件會觸發多次？
  2. 為什麼已經銷燬的元件裡面的事件依舊會被觸發？

尋找答案

  1. 先去到了vue的事件繫結函式$on中

    Vue.prototype.$on = function (event, fn) {
    var this$1 = this;

    var vm = this;
    if (Array.isArray(event)) {
        for (var i = 0, l = event.length; i < l; i++) {
            this$1.$on(event[i], fn);
        }
    } else {
        (vm._events[event] || (vm._events[event] = [])).push(fn);
        // optimize hook:event cost by using a boolean flag marked at registration
        // instead of a hash lookup
        if (hookRE.test(event)) {
            vm._hasHookEvent = true;
        }
    }
    return vm
};

    這段程式碼其實已經比較清晰了，通過(vm._events[event] || (vm._events[event] = [])).push(fn)可以看出vue對事件監聽的繫結方法其實是將同名事件的處理函式存放到一個數組中後續按存放順序呼叫。所以事件可以被觸發多次。

  2. 再看一下vue的銷燬元件函式。

    Vue.prototype.$destroy = function () {
    var vm = this;
    if (vm._isBeingDestroyed) {
    return
    }
    callHook(vm, 'beforeDestroy');
    vm._isBeingDestroyed = true;
    // remove self from parent
    var parent = vm.$parent;
    if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {
        remove(parent.$children, vm);
    }
    // teardown watchers
    if (vm._watcher) {
        vm._watcher.teardown();
    }
    var i = vm._watchers.length;
    while (i--) {
        vm._watchers[i].teardown();
    }
    // remove reference from data ob
    // frozen object may not have observer.
    if (vm._data.__ob__) {
        vm._data.__ob__.vmCount--;
    }
    // call the last hook...
    vm._isDestroyed = true;
    // invoke destroy hooks on current rendered tree
    vm.__patch__(vm._vnode, null);
    // fire destroyed hook
    callHook(vm, 'destroyed');
    // turn off all instance listeners.
    vm.$off();
    // remove __vue__ reference
    if (vm.$el) {
        vm.$el.__vue__ = null;
    }
    // release circular reference (#6759)
    if (vm.$vnode) {
        vm.$vnode.parent = null;
    }
};

    筆者看這段程式碼原先以為vue通過這個函式對元件進行了銷燬，可是事情並沒有想象中的這麼簡單。甚至有那麼點疑惑。於是決定在控制檯試一下這個方法。

    這裡寫圖片描述

    從圖可以看出呼叫$destroy()函式後，vue元件確實走了destoryed()方法，也就是說確實成功銷燬了。而此時該元件的事件響應依然被觸發，而且此時瀏覽器上的dom並沒有被移除。於是又回去看原始碼，發現有remove和patch兩個類似移除的函式，這裡篇幅問題不再貼上原始碼了，不過看完後發現後整個刪除邏輯只是把虛擬dom給刪除了而已，並沒有刪除已經渲染的dom。文件中給出的解釋是

    完全銷燬一個例項。清理它與其它例項的連線，解綁它的全部指令及事件監聽器。

    文件這句話其實是有點迷的，個人覺得後面一句是在對第一句的解釋。$destory函式只是在清理它和其它例項的連線和解除指令以及事件監聽器，還有斷掉虛擬dom和真實dom之間的聯絡。而並真正地沒有回收這個vue例項。而且由於vue的$on只是綁定了函式，\$destory也沒有將註冊在其它vue例項的事件給銷燬掉，所以這個及時destory後匯流排的事件依舊被執行，而且由於註冊事件的vue例項沒有被回收，所以還可以進行常規的資料互動操作。

    至於vue例項什麼時候回收，這其實本質上是一個js的記憶體回收問題。只要存在還有其他物件對該例項的引用的話，這個例項還是不會被回收的。噹噹前程式沒有對這個例項的引用的時候，這個vue例項就會被釋放了。

相關推薦

關於vue元件的destory和事件傳遞的一些問題

事情是這樣的，遇到了一個問題： 使用vue進行開發的時候，在一個元件中使用事件匯流排進行事件監聽之後，當元件銷燬後該事件依然被監聽。 背景 vue對於跨元件的事件監聽處理有一個逐漸變遷的過程。 $dispath和$broadcast 在新版vue中廢棄了

Vue元件封裝 引數傳遞和事件傳遞

引數傳遞 子元件先定義好接收的引數和事件 <div > {{title}} <div class="row"> <Button icon="md-refresh" @click="refresh()" >重新整理&l

管窺MVVMLight Command參數綁定和事件傳遞

exception SM Matter public 功能 model ble ont sep 原文:管窺MVVMLight Command參數綁定和事件傳遞前言 由於在實際項目中，業務功能的增加導致軟件開發規模在逐漸變大，所以我準備找個Silverlight框架來組織當

Vue元件中值的傳遞

 Vue元件中值是如何傳遞的？ 一、父子元件傳值 1. 在Vue的官方文件中通過prop向子元件傳遞資料有講解 下面圖片是我對Vue元件傳值的理解 （1）Vue例項中的資料data——>posts陣列儲存資料，可以通過元件標籤<my-componetn&g

子元件向父元件傳值(事件發生在子元件中)和事件

專案中一個功能 可能在很多地方都有出現 那麼此時我們肯定是要抽成一個元件, 如果此功能中需要傳值呢 我覺得子元件向父元件傳值, 父元件呼叫子元件裡面的事件, 父元件向子元件傳值云云…. 前兩者真的是需要仔細點琢磨 專案有個需求: 需要對編號:中的值進行純數字驗證並且進行搜尋,

VUE元件之間的資料傳遞

 Vue 的元件作用域都是孤立的，不允許在子元件的模板內直接引用父元件的資料。必須使用特定的方法才能實現元件之間的資料傳遞 一、父元件向子元件傳遞資料 在 Vue 中，可以使用 props 向子元件傳遞資料。   子元件部分： 這是 head

vue元件中的數值傳遞

怎麼傳值？ 1.利用bus,進行vm.$ emit() vm.$on() 2.使用mounted在數值渲染前，進行數值修改 <!DOCTYPE html> <html> <head> <meta charset

vue元件之間資料的傳遞

簡單一點， 把根元件作為父元件。1.1.1. 父子之間不能正常共享資料的  1.1.2. 父元件把資料傳遞給子元件：步驟步驟：1.1.2.1. 在父元件中，正常定義自己的資料。  1.1.2.2. 在父元件的模板中通過屬性繫結把資料繫結到子元件上。1.1.2.3. 在子元件中

47.vue元件上定義事件需要用到native

<template> <div> <my-button @click.native="buttonClick"></my-butt

Android 自定義檢視容器控制元件攔截ontouch事件傳遞給其子控制元件

自定義View 控制元件： /* * * 一個檢視容器控制元件 * 阻止 攔截 ontouch事件傳遞給其子控制元件 * */ public class InterceptScrollCon

Vue 元件之使用props傳遞資料

元件不僅僅是要把模板的內容進行復用，更重要的是元件間的通訊。通常父元件的模板中包含子元件，父元件要正向的向子元件傳遞資料或者引數，子元件接收到後根據引數的不同來進行對應的渲染。這個正向的資料傳遞在vue元件中就是通過props來實現的。 在元件中，我們首先需要

vue實踐之兄弟元件之間資料和事件的傳遞

    使用vue進行元件化開發時，經常會遇到需要在業務元件中監聽某個公共元件的資料變化和事件觸發。大致歸類為兩種場景： 業務元件為公共元件的直接父元件（父子關係） *事件傳遞： 子元件定義一個方法，方法中通過this.$emit(‘event’)方式將觸發

vue中動態載入元件+開發者模式+JS引數值傳遞和引用傳遞

今天寫vue裡面通過介面反參動態載入元件時候 跟著同學。。。學習到了 一、先說說vue 內建元件 component 的用法 component元件可以來專門用來進行元件的切換，使用is來繫結你的元件名，本次系統寫的比較簡單。。。 此處：:is='元件名'可以直接條用元件。 因為全頁面有十個元件載入，所

Vuejs 元件之 $emit 和 v-on 的事件傳遞

<!-- v-on 偵聽元件事件，當元件觸發事件後進行事件處理 -->   <!-- $emit 觸發事件，並將資料提交給事件偵聽者 -->   <!DOCTYPE html> <html lang="en">

Vue父子元件之間的呼叫和資料傳遞

Vue父子元件之間的呼叫和資料傳遞 父子元件的定義 兩個檔案的父子元件 父子元件的定義 vue的官網上寫了一些關於父子元件的定義呼叫及值的傳遞。這裡我就不做過多的贅述了。我只說一下我在開發中遇到的一些小問題。 兩個

vue和mvvm的一些小區別

後端 模型 掃描 公司 訪問 vue 出了 vue.js 監聽器 Vue.js 和 MVVM 小細節 MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式，其核心是提供對View 和 ViewModel 的雙向數據綁定，這使得

iOS-事件傳遞和響應機制

系統 || 聯系 轉換 face dds average 問題 特殊 轉自：http://www.jianshu.com/p/2e074db792ba 前言： 按照時間順序，事件的生命周期是這樣的：　　事件的產生和傳遞（事件如何從父控件傳遞到子控件並尋找到最合適的view

關於VUE的安裝和一些簡單屬性

等待 -html pre html 對象 index 初始 函數傳參 for 安裝vue 安裝前初始化package.json 主要用來描述自己的項目,記錄安裝過得文件有哪些,在當前文件夾下生產json 安裝vue --save(-S)代表項目依賴 --save-dev

關於npm警告fsevents和vue-cli項目中的一些問題，持續更新

span .com 就會 window font main win 是我 cli 1.install一個npm包的時候，總是會報這個警告； 網上查資料知道，這個fsevents是mac下用的，windows忽略即可； 2.關於在main.js中引入less文件的問題

使用 DOM 和事件來提供一些視覺效果

鼠標移出 程序 out why can brush 顏色 color 視覺效果 code: <html> <head> <title>Introduction to the DOM</title> <s