vue学习日记-关于同步跟异步的个人理解

最新推荐文章于 2024-06-12 14:49:19 发布
最新推荐文章于 2024-06-12 14:49:19 发布
阅读量1k 收藏
点赞数
文章标签： 同步异步理解
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38296003/article/details/104252448
版权

！！！（我请你吃饭和你请我吃饭的不同）

通俗理解：

同步：我请你吃饭，你马上跟我走了，或者是只有你跟我走了我才会去吃

异步：你请我吃饭，我没有马上跟你走的话，你就自己先去吃了。

现在的vue默认是支持DOM异步更新的，而且在created中不会对DOM进行渲染，所以就要用到$nextTick，如下图：

这里涉及到$refs的用法，它是需要在属性添加一个ref，如下图：

 

halohat
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue中组件通信----$refs使用及说明
喜羊羊love红太狼
12-08 1731
作用一：通过$refs可以获取目标组件实例，从而获取改实例中的所有方法 用法： this.$refs.name 其中name表示目标组件名称，this表示当前组件 举例：在父组件中通过this.$refs.componentName as any获取到子组件RolegroupTab组件实例，从而获取到该实例的reloadRoleGroupTab方法 changeCompont(name, data, type) { this.componentN...
Vue基础第二天之“异步与同步 、绑定class样式、条件渲染、key的工作原理、监测数据的原理、修改数组中的某个元素、什么是数据劫持、过滤器、内置指令、自定义指令、生命周期”
空投在我怀里的博客
02-25 913
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
Vue基础知识：异步DOM更新是什么？$nextTick是什么？到底应该如何使用。什么是同步？什么是异步？
最新发布
我就知道你会来，我们一起进步吧！
06-12 1566
同步操作是按照代码的顺序执行的，每个操作都必须等待上一个操作完成后才能执行。在Vue中，同步操作通常指的是直接执行的代码，例如在方法中执行的普通 JavaScript 代码或同步的 Ajax 请求。在同步操作中，代码会阻塞后续的代码执行，直到当前操作完成。异步操作是指代码不按照顺序执行，而是在后台执行，不会阻塞后续代码的执行。在Vue中，异步操作通常指的是需要等待一段时间或需要网络请求的操作，例如异步的 Ajax 请求、定时器或者 Promise 对象。
vue同步父子组件和异步父子组件的生命周期顺序问题
12-12
关于vue组件的引入方式有两种 一、 同步引入 例子： import Page from '@/components/page' 二、异步引入 例子：const Page = () => import('@/components/page') 或者： const Page = resolve => require(['@/components/page'], page) 两种引入方式的不同之处在于： 同步引入时生命周期顺序为：父组件的beforeMount、created、beforeMount –> 所有子组件的beforeMount、created、beforeMount –> 所有子组
vue 同步任务和异步任务
Jana Jing的分享
09-08 3005
1.同步任务 在主线程上排队之行的任务,只有在最前面的任务执行完成之后,才之行后面的任务. 2.异步任务 是指不进入主线程,而是进入了“任务队列”的任务,只有“任务队列”通知主线程,某个异步任务可执行了,该任务才会进入主线程执行. 异步任务: 分为宏任务 和 微任务 宏任务: 包含整体代码script、setTimeout、setInterval 微任务: Promise.then(非 new Promise)、process.nextTick(node中) 事件执行顺序: 先..
vue异步请求和同步_VUE知识点集锦
weixin_40005437的博客
11-25 1931
MVVM模式核心理念：通过声明式的数据绑定 来实现 View 层和其他层的分离；Model 层Model 层，对应数据层的域模型，它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里，它主要用于抽象出 ViewModel 中视图的 Model。（域模型：融合了行为和数据的域的对象模型）View 层View 层，作为视图模板存在，在 ...
日记系统源码
04-12
【日记系统源码】是一个专为记录个人日常生活和工作点滴而设计的应用程序的源代码集合。这个源码可能包括了用户界面设计、数据存储、权限管理、日志编写与查看等多个功能模块。以下是对这个系统可能涉及的关键技术点...
js 书写较复杂的UI日记
03-14
8. **异步编程**：如果日记应用涉及到服务器通信，比如同步到云服务，那么就会用到AJAX或Fetch API进行异步请求。 9. **响应式设计**：为了让日记应用在不同设备上都能良好显示，开发者可能会使用媒体查询、Flexbox...
笔记日记记录小程序源码.zip
10-05
【笔记日记记录小程序源码.zip】是一个包含源代码的压缩包，主要用于个人学习和交流，不包含官方的技术支持。这个小程序源码可能是用于创建一个功能齐全的日记或笔记应用程序，适用于微信小程序平台。通过分析这个...
我的健身日记
02-15
这样，用户可以将他们的健身数据同步到云端，实现多设备间的同步。如果项目使用了RESTful API，JavaScript将扮演客户端的角色，负责与服务器进行通信，发送GET请求获取数据，POST请求创建新记录，PUT请求更新记录，...
vue 使用 async 和 await 实现异步 axios 同步化（实战案例：数据异步校验通过后，再执行保存）
朝阳39的博客
05-27 3108
必备知识点 axios请求会生成一个Promise实例对象 await后面可以直接跟一个Promise实例对象，返回值不是Promise对象，而是Promise对象处理之后的结果（await后面跟一个axios请求时，返回值即请求的响应结果 res） 若await后的表达式的值不是一个Promise，则该值将被转换为一个已正常处理的Promise await只能在使用async定义的函数中使用 async函数都会隐式返回一个promise，要获取Promise的返回值应该用then方法.....
vue异步请求和同步的区别
u011251307的博客
01-03 1295
通过这一篇的讲解，讲述了前端程序的异步，包括promise的原理，用处，以及后来的async-await，并且了解了async-await的作用，最后将async-await用到了axios实例中，来解决axios的异步请求同步化问题。从执行的结果可以看出，浏览器执行async-await的顺序为，正常的表达式顺序执行，遇到promise的异步线程时，需要等待异步线程返回结果，然后顺序执行后面的方法，这样就可以将异步的方法同步化了。如果将返回的结果做不同处理的话，以可嵌套一次promise，如下。
VUE同步和异步请求
aliuyu422的博客
01-28 1150
前端请求
VUE 方法同步与异步
u012174809的专栏
09-15 2821
VUE所有的方法，无任何async await promise 等等的修饰符，默认都是异步的，之前一直做原生JS，没有所谓的方法内默认异步，所以初用VUE很容易栽在这个VUE的同步与异步上面，特此记录一下。
简述同步和异步的区别
wang13145的博客
03-26 2042
简述同步和异步的区别 同步： 同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。 异步： 将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就...
Vue 中 Promise 异步和同步 的使用
曾令胜的博客
10-20 1681
<template> <div class="app-container"> <h1>商品信息</h1> <div class="block"> 测试Promise: <div> 操作人{{who}},改变了商品名称:{{merchandiseName}} <el-button @click="changeMerchandiseNameSync" type="prim
vue中使用async和await来实现同步和异步
热门推荐
aaron9185的博客
08-03 1万+
用async/await 来处理异步 近期项目中大量使用async，从服务器获取数据，解决一些并发传参问题。代码很简单。在此也看了一些博客，现在async/await已经大范围让使用，是时候总结一波啦。 先说一下async的语法，它作为一个关键字放在函数前面，用于表示函数是一个异步函数，因为async就是异步的异步，异步函数也就是意味着这个函数的执行不会阻塞后面代码的执行。简单的写一个async函数 async function hello(){ return 'hello world'; }
VUE中的同步和异步调用顺序
qq_26505167的博客
05-06 1601
VUE中的方法调用顺序是依次进行的，方法体内部也是依次执行的，但是，两个方法体的执行顺序并不能严格控制。 以下方法中都带有promise函数或异步调用。 initUserData() { this.getPsCountryList() // 1 获取国家列表stateOptions，方法内同步 this.getTimeZone() // 2 获取时区timezones，方法内同步 this.getUserInfo() // 3 获取用户信息 } 在实际...
vue-awesome-swiper中on异步请求后无法滑动
08-09
你好！对于vue-awesome-swiper中的异步请求导致无法滑动的问题，可以尝试以下几个解决方案： 1. 确保异步请求完成后再初始化swiper组件：在异步请求的回调函数中，等待数据加载完成后再初始化swiper组件。这样可以确保数据加载完毕后再进行滑动操作。 2. 使用Vue的watch监听数据变化：使用Vue的watch属性来监听数据变化，当异步请求的数据变化时，手动调用swiper的update方法来更新swiper组件。 3. 使用v-if条件渲染：在异步请求完成前，将swiper组件通过v-if条件渲染进行隐藏，待异步请求完成后再显示swiper组件。这样可以避免在数据未加载完成时进行滑动操作。 4. 检查swiper配置项：确保swiper的配置项正确设置，特别是关于滑动方向、滑动模式等参数的配置。 希望以上解决方案能够帮助你解决问题！如果还有其他问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值