vue异步（vue异步组件原理）

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

本文目录一览：

• 1、VUE异步函数return问题解决方案
• 2、vue异步数据提前缓存
• 3、vue中异步组件实现动态挂载
• 4、Vue 在更新 DOM 时是异步执行的，怎么理解吗？
• 5、vue组件异步加载是不是越多越好
• 6、4.vue 为何采用异步渲染

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异步数据提前缓存

1、在state中定义一个变量用来做状态管理。

2、取这个变量贺斗。

3、将异步请求则缺dispatch到action中。

4、到state.js的actions中进行异步请求。

5、将接孙拍辩口的数据提交到mutation中。

6、在mutation中将提交来的值赋值给store中的变量（状态）。

[img]

vue中异步组件实现动态挂载

    纯燃模  首先，我们要明确什么是异步加载组件，那与之对应的同步加载组件又是怎么一回事呢？字面意思就是，同步加载就是指，随着项目的初始化完成，所有要用到的组件都已经被加载到页面中了，有时候，我们是通过设置样式的方式让其隐藏做缓。虽然这种方式能解决我们的大部分问题，但是在追求 首屏加载时间最短 的段带情况下，一次性加载所有的组件，并不是一个很明智的选择。

      我们可以通过先加载一部分页面必须的组件，另外一部分组件当需要的时候在加载，比如 登录组件 ，当我们点击 登录按钮 的时候，再加载登录组件。

为了我们可以看到效果，我们要移步到浏览器的netWork面板。当页面初始化的时，加载的文件如下图所示

0.js

从中，我们可以看出组件异步加载的身影了！

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

是异步的。

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

vue组件异步加载是不是越多越好

vue组件异步加载不是越多越好。异步，是相对于同步而言的。我们在使用Vue时，使用到的改闭组件大多为同步组件。在vue实例第一次执行渲染的过程中，已经生成了组件构造器。而异步组件则是在用到该组件时，异步通过请求去拉取对应组件的js（这里需要和webpack的import相结合）。当核绝裂对应的js加载完成后，获取到异步组件的配置项，从而创建组件构造器。再通过forceRender，强宏稿制依赖它的vm实例重新触发渲染函数。

4.vue 为何采用异步渲染

如果不采取异步更新，那么每次更新数据都会对当前组件进行重新渲染，为了性能考虑，Vue 会在本轮数据更新后，再去异步更新数据。

dep.notify() 通知茄模 watcher 进行更新操作

--subs[i].update() 依罩蔽次调用 watcher 的 update

--颤闷缓queueWatcher 将 watcher 重新放到队列中

--nextTick(flushSchedulerQueue) 异步清空 watcher 队列

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