vue2 lodash函数27 节流的函数、防抖的函数、操作数组的一系列函数、操作对象的一系列函数（对象的深拷贝、浅拷贝）

App.vue

<keep-alive include="Home">
    <router-view />
</keep-alive>

router

　　index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home/Home'
// 安装VueRouter为vue的插件
Vue.use(VueRouter)
// 创建路由实例
const router = new VueRouter({
  // 路由数组的规则
  routes: [
    { path: '/', component: Home, meta: { isRecord: true, top: 0 } },
    { path: '/user', component: () => import('../views/User/User.vue') }
  ],
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: to.meta.top || 0 }
    }
  }
})

export default router

Home

<template>
    <div class="home-container">
        <van-nav-bar title="今日头条" fixed />
        <!-- disabled禁用属性  根据finished的状态禁用 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="finished">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <articleinfo v-for="item in artlist" :key="item.id" :title="item.title" :author="item.aut_name"
                    :comment="item.comm_count" :pubdate="item.pubdate" :cover="item.cover"></articleinfo>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
// api接口
import { ArticleListAPI } from '@/api/articleAPI.js'
// 组件
import articleinfo from '@/components/articleinfo.vue'
// lodash 提供了许多函数 节流的函数、防抖的函数、操作数组的一系列函数、操作对象的一系列函数（对象的深拷贝、浅拷贝）
import _ from 'lodash'
let fn = null

export default {
    name: 'Home',
    components: {
        articleinfo
    },
    data() {
        return {
            // 页码值
            page: 1,
            // 显示多少页
            limit: 10,
            // 文章的数组
            artlist: [],
            // 是否加载下一页数据，如果loading为true则不会触发事件
            loading: true,
            // 是否加载完数据，没有更多数据则把finished改为true
            finished: false,
            // 是否正常下拉刷新
            isLoading: false
        }
    },
    activated() {
        fn = this.recordTopHandler()
        window.addEventListener('scroll', fn)
    },
    deactivated() {
        window.removeEventListener('scroll', fn)
    },
    methods: {
        async ArticleList(isRefresh) {
            const { data: res } = await ArticleListAPI(this.page, this.limit)
            this.isLoading = false
            if (isRefresh) {
                // 下拉刷新更多则[新数据，旧数据]
                this.artlist = [...res, ...this.artlist]
            } else {
                // 上拉加载更多则[旧数据，新数据]
                this.artlist = [...this.artlist, ...res]
                this.loading = false
            }
            if (res.length === 0) {
                this.finished = true
            }
        },
        // 上拉加载更多
        onLoad() {
            this.page++
            this.ArticleList()
        },
        // 下拉刷新
        onRefresh() {
            this.page++
            this.ArticleList(true)
        },
        recordTopHandler() {
            return _.debounce(
                () => {
                    this.$route.meta.top = window.scrollY
                },
                50,
                { trailing: true }
            )
        }
    },
    created() {
        this.ArticleList()
    }
}
</script>

主要部分：

import _ from 'lodash'
let fn = null


activated() {
        fn = this.recordTopHandler()
        window.addEventListener('scroll', fn)
    },
    deactivated() {
        window.removeEventListener('scroll', fn)
    },


methods: {
        recordTopHandler() {
            return _.debounce(
                () => {
                    this.$route.meta.top = window.scrollY
                },
                50,
                { trailing: true }
            )
        }
    },