为什么react一般在componentDidMount发送ajax,而vue一般在created发送ajax?

react官方文档建议我们在componentDidMount阶段请求后台数据

this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.

vue官方例子却在created阶段请求数据 https://cn.vuejs.org/v2/examp...
为什么不在mounted阶段?

到底在哪个阶段请求数据初始化界面最佳?

阅读 6.3k
4 个回答

关于react为什么推荐在DidMount中发送请求可以看下这个:
https://stackoverflow.com/que...

个人愚见:

  1. 之所以react推荐在componentDidMount钩子中使用而不是componentWillMount的原因:因为请求是异步的,所以无论你放在两个中的任何一个里面,几乎绝对都会在组件渲染之后,再进行数据渲染,也就是说避免不了二次渲染(第一次渲染为默认值,第二次为请求后的数据渲染),所以效果上放到哪里都一样,但是在DidMount中可以使用refs了。然后重要的是(是在Stack Overflow中的回答看到):未来的react版本可能会对componentWillMount进行调整,可能在某些情况下触发多次,所以官方是推荐在componentDidMount中进行请求。 当然放到willMount中可能会快那么几毫秒,毕竟先运行嘛。。。

  2. vue的渲染前的钩子函数比react多两个:beforeCreat与created。而vue的例子为什么在created中写的,可能是因为是个demo也没有考虑那么多。一样的道理,无论放到beforeCreat、created或者beforeMount中也同样避免不了二次渲染,差别也可能是那么几毫秒

created阶段,页面template已经渲染,但是data里面的变量还没挂载到template上面;
mounted阶段,页面template已经渲染,data里面的变量已经挂载到template上面;
两个阶段发送请求,对渲染结果无影响,
但是created会比mounted快请求那么一点点
所以一般在created阶段请求数据

//created
<template>{{a}}</template>
//mounted
<template>hi</template>

data(){
    return {
        a:'hi'
    }

综合楼上componentDidMount实在页面第一次渲染之后,这个时候插入数据是最好的,componentWillMountWill一般实在页面渲染之前做一些处理

    react的componentDidMount被调用的时候,组件已经被装载到DOM树上了,可以放心获取渲染出来的任何DOM,所以在这个阶段用AJAX获取数据来填充组件内容更为妥当。

对比一下:
created:获取数据→组件DOM渲染→填充数据
componentDidMount:组件DOM渲染→获取填充数据

个人认为在组件挂载到DOM以后再请求数据并填充更好一点。

当然也不是绝对。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题