vue中keep-live使用click-outside

<keep-alive>
    <router-view/>
</keep-alive>

頁面,在這裏已經定義了自定義指令，click-outside,既點擊指令綁定元素的外部觸發

<template>
<div >
outside
</div>
<div @click="handleClick" v-click-outside="handleClickOutside">
    <span v-if="show">page</span>
</div>
</template>
<script>
    export default {
        data() {
            return {
                 show: true,
            }
        },
        methods: {
            handleClickOutside(){
                this.show = false
            },
            handleClick() {
                this.show = true
            }
        }
    }
</script>

這裏就有一個問題了，當元素綁定了click-outside 以後，那麼只有等元素註銷纔會將這個指令註銷掉。
但因爲keep-alive 的緣由，路由切換並不會註銷這個route-view,因此只要你不點擊綁定out-side元素時，那麼一直會觸發這個事件。
對性能影響不大（應該不大），在element-ui中的el-dropdown 也會一直觸發這個事件。
在項目中我在out-side中一直console.log了一個字符串，無論頁面怎麼切換，只要有out-side指令的頁面沒有註銷，那麼無論你點擊哪裏都會觸發這個事件。
一直console.log，這個就使人有點不舒服了。爲了工做的溫馨性，我搜索了這個問題，發現除了註銷元素，就沒有其餘方法了。
無奈，就在keep-alive的生命週期函數中deactivated中經過殺出了這個綁定事件的元素，在activated中插入這個元素

<template>
<div >
outside
</div>
<div v-if="inThisPage" @click="handleClick"  v-click-outside="handleClickOutside">
    <span v-if="show">page</span>
</div>
</template>
<script>
    export default {
        data() {
            return {
                 show: true,
                 inThisPage: true
            }
        },
        methods: {
            handleClickOutside(){
                this.show = false
            },
            handleClick() {
                this.show = true
            }
        },
        deactivated() {
            this.inThisPage = false
        },
        activated() {
            this.inThisPage = true
        }
    }
</script>