Vue

长列表性能优化

当只是想纯粹的展示数据时，这时候可以通过禁止Vue劫持数据来减少组件初始化的时间。

export default{
    data: () => ({
        users: {}
    }),
    async created() {
        const users = await axios.get('/api/user');
        this.users = Object.freeze(users);
    }
}

销毁事件

Vue组件销毁时，会自动清理它与其它实例的关联，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。如果使用了addEventListener等方式是不会自动销毁的，需要手动清理。

created(){
    addEventListener('click', this.click, false)
},
beforeDestroy(){
    removeEventListener('click', this.click, false)
}

路由懒加载

进入首页时，如果加载的资源过多，会导致白屏，使用路由懒加载，只有路由被访问的时候才加载，能大大提升首页显示的速度。

const router = new VueRouter({
    routes: [
        {
            path: '/foo',
            component: () => import('./Foo.vue')
        }
    ]
})