Vue高级-hook:beforeDestroy

vue中hook的两点使用

1. 在同一个组件中

场景：在mounted中添加一个监听，需要在beforeDistroy中移除这个监听，如果不想再写个beforeDistroy去实现，可以使用hook

mounted() {
    window.addEventListener('online', this.handleOnline);
    this.$once('hook:beforeDestroy', function() {
        window.removeEventListener('online', this.handleOnline);
    });
},

在任意地方用 this.$on/$once(‘hook:生命周期’，callback),就可以监听到生命周期的变化

2，在父组件监听子组件的生命周期方法

//父组件
<child @mounted="handleChildMounted" />

// 子组件
mounted() {
    this.$emit('mounted');
}

更好的方式：

//父组件
<child @hook:mounted="handleChildMounted" />

handleChildMounted() {
    console.log('父组件监听到 mounted 钩子函数 ...');
}

// 子组件
mounted() {
    console.log('子组件触发 mounted 钩子函数 ...');
},
// 以上输出顺序为：
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...

如果用的是第三方的组件库，需要在组件发生改变时做一些操作，但这个组件还没有实现@change事件，这时候可以使用hook。

vue中使用$.once(‘hook:beforeDestory’,() => {})清理定时器

方法一：

<script>
export default {
    data() {
        return {
            timer: null
        };
    },
    mounted() {
        this.timer = setInterval(() => {
            // 具体执行内容
            console.log('1');
        }, 1000);
    },
    beforeDestory() {
        clearInterval(this.timer);
        this.timer = null;
    }
};
</script>

存在的问题：
1、vue实例中需要有这个定时器的实例，感觉有点多余;
2、创建的定时器代码和销毁定时器的代码没有放在一起，通常很容易忘记去清理这个定时器，不容易维护。

方法二：直接在需要定时器的方法或者生命周期函数中声明并销毁
实现：

<script>
export default {
    methods: {
        fun1() {
            let timer = setInterval(() => {
                // 具体执行代码
                // ...
            }, 1000);
            this.$once('hook:beforeDestory', () => {
                clearInterval(timer);
                timer = null;
            });
        }
    }
};
</script>