使用vue做的一个查询页面，在页面打开时想让它传一些默认的参数到后台进行查询，例如传最近七天的日期格式。发现在打开页面的时候并未按预想的传值过去。经过数次尝试，终于发现了问题所在。

原来对vue的生命周期使用有误，原始的写法如下:

data:{
      label: "",
      value1: "",
      account: 0,
      checkDate: {
        time_arr: [],
        begintime: "",
        endtime: ""
    }
  },
  watch: {
  },
  created: function() {
    this.search();
  },
  methods: {
   search:function(){

  }
 },
  mounted() {
    this.getData();
  }

search方法负责请求数据，之前是写在了created里，这个显然是不行的，created代表了vue的实体被创建好，此时并没有和界面绑定好，当然取不到值了。解决办法是把这个search放到mounted里，这就代表等界面上值绑定好再触发。

链接

created 与 mounted 的区别

created 钩子里组件实例已创建、数据已初始化，但 DOM 还不存在；mounted 才是 DOM 挂载完成的信号。需要在请求里携带的默认值，放在 created 里请求时可能还没赋上（比如默认日期），页面打开就会漏传。

  • 纯取数（不依赖 DOM）放 created 没问题，但前提是参数默认值已在 data 中静态写死；
  • 默认参数由计算或插件（如日期控件）生成时，请求改放 mounted，确保先有值再请求；
  • 需要 DOM 的初始化（图表、滚动绑定）一律放 mounted；
  • 代码评审时看到 created 里发请求，先检查它的参数是不是"自身 data 已就绪"。

相关阅读

参考资料