Vue的几个开发技巧

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

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

子组件：

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

父组件

<template>
    <div>
        <Child @getData="getData" :data="data" />
    </div>
</template>

 

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

<template>
    <div>
        <Child @hook:mounted="getData">
    </div>
</template>

 

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);
        })
    }
}