vue 加载时掉用mounted_Vue请求初始化数据放在Created还是Mounted?

1,首先我们看下官网对created和mounted这个2个生命周期怎么定义的:

created:

(在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。---官方贴的)

created.png

mounted:

(el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。---官方贴的)

mounted.png

2、然后我想问下,Vue的生命周期还有那一些?

是不是有以下生命周期:

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

activated

deactivated

beforeDestroy

destroyed

errorCaptured

(这个很多我都没有用过。--(;′⌒`)---);

3、我想问问大家页面请求初始化数据跟Vue的生命周期有什么关系?

我的答案是没有很大的关系(个人观点)--如果有疑问可以找我聊聊

4、很多人跟我说初始化放在Mounted里面, 我问她(他)们为什么?她(他)们回答说因为这个时候DOM初始化渲染好啦。然后我继续问DOM初始化渲染和请求初始化数据有什么关系?他们会说可以显示请求出来的数据啦。(大家觉得有冲突吗?)

--DOM初始化渲染和请求初始化数据并没有什么冲突好吗!

5、让我们在看看前面的Vue生命周期

a、beforeCreate:

(在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。---官方贴的)

beforeCreate.png

b、beforeMount:

(在挂载开始之前被调用:相关的 render 函数首次被调用。---官方贴的)

beforeMount.png

看了这个2个我们继续分析:

我们请求回来的初始化数据或者基础数据是不是需要挂在Vue的Data上面?(是的,需要√)

然后我们继续beforeCreate的时候Data有没有生成?(答案是:没有。×)

--所以这一步是无法把数据挂到Vue的Data上面的

然后我继续看created的时候Data有没有生成?(答案是:生成啦。√)

--所以这一步我们是可以把数据挂到Vue的Data上面的,是不是可以放在这里啦?

--是的,可以放在这里啦。所以最后结论就是放在created里面。(仅发表个人的意愿,如果有不妥的请勿喷)

---补充

有人问我因为请求数据是异步的,为什么不可以放在beforeCreate,等请求完成啦Vue的data不就生成的吗? 答案是可以的。的确是;但是你不能把你需要的初始化数据的请求放在一个Vue的Methods里面, 因为这个时候是无法获取到Methods的函数的。所以你要这样写:

beforeCreate:function(){

server.list1({

page:1,

row:25

},function(res){

this.list1 = res;

},this);

server.list2({},function(res){

this.list2 = res;

},this);

}

所以本人建议放在created里面:

created:function(){

this.queryList1();

this.queryList2();

this.queryList3();

}

个人喜好把~~~~!!!!!

如有问题,可以加Q讨论哦:1366379285,加好友备注“简书”

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值