问题总结：调用接口对页面数据的实时动态改变不用刷新页面的问题。

解决方案：使用computed计算属性和watch监听属性

computed具有缓存性，在这个页面对用户数据中有很好的性能

因为computed具有缓存性页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数

computed: {
  /**点击选项选择对应的职位 */
  getTeacher() {
      if (this.screen.userTypeTypeName == "全部") {
        return this.teachers;
      } else {
        let technical = []; //接收数据
        /**从所有用户中筛选出当前对应的角色 */
        this.teachers.forEach(item => {
          if (item.userTypeTypeName == this.screen.userTypeTypeName) {
            technical.push(item);
          }
        });
        return  technical;
      }

  }
},

getTeacher是我设置的选择班级显示的对象，computed会根据班级名称计算getTeacher的数据，这样就能实现页面数据的实时动态改变了。

效果图1：

效果图2：

项目感悟：

1.一个项目的完成需要不断的测试检查，经常使用vue的调试工具查看vue项目中组件传递的数据结构。

2.项目的组件化能让越来越庞大、臃肿的代码，简洁明了，一个一个的组件可以重复使用，提高了代码的重用性。

3.项目的组件会常用到computed计算属性和watch监听属性要进行了解。

4.随着项目的开发，不断的修改优化，我的代码写的越来越规范，也渐渐的养成了多注释习惯。

系统功能：

1.班级管理：新增班级，删除班级，修改班级。

2.学生管理：通过班级名称筛选班级学生，新增学生，编辑学生，删除学生。

3.用户管理：通过角色筛选用户，新增用户，编辑用户，删除用户。

4.用户角色：可以拖拽排序角色顺序，新增角色，编辑角色，删除角色。

5.修改密码：修改登入用户密码。

6.老师出卷：录入选择题，修改选择题。

目前的系统功能