关于前端框架vue，react，等双向绑定框架写后台管理系统查询列表非常容易犯的错误提醒

最近在做管理后台系统不经意间发现了一可能百分之80的人都容易犯的一个错误，如下图

image.png

是一个用vue开发的标准的后台管理系统。
我们上图的输入框一般会使用vue的双向绑定，这样就会导致一个问题就是我们即使不点击查询仅仅是填写内容和选择下拉框，去点击下一页请求数据也会带着我们填写的查询字段的内容执行查询，因为我们的双向绑定在我们修改的时候已经去将搜索的数据源改变，导致出现查询问题！
建议在点击查询的时候将双向绑定的数据进行重新copy一份使用copy数据进行list查询参数，并且查询时重新赋值页码字段或者使用watch监听页码重新赋值

//如下例子listQuery是查询绑定字段
listQuery: {
        pageNum: 1,
        pageSize: 10,
        test1:'',
        test2:''
      }
//在点击查询按钮需要进行copy  这里的exportData是我的导出参数和列表请求参数只有在点击查询才会赋值
handleFilter() {
      this.listQuery.pageNum = 1
      this.exportData = this.$common.deepCopy(this.listQuery)
      this.getList()
    },
//注意这样页码分页会失效 建议在请求列表之前页码重新赋值或者使用watch监听

watch: {
    'listQuery.pageNum': {
      handler(n, o) {
        this.exportData.pageNum = n
      },
      deep: true
    }, 'listQuery.pageSize': {
      handler(n, o) {
        this.exportData.pageSize = n
      },
      deep: true
    }
  },