异步更新那点事儿。

wue & vueuse官方团队成员。

看一下群友投稿的问题。什么问题？就是它这边有一个组件，这个组件里面有个userID，然后这个userID通过props传给了子组件，子组件是userinfo，它里面是用来渲染用户信息的。渲染用户信息的同时，userinfo这个组件又暴露了一个方法，这个方法是用来获取最新的用户信息的，叫get userinfo。

get userinfo直接就用了props里面的user ID，是副组件传过来的，是这么一个东西。然后它在复组件里面去更改，去更新，更新这个用户。更新了之后，userID就等于2了，默认是1，更新了之后就等于2了。更新完成之后，它马上就掉了get user，getUserInfo问，这边propsID获取到的是什么东西？有的朋友知道，有的朋友不知道，我们来试一下。

打开控制台，更新，这个时候拿到的是一对，这边变成2了，怎么回事？为什么会有这种情况？这是因为vue的更新是异步的，很多人知道更新是异步的，但是我也跟群友解释了，他说视图更新是异步的，那跟props有什么关系？它不仅有关系而且关系还很大，因为props就是在定render函数的过程中生成的。

下面来看张图，这张图就简单的画了一下，这个APP组件就是副组件，副组件要挂载的时候触发render函数，然后生成了vnode，生成了vnode，有个props，就是给它传的这个东西，但是这个东西也在里面，现在只关心这个东西，生成了一个props，这边一个props，搞成这个样子了，搞成这个样子之后子组件就可以直接用了，子组件里面拿到props就可以直接用了，叫user idsse，这个时候是没问题的。

接着来看一下它怎么更新？怎么更新？更新的时候是这样的，复组件修改了props，就是这边修改props，修改的时候是修改的这个，修改这个REF了，就是修改这个REF，把userID给改了，改成什么东西？改成二了，改成二，这边是副组件上面的userID，它不是propos的内容，userID，副组件是改了自己的userID。

改了之后这个时候要触发页面更新，propos也没变，但是触发页面更新不是同步的，是异步的，先给我放到异步队列里面去，放到微任务队列里面去，先歇一会，先干活，先干着，改完之后还先干活，但是这边已经接到通知了，一会要更新，一会再干，先干，接着干，接着干就到这里了，到这里之后就跳上get user音否，这个时候拿到这个东西还没更新，还是一对，还是一，这边还没改，还是一对，还是一，这边干活，干活，这个掉完了，打印出来是一对，干完了之后该它了。调用的时候会触发一个地府，这个地府是干什么的？地府就是用来对比的，这个地方是一对，它一搞，搞出来对比的时候是2，还对不上号，那我就更新一下。

你看最新的是2，那我也更新成2，那它就更新成2了，更新成2之后这个时候自主键就可以拿到最新了，这个时候自主键就可以直接拿到最新的了。

这个流程里面主要问题在哪？在这个地方，由于这个地方是义部的，所以你这边副组件改了东西之后props实际上还是没有更新的，是这么一回事。所以你要想拿到最新的可以在这边调next take，把这个东西放进去就可以了。

到Email来试一下，刷新，这时候就是2了，跟这边是一样的，这时候就变2了，或者你也可以这样，你在这边把这个东西传过去，传过去肯定就是2了，然后你也可以这样，我一般就这样了，你要我写肯定就这样写，我就这样写，我直接写个watch，watch，然后watch去监听props里面的user ID，我这样写肯定能拿到最新的。

来试一下，打印一下newY6，获取到最新的userID，看一下刷新，这边还掉了一下，这边还有问题，我把那个删掉了，这样更新，这个时候就拿到最新的了，就是这么一个问题。如果遇到这种问题尽量这样，就是在指数间里面去监听，用watch去监听，监听肯定能拿到最新的，变了就更新watch了。props里面UIT变了，i变了就触发卧室，这样是比较好的。要是在这边多多少少要不注意确实还是有点问题。

今天视频就到这里了。