关于vue组件的引入方式有两种，同步和异步，生命周期执行顺序不同

最新推荐文章于 2024-05-24 11:45:49 发布
最新推荐文章于 2024-05-24 11:45:49 发布
阅读量2.3k 收藏 9
点赞数 3
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23064501/article/details/107341326
版权

1、同步

1、 import Page from '@/components/page'

2、异步

  1. const Page = () => import('@/components/page')

  2. const Page = resolve => require(['@/components/page'], page)

3、生命周期执行顺序

 

同步引入时生命周期顺序为：父组件的beforeCreate、created、beforeMount --> 所有子组件的beforeCreate、created、beforeMount --> 所有子组件的mounted --> 父组件的mounted

异步引入时生命周期顺序：父组件的beforeCreate、created、beforeMount、mounted --> 子组件的beforeCreate、created、beforeMount、mounted

 

NANA北极
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue里组件之间的通信方式
qq_37635012的博客
04-17 319
组件之间的关系 一般来说，组件之间有以下几种关系： A-B、B-C、B-D都是父子关系 C-D是兄弟关系 A-C、A-D都是隔代关系(有可能隔很多代) 针对不同的关系，我们在传递数据时要选择不同的方法。针对vue组件间通信的几种方式，如props、 $emit/ $on、vuex、 $parent / $children、 $attrs/ $listeners和provide/inject pr...
文档_Vue02_事件处理_表单双向绑定_组件_Prop_自定义事件_插槽_动态与异步组件
pre_eminent的JAVA学习园地
05-05 1183
Vue.js_官方文档学习笔记_Part_02事件处理监听事件可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。示例：<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has...
异步导入excel__ VS __同步导入Excel
qq_37126704的博客
01-21 1257
scm之 同步导入excel：  导入之后： 实现思路： 先使用jquery下的ajax文件上传插件fileupload封装一个基本的 上传文件的组件：src/components/base/upload.vue 在使用导入excel页面 引入并使用该组件：src/components/end/adjuster/detail/accountAdjust.vue   ...
【Vue】中的同步和异步
强者惜字如金，弱者废话连篇！
05-24 1830
同步：在主线程上排队之行的任务,只有在最前面的任务执行完成之后,才之行后面的任务。 （生活中的例子话糙理不怪：银行排队，只有一个窗口的时候，A业务办理完在接着办理B） 异步：是指不进入主线程,而是进入了“任务队列”的任务,只有“任务队列”通知主线程,某个异步任务可执行了,该任务才会进入主线程执行。 生活中的例子话糙理不怪：多个窗口，可以同时办理业务，互不影响） 异步任务分为：宏任务 微任务 宏任务：包含整体代码script / se....
VUE同步和异步请求
aliuyu422的博客
01-28 1163
前端请求
vue同步任务和异步任务
IAmNotChangAn的博客
01-09 727
222
Vuex —— 同步和异步请求
灵魂学者的博客
06-27 2589
上一篇讲到 Vuex 状态管理的内容，那么本篇就来将关于Vuex中的同步和异步数据请求，先来简单的回顾一下 Vuex ，Vuex 中有五个核心属性：state 、getter、mutation、action、module。state: 存放数据状态，不能被直接的修改；getter: 基于 state 的计算属性；mutation: 直接更新 state 的多个方法的对象；action: 通过 mutation 间接更新state；module：分模块化；
vue同步父子组件和异步父子组件的生命周期顺序问题
12-12
关于vue组件的引入方式有两种 一、 同步引入 例子： import Page from '@/components/page' 二、异步引入 例子：const Page = () => import('@/components/page') 或者： const Page = resolve => require(['@/...
【Vue知识点- No5.】生命周期、axios、购物车案例
qq_48687155的博客
07-23 540
生命周期、axios、购物车案例
vue--同步父子组件和异步父子组件的生命周期顺序
xingchen678的博客
04-02 563
关于vue组件的引入方式有两种 一、 同步引入 例子： import Page from '@/components/page' 二、异步引入 例子：const Page = () => import('@/components/page') 或者： const Page = resolve => require(['@/components/page'], page) ...
Vue 3 异步组件与同步组件
最新发布
油墨香^-^的博客
05-24 208
在大型应用中，可以将不同模块的组件定义为异步组件，根据用户访问的模块来按需加载相应的组件。通过将路由组件定义为异步组件，可以根据路由的动态变化来按需加载组件，提高路由切换的响应速度。：对于一些较大的组件，例如包含大量代码或资源的组件，可以将其定义为异步组件，以避免在应用初始化时一次性加载过多的代码。：在应用中同时使用异步组件和同步组件时，由于异步组件的动态加载特性，可能会导致组件加载的顺序问题。：对于异步组件，可以使用 webpack 的代码分割功能来拆分和按需加载组件，以进一步优化应用的性能。
VUE 方法同步与异步
u012174809的专栏
09-15 2835
VUE所有的方法，无任何async await promise 等等的修饰符，默认都是异步的，之前一直做原生JS，没有所谓的方法内默认异步，所以初用VUE很容易栽在这个VUE的同步与异步上面，特此记录一下。
js文件同步和异步的引入问题
mantou_riji的博客
03-27 1452
这在服务器端环境中非常有用，因为模块文件通常都已经在本地，加载很快，而且一般需要在服务器启动时加载所有必要的模块。defer 属性：这也会使得浏览器非阻塞（异步）地下载 JavaScript 文件，但是与 async 不同的是，包含 defer 属性的。标签并不是使用模块化的导入导出方式，可以使用该标签加载执行JS文件，但是其中所有的变量和函数都会在全局作用域中。在module模块加载完成之前是不会执行下面的代码的，所以在模块导入后的所有地方都可以直接使用该模块。多个包含 async 属性的。
本地储存(设置和获取信息)
weixin_33755554的博客
12-14 409
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
vue生命周期钩子函数
m0_65912225的博客
06-27 702
beforeCreate：在实例初始化后，data observer和event/watcher事件之前被调用=> created：实例已经创建完成之后调用，挂载阶段未开始，data observer，属性和方法运算，watch/event事件回调已经完成。{用来调用数据，调用方法，调用异步函数}=> beforeMount：在挂载之前被调用，相关的render函数首次被调用=> mounted：有初始值的DOM渲染，初始数据渲染完毕在这获取=> beforeUpdate：数据更新时调用，可以进一步更改状态
import 优先级(执行提前)
qq_49077729的博客
11-18 338
store里面用到了vuex,但是这个时候还没有执行Vue.use(Vuex),尽管Vue.use(Vuex)写在import 之前，但是import提升到最前面去了，还是会报错。import 引入的东西优先级会提示，会优先执行，和var提示是同一个道理，所以向下面这么写就会报错。正确的写法，在index.js里面Vue.use(Vuex)
第六章：Vue3开篇
m0_61927991的博客
08-27 2494
Vue3知识点
Vuex介绍以及同步取值与异步问题
m0_63026408的博客
09-11 762
12。
vue调用接口同步实现
jslong66的博客
02-25 6822
前言 最近做项目需要写一个vue公共方法，实现字典项数据后端获取，始终无法同步返回结果，在网上找了好多vue同步接口的方法，都是说在方法前加async，在接口名前加await，自己试了好长时间也不好使，最终只能选择用回调函数的方法来达到方法的同步调用，回调与同步、异步并没有直接的联系，回调只是一种实现方式，既可以有同步回调，也可以有异步回调 一、什么是回调？ 回调是将一个方法对象a 传递给另一个方法对象 b，让后者在适当的时候执行 a 二、使用步骤 1.创建公共utils.js import {get,po
vue3 hook中的生命周期和组件生命周期执行顺序
05-07
在 Vue3 中，使用 Composition API 的方式来编写组件，对应的生命周期也发生了变化。下面是 Vue3 Composition API 中的生命周期钩子以及它们的执行顺序： 1. setup 函数 2. onBeforeMount 3. onMounted 4. onBeforeUpdate 5. onUpdated 6. onBeforeUnmount 7. onUnmounted 其中，setup 函数是组件内的入口函数，它会在 beforeCreate 和 created 钩子函数之前执行。在 setup 函数中，我们可以定义响应式数据、计算属性、方法等，并且还可以通过 ref 和 reactive 函数来创建响应式数据。 组件生命周期的执行顺序如下： 1. beforeCreate 2. created 3. beforeMount 4. mounted 5. beforeUpdate 6. updated 7. beforeUnmount 8. unmounted 需要注意的是，在 Vue3 中，beforeDestroy 和 destroyed 钩子被重命名为了 beforeUnmount 和 unmounted。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值