本人使用vue时间不长，完整的项目算是做完了2个。现在写一些关于使用vue的心得和总结吧。我发现只有总结之后，才会记忆深刻，下次避免出现同样的错误。
子组件和父组件的加载顺序
思考到这个点上，主要原因是我遇到了这样一个问题：
有一个lables的共同内容，很多个页面都在用，并且数据都是一样的。
所以最开始的时候我把数据请求放在了子组件里面，给这个label的list赋值的操作也放在了子组件里面。如此一来api就只需要请求一次，不用重复请求和操作。这个在当时写的觉得是没有问题的。
但是我发现父组件里面也有很多请求，需要子组件加载完成之后再从父组件的数据里进行匹配。
为了解决这个问题，我就一直在思考，如何让子组件先于父组件加载。
但是google和百度了一圈之后发现：在vue里面，父组件的渲染肯定是会先于子组件的。（我个人的理解是：子组件需要挂载到父组件的虚拟DOM节点上，所以必然是先父后子）。
所以这个思路是不对的。
还有一个办法：让子组件加载完成以后，在promise 的then里面写一个emit出来，告诉父组建，这时候父组件才开始去加载父组件的内容，然后和子组件进行匹配。
这个办法是可以，但是有点笨。
中间我也尝试过用vuex来存数据，方便共同存取。这中间也遇到过一个问题，很多时候vuex不能在未进行操作的时候取到初始值，他需要有显性操作（比如click之类的，才能顺利的修改状态），但是我很多的内容都是需要获取list里面的第一项然后拿着这个第一项进行另外一个请求，我的bug就在于我取到的这个第一项是我上次操作过的值，不知道为什么没有及时更新。所以这个方法也不是很理想。
过了很久，大概2周多吧，这中间我陆陆续续修改了很多关于这个子组件和父组件加载先后的bug。
终于有一天我突然醒悟：为什么不把子组件里面的请求拿到父组件里面来？子组件只负责自己的内部的一些交互，如果很多地方都要用到它的赋值的话，那么这个赋值可以考虑写在父组件里面（比如子组件请求到一个list，需要把list 的第一项的id传给父组件的某个item的初始值，方便页面一加载进来就能拿到第一个的初始数据）
所以：最好的方案就是：子组件只负责UI或者自己的功能，如果要通过api请求的数据和外界进行交互的话，最好是把请求写在外面，再赋值给子组件。这样很避免很多不必要的错误。
页面的api请求一定要放在mounted里面，不要放在created里面
我一直以来觉得created和mounted没有什么差异，生命周期都是挨着的，在实际运用的时候基本只用created，把那些页面初始化的时候做的操作都写在了created里面。
遇到一个问题：
我的sidebar是用router做的，点击每一个item都需要去进行不同的页面请求，这是正常的需求噻。
但是我发现我的sidebar点击的时候，反应非常慢，很多时候有卡顿。
我一直以为是网络请求时间过长，我把注意力放在了优化我的api请求，尽量减少网络请求，压缩图片，异步加载，还有减少我vandor.js的体积上面。但是我做了很多优化，服务端也做了很多优化之后，实际上还是有一些卡顿。
直到有一天我在思考父子组件的加载顺序的还是，我才想到把两个请求，一个写在mounted里面，一个写在created里面。发现两个页面的卡顿完全不一样。
原来这个时候我才发现，created的时候，是完成页面的DOM渲染，mounted的时候是挂载成功后做的操作，这时候所有的DOM已经生成了再去进行网络请求，不会影响页面的生成，但是如果放在created里面的话，组建会在api请求完成之后才开始渲染页面。这两者在网络良好的时候差距是不大，但是一旦遇到网络问题的时候，sidebar切换的速度有很明显的差异。
把所有的请求放在mounted里面才是正解
我也真的是蠢啊！
总的来说，写程序其实思维比动手重要，思维清晰的话，代码自然就行云流水一样出来了，对，就和写文章一样。就算被一个操作卡住了的话，至少知道自己的问题在哪儿。这对于缺乏工程思维的我来说非常的重要
先写到这里吧，反正也没别人来看，乱点就乱点吧！
网友评论