vue组件被复用 视图无法更新问题

问题描述：在列表页点击新增按钮和点击修改按钮跳转的是同一个页面，但是组件会被复用 点击新建按钮跳转新建页面后 再点击修改按钮 由于路由相同 页面组件被复用 导致页面数据不更新 form表单取到的数据不会显示在页面上

解决思路：因为跳转修改页面会传一个userId 新增页面没有  所以通过watch监听路由参数变化： 1.当userId为undefined时，清空页面数据，即为新增页面

2.当userId有值且当前页面的userId与本次路由传参中的userId值不相同时 重新获取页面数据 

代码如下：

watch: {
  '$route'(to, from) {
      if (to.query.userId !== this.userId || to.query.userId == undefined) {
          this.formSubmit = {
              nickName: '',
              birthday: '',
              nation: '',
              sex: '',
              politicsStatus: '',
              healthCondition: '',
              schoolTag: '',
              education: '',
              major: '',
              post: '',
              postName: '',
              postMajor: '',
              roleIds: [],
              status: '',
              userName: '',
              password: '',
              deptId: '',
              address: '',
              email: '',
              phonenumber: '',
              idNumber: '',
              majorIn: [],
              isCant: [],
              isTrain: '',
              trainTime: '',
              avatar: '',
              workHistory: '',
              remark: '',
              userId: undefined,
          }
          if (to.query.userId !== undefined) {
               this.handleData(to.query.userId)
          }
       }
   }
},

清空页面数据时 如果直接通过this.formSubmit = { } 更改，数据回显时 input中的内容将不能更改 会出bug 能力有限 想不到其他方法 只能单独改