vue createApp()，mount()，生命周期钩子函数执行顺序

最新推荐文章于 2024-08-24 21:08:10 发布
最新推荐文章于 2024-08-24 21:08:10 发布
阅读量2.1k 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38517015/article/details/119054664
版权

之前一直以为在调用createApp()时执行beforeCreate、created这两个钩子函数，在mount()时才执行beforeMount、mounted这两个钩子函数

但实际上，在createApp()时不会执行任何钩子函数，而在mount时才会开始执行钩子函数

以下是测试的例子

网上查找资料，了解到createApp确实创建了一个vue实例，但这里只做了一些初始化的操作，比如初始化钩子函数、初始化watch、methods等，还有使用defineProperty把数据转化成getter/setter的响应式前处理也在这里执行

等到调用mount时才开始真正解析vue，执行各种编译的操作

 从vue3的生命周期图示也可以看到，生命周期钩子都是在mount()之后执行的

 

 

 

 

Evavava啊
关注
专栏目录
Vue生命周期函数
Chengxuniao的博客
02-17 431
文章目录生命周期函数beforeCreate()created()判断是否有template的存在 生命周期函数 生命周期函数：在某一时刻会自动执行的函数。 beforeCreate() 在你写好app=Vue.createApp()beforeCreate(),app.mount()之后，Vue就开始它内部的逻辑，首先它会考虑事件的绑定，当它进行完逻辑初始化之后就会开始beforeCreate()的生命周期函数。 如： <!DOCTYPE html> <html lang="en"&gt
Vue3 -- 生命周期函数（钩子）
Sun_blog
07-06 1201
文章目录Vue生命周期Vue生命周期的作用生命周期函数（钩子）Vue生命周期图示Vue各生命周期函数的描述代码演示页面效果总结 Vue生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载DOM、更新渲染、卸载等一系列的过程，我们称这是 Vue 的生命周期。 Vue生命周期的作用 Vue 所有功能实现都是围绕生命周期进行； 在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染； 生命周期函数（钩子） 生命周期函数是指在某一时刻自动执行的函数。 Vue生命周期图示 从图中可以看出，V
Vue3项目main.js中的createApp(App).mount(‘#app‘)
听海边涛声
05-13 1322
Vue3项目main.js中的createApp(App).mount('#app')
Vue3设计思路 -- 实现简单的createApp工厂函数
最新发布
2401_86023055的博客
08-24 616
mount()我们都知道是挂载，到底是怎么挂载的呢？实际的操作是什么呢？其实做的事情有很多。根据用户传入的选择器，就以这个选择器选中的元素作为宿主元素拿到宿主元素之后 拿到这个元素的 innerHTML 作为template，通过编译的方式得到渲染函数 – 根据渲染函数可以真正的得到DOM节点（再根据用户传入的状态数据最终生成）最终将render函数生成的DOM节点追加到宿主元素身上。
Vue3源码学习笔记—— Vue.createApp(App) 和 app.mount(“#app“)（二）
weixin_53335381的博客
08-10 2765
本篇文章对 Vue.createApp(App) 做了什么进行了简单分析，以上篇文章的 demo 为例。
Vue3的生命周期函数
richest_qi的博客
03-18 1289
文章目录通过配置项的形式使用生命周期钩子通过组合式API的形式使用生命周期钩子 使用Vue3的生命周期钩子，有两种写法， 通过配置项的形式使用生命周期钩子。 通过组合式API的形式使用生命周期钩子。 通过配置项的形式使用生命周期钩子 Vue3有如下生命周期钩子，分别是， beforeCreate created beforeMount mounted beforeUpdate updated beforeUnmount unmounted 看具体例子吧。 main.js import { cre
createApp 流程 （创建渲染器，调用mount）
weixin_49021723的博客
12-13 2070
createApp 干了什么？
Vue3组件初始化流程(三): 验证对createApp以及mount的分析，并总结初始化流程 [Vue3源码系列_xiaolu]
小鹿的博客
04-03 1227
搭建验证环境 这一章我们来验证前两章的分析 首先，在packages/vue/expample下面新建一个文件index.html index.html 路径: core\packages\vue\examples\init.html <div id="app"> <h1>{{title}}</h1> <p>someText</p> </div> <script src="../dist/vue.global.js"
在vue组件的mount生命周期钩子函数中可以使用js的foreach进行遍历吗
07-14
是的，你可以在 Vue 组件的 `mounted` 生命周期钩子函数中使用 JavaScript 的 `forEach` 方法进行遍历。在 `mounted` 钩子函数中，组件已经被挂载到 DOM 中，可以访问到组件的 DOM 元素和数据。 下面是一个示例代码...
前端框架学习 Vue(3)vue生命周期,钩子函数,工程化开发&脚手架CLI,组件化开发,组件分类
Flyoungbuhu的博客
02-04 1726
Vue CLI 是Vue官方提供的一个全局命令工具可以帮助我们快速创建一个开发Vue项目的标准化基础1.开箱即用,零配置2.内置babel等工具3.标准化// 文件核心作用:导入App.vue,基于App.vue创建结构渲染index.html// 1.导入 vue核心包// 2.导入App.vue 根组件// 提示:当前处于什么环境(生成/开发)// 3.Vue实例化,提供render方法 - > 基于App.vue创建结构渲染index.htmlnew Vue({
vue2与vue3生命周期函数详细对比
XSL_HR的博客
09-24 2728
vue2和vue3在生命周期钩子上的对比的详细说明 强烈推荐！！
Vue 生命周期-钩子函数介绍
Y18356309212的博客
03-24 967
千锋 酸奶 打卡学习 生命周期 每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。 钩子函数 vue在整个生命周期里面提供了一些函数，可以在内部实现一些业务逻辑，并且这些函数会在一些特定的场合下去执行。（在生命周期的某一个时刻进行触发） 组件的生命周期中钩子函数在三个阶段中的分布大概如下： 初始化阶段： beforeCreate created ...
App.vue 内部 created mounted方法不生效)
靓仔的博客
08-05 3148
App.vue 内部 created mounted方法不生效 记录一个问题 因为改动了比较多的代码，突然App.vue 中 created mounted 逻辑突然失效了 ，导致我一脸懵逼 对比了很多组件的版本号，发现都是一致的 那可能就是代码出问题了 main.js 是没动过的 找了好久 发现，我把App.vue中的 @Component 以为他没用 结果 出问题了 项目用的 vue-ts vue-property-decorator , 问题就出在这里 ...
浅析vue的createApp方法
wlijun_0808的博客
09-15 634
浅析vue的createApp方法
为什么const App = { 不行，必须要export default { ，为什么vue要export default而html用const App且createApp.mounted
weixin_40945354的博客
04-16 724
<template> <title>陈尼克</title> <div id="app"> <p>姓名: {{ name }}</p> <p>职业: {{ state.work }}</p> </div> </template> <script> //import { defineProps, reactive } from 'vue' import {
JAVA学习第一阶段模块二
miaoit的博客
10-02 502
模块二 Java面向对象 类和对象 类和对象及引用 对象主要指现实生活中客观存在的实体，在Java语言中对象体现为内存空间中的一块存储区域。 类的定义方法 class 类名{ 类体; } class Person{ //类名命名：通常情况下，当类名由多个单词组成时，要求每个单词首字母都要大写 } 成员变量的定义 class Person{ //成员变量命名：当成员变量由多个单词组成时，通常要求从第二个单词起每个单词的首字母大写 。 String name; }
Vue中生命周期函数
qq_52207728的博客
06-01 160
见图片： // 生命周期函数：在某一时刻会自动执行的函数 const app = Vue.createApp({ data() { return { message: 'hello world' } }, // 在实例生成之前会自动执行的函数 beforeCreate() { console.log('beforeCreate') }, // 在实例生成之后会自动执行的函数 created(
Vue3.x基础
DuCheng_的博客
08-03 535
Vue是一种**MVVM模式**（Model-View-ViewModel）的前端框架，**Model（模型）**可以理解为数据，**View（视图）**可以理解为HTML页面，**ViewModel（视图模型）**即业务逻辑（或类似于方法），Vue就是用MVVM实现的数据双向绑定，即Model层与View层均与ViewModel层互相关联，而Model层与View层没有直接联系，是一种**低耦合、可重用、易测试**的模式。...
Vue中的生命周期钩子函数mounted方法及其在项目开发中的作用
qzh88888888的博客
09-27 2684
这个方法提供了一个重要的时机，在DOM元素渲染完毕后执行一些必要的操作。4、执行其他初始化操作：在项目开发中，还可以利用mounted方法执行其他一些初始化操作，例如动态计算DOM的尺寸、初始化动画效果、读取本地存储等。1、执行异步操作：在mounted方法中，可以执行一些需要依赖DOM元素的异步操作，例如发送网络请求、获取数据、初始化插件或库等。2、异步操作的处理：由于mounted方法是在DOM渲染完毕后触发的，如果存在需要较长时间的异步操作，建议在操作开始前显示加载状态或占位元素，以提高用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值