Vue的几个开发技巧

ゞ浴缸里的玫瑰 2023-07-23 03:34 8阅读 0赞

1、在父组件中绑定子组件的生命周期

我们一般的写法是在子组件的mounted中调用异步方法获取相应数据进行渲染。当然，异步方法中的一些参数可以在路由中获取，也有可能必须通过父组件的props传递。当该组件的通用性较强时，异步调用的方法和接口都可能发生变化，因此我们希望子组件只负责渲染。这样，可以通过以下方法实现：

子组件：

export default {
        mounted() {
            this.$emit('getData');
        }
    }

父组件

其实还有一种简洁的方法，使用@hook即可监听组件生命周期，子组件内只需要负责渲染，同样的，created、updated等也可以使用此方法。

2、定时器解绑

有时候我们在页面挂载时需要使用到计时器，相应的，在页面销毁时需要清除定时器。下面的代码看起来没啥问题，但仔细一看，this.timer 唯一的作用只是能够在beforeDestroy内取到计时器序号，除此之外没有任何用处。

export default {
        mounted() {
            this.timer = setInterval(() => {
                // 相应操作
            }):
        },
        beforeDestroy() {
            clearInterval(this.timer);
        }
    }

这里，我们可以通过$on或者$once监听页面生命周期销毁来解决这个问题：

export default {
        mounted() {
            this.creatInterval(Date.now());
        },
        creatInterval(now) {
            let timer = setInterval(() => {
                console.log(now);
            }, 1000)
            this.$once('hook:beforeDestroy', function() {
                clearInterval(timer);
            })
        }
    }