前端界面优化部分keep-alive和scroll

keep-alive可以在组件切换时，保存其包裹的组件的状态，使其不被销毁，防止多次渲染。其拥有两个独立的生命周期钩子函数 actived 和 deactived，使用keep-alive包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactived 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

keep-alive生命周期

生命周期执行顺序：
　　1、不使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> destroyed
　　2、使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> activated --> deactivated
　　3、使用keep-alive，并且再次进入了缓存页面的情况：beforeRouteEnter -->activated --> deactivated

被keep-alive包裹住的页面都会被缓存，如果想刷新部分内容要启用activated函数，用法同created，activated只有在被keep-alive包裹时会触发，activated函数一进入页面就触发

在app.vue中写入

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

vue 路由跳转记住滚动位置，返回时回到上次滚动位置

    mounted(){
        window.addEventListener('scroll', this.handleScroll);
    },

    activated() {
        if (this.scroll > 0) {
            window.scrollTo(0, this.scroll);
            this.scroll = 0;
            window.addEventListener('scroll', this.handleScroll);
        }
    },

    deactivated() {
        window.removeEventListener('scroll', this.handleScroll);
    },

    methods: {
        handleScroll() {
            this.scroll = document.documentElement && document.documentElement.scrollTop
        }

希望可以帮到一些刚入门的萌新