视图加载时如何重置Users模型数据？TypeScript场景实现

咱们先理清楚核心需求：在视图首次加载（或者每次进入视图时），把你的用户列表数据重置为最初的模拟数据。首先得先解决一个容易踩的坑——避免初始模拟数据被引用污染，然后再结合不同前端框架的生命周期来实现重置逻辑。

第一步：改造模拟数据的导出方式 #

你现在直接导出了list数组，但数组是引用类型，一旦你修改userList，原list也会跟着变，下次重置就拿不到真正的初始值了。所以咱们改成导出一个返回初始数据副本的函数：

import { Users } from '../../models/Users';

// 定义不可变的初始数据模板
const initialUserTemplate: Users[] = [
  {
    user_id: 1,
    email: 'test@tester.com',
    forename: 'Joe',
    surname: 'Bloggs',
    username: 'Joe',
    dob: new Date(),
    telephone: '0151111111',
  }
];

// 导出函数，每次调用都返回新的数组副本
export const getInitialUserList = (): Users[] => {
  // 用JSON序列化/反序列化做深拷贝，注意要把Date类型转回来
  return JSON.parse(JSON.stringify(initialUserTemplate)).map(user => {
    user.dob = new Date(user.dob);
    return user;
  });
};

为什么要处理Date？因为JSON.stringify会把Date对象转成字符串，所以咱们要手动转回到Date类型，保证数据类型正确。如果你的模型里还有其他复杂类型（比如自定义类），可以用类似的方式手动处理，或者用lodash.cloneDeep这样的工具库来简化深拷贝。

第二步：结合框架生命周期实现视图加载时重置 #

下面分几种主流前端框架的场景来写具体实现：

React（函数组件） #

在React函数组件中，用useEffect钩子监听组件挂载（对应视图首次加载），然后调用状态更新函数重置数据：

import { useState, useEffect } from 'react';
import { getInitialUserList } from './path-to-your-mock-file';
import { Users } from '../../models/Users';

const UserListComponent = () => {
  // 初始化状态为初始数据
  const [userList, setUserList] = useState<Users[]>(getInitialUserList());

  // 组件挂载时（视图首次加载）重置数据
  useEffect(() => {
    setUserList(getInitialUserList());
  }, []); // 空依赖数组表示仅在组件首次挂载时执行

  // 如果是路由组件，需要每次进入路由都重置，可以监听路由变化
  // import { useLocation } from 'react-router-dom';
  // const location = useLocation();
  // useEffect(() => {
  //   setUserList(getInitialUserList());
  // }, [location.pathname]);

  // 其他组件逻辑...

  return (
    <div>
      {/* 渲染用户列表 */}
    </div>
  );
};

export default UserListComponent;

Angular #

在Angular组件中，用ngOnInit钩子（视图初始化完成时）来调用重置逻辑：

import { Component, OnInit } from '@angular/core';
import { getInitialUserList } from './path-to-your-mock-file';
import { Users } from '../../models/Users';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  userList: Users[] = [];

  ngOnInit(): void {
    // 视图初始化完成后重置数据
    this.resetUserList();
  }

  // 封装重置逻辑，方便复用
  private resetUserList(): void {
    this.userList = getInitialUserList();
  }

  // 如果是路由组件，需要每次激活路由都重置，可以用Router的events监听
  // import { Router, NavigationEnd } from '@angular/router';
  // constructor(private router: Router) {}
  // ngOnInit(): void {
  //   this.router.events.subscribe(event => {
  //     if (event instanceof NavigationEnd && event.url.includes('/user-list')) {
  //       this.resetUserList();
  //     }
  //   });
  // }
}

Vue 3（Composition API） #

在Vue 3的<script setup>中，用onMounted钩子（视图挂载完成时）重置数据：

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getInitialUserList } from './path-to-your-mock-file';
import type { Users } from '../../models/Users';

const userList = ref<Users[]>([]);

// 视图挂载完成时重置数据
onMounted(() => {
  userList.value = getInitialUserList();
});

// 如果是路由组件，需要每次进入路由都重置，可以用路由钩子
// import { onBeforeRouteEnter } from 'vue-router';
// onBeforeRouteEnter((to, from, next) => {
//   next(vm => {
//     vm.userList.value = getInitialUserList();
//   });
// });
</script>

<template>
  <!-- 渲染用户列表 -->
</template>

关键注意事项 #

• 引用污染问题：一定要通过函数返回新的数据副本，不能直接复用原数组，否则修改数据后初始模板会被污染，下次重置就不是真正的初始值了。
• 生命周期选择：根据你的实际需求选择对应的生命周期钩子，如果是首次加载就用挂载钩子，如果是每次进入视图（比如路由切换回来）就监听路由变化。
• 深拷贝处理：针对Date这类特殊类型，要手动恢复类型，保证数据的正确性。

内容的提问来源于stack exchange，提问作者S_R