vue异步（vue异步更新dom原理）

本篇文章给大家谈谈vue异步，以及vue异步更新dom原理对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue异步渲染
• 2、Vue 在更新 DOM 时是异步执行的，怎么理解吗？
• 3、VUE异步函数return问题解决方案

vue异步渲染

vue是组件级拍消更新，当数据更改一次组件就要重新渲染一次，性能不做贺渗高，为了防止数据一更新就更新组件，所以做了个异步更新渲染。（核心的方法就是nextTick）

分析：

当数据变化后会调用notify方法，将watcher遍历，调用update方法通知watcher进行更新，这时候watcher并不会立即去执行，纯脊在update中会调用queueWatcher方法将watcher放到了一个队列里，在queueWatcher会根据watcher的进行去重，多个属性依赖一个watcher，如果队列中没有该watcher就会将该watcher添加到队列中，然后通过nextTick异步执行flushSchedulerQueue方法刷新watcher队列。flushSchedulerQueue中开始会触发一个before的方法，其实就是beforeUpdate，然后watcher.run() 才开始真正执行watcher，执行完页面渲染完成，更新完成后调用updated。

[img]

Vue 在更新 DOM 时是异步执行的，怎么理解吗？

是异步的。

Vue在检测到你的数据发生变化时， 将宽巧知开启一个宽备异步更新队列，通过DIFF算法找出实际需要更新的DOM元素，需要等队列中所有数据变化完成之后，才统一进行实际DOM更新慎消。

VUE异步函数return问题解决方案

异步函数return问题：

在写VUE前端代码时，会遇到将 带有return结果的异步请求函数 （如请求后台数据）设置为公共函数，在其他地方调用的场景。但是因为是异步请求数据，实际需要皮伏绝return的值在调用返回时，还未生成，所燃姿以导致return的内容为undefined。（见参考[1]的分析）

例如：公共函数和调用方式

调用返回时，因为异步请求还未结束，真正的结果还没有获取到，所以以上代码调用位置result得到的返回值为“undefined”。

解决方案：

2. 通过回调函数实现异步return调用

如果在回调函数里面将return返回值赋值给全局变量this.xxx，不能直接this.xxx = ret，需要将this作为变量来引用（参考[2]说明），方法如下厅巧：

参考：

[1] vue中函数为什么不能在异步操作里return出数据_PC_136的博客-CSDN博客_vue异步return

[2] JS中this的指向问题（Uncaught (in promise) TypeError: Cannot read property ‘$router‘ of undefined）_whitek387的博客-CSDN博客

关于vue异步和vue异步更新dom原理的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。