Vue中mounted和created的区别与用法

最新推荐文章于 2025-10-16 23:59:21 发布

技术征服冒险

最新推荐文章于 2025-10-16 23:59:21 发布

阅读量307

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript 编程

本文链接：https://blog.youkuaiyun.com/HackWhisper/article/details/133428062

编程专栏收录该内容

395 篇文章 ¥29.90 ¥99.00

订阅专栏

Vue的created和mounted钩子函数分别在组件创建和挂载后执行。created适合初始化数据和监听事件，而mounted适用于DOM操作，如初始化第三方库或获取DOM元素。在mounted之后，组件已被挂载到DOM，可以执行对DOM的操作。

在Vue.js中，mounted和created是两个生命周期钩子函数，它们在组件的不同生命周期阶段被调用。它们的主要区别在于调用时机和执行上下文。

created钩子函数：
created钩子函数是在Vue实例被创建之后立即调用的。它是Vue生命周期的早期阶段。在created钩子函数中，可以执行一些初始化的工作，比如数据的初始化、事件的监听或者进行一些简单的计算。此时，Vue实例已经创建，但是尚未挂载到DOM元素上。

下面是一个示例：

new Vue({
   
   
  created: function () {
   
   
    console

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

技术征服冒险

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

Vue生命周期中mounted和created的区别

qq_34754747的博客

03-26

1611

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图. mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。如：数据初始化一般放到created里面，这样可以及早发请求获取数据，如果有依赖dom必须存在的情况，就放到mounted(){this.$nextTick(() => { /* co...

vue中created和mounted的区别浅析

10-16

主要给大家介绍了关于vue中created和mounted区别的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

参与评论您还未登录，请先登录后发表或查看评论

vue学习日记-created() 和 mounted()

最新发布

2303_79588328的博客

10-16

224

只是执行时机不同，负责处理组件不同阶段的逻辑。

vue中created与mounted的区别

pzyqk的博客

08-13

646

vue中created与mounted的区别关于vue.js中的生命周期，如果不是有特别的需求，一般在项目开发过程中更多的使用created和mounted，所以在本文中主要讲解created与mounted在开发中的主要使用区别。关于完整的生命周期，不久会在另一篇文章中做整体的理解，包括activated、destroyed等，不过可能会有点晚，大家可以留意一下版本信息：系统:w...

vue中created钩子函数与mounted钩子函数的使用区别

ygy211715的博客

04-25

5万+

1：在使用vue框架的过程中，我们经常需要给一些数据做一些初始化处理，这时候我们常用的就是在created与mounted选项中作出处理。首先来看下官方解释，官方解释说created是在实例创建完成后呗立即调用。在这一步，实例已完成以下配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。这话的意思我觉得...

vue 路由子组件created和mounted不起作用的解决方法

10-16

在这个问题中，开发者遇到了在路由子组件中`created`和`mounted`钩子函数不触发的情况。通常，这些生命周期钩子在组件实例创建和挂载到DOM时会被调用，但当涉及到路由跳转和`keep-alive`缓存策略时，可能会出现异常...

精选资源

在vue中created、mounted等方法使用小结

01-21

methods：事件方法执行 watch：watch是去监听一个值的变化，然后执行相对应的函数。 computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值 export default { name: draw, data(){ // 定义变量...

Vue中created和mounted详解

qq_43985303的博客

02-06

8920

对浏览器来说，已经完成了dom与css规则树的render，并完成对render tree进行了布局，而浏览器收到这一指令，调用渲染器的paint（）在屏幕上显示，而对于vue来说，在mounted阶段，vue的template成功挂载在$el中，此时一个完整的页面已经能够显示在浏览器中，所以在这个阶段，即可以调用节点了（关于这一点，在笔者测试中，在mounted方法中打断点然后run，依旧能够在浏览器中看到整体的页面）。通过浏览器的渲染过程，可以总结出created和mounted的使用场景。

【Vue】created、mounted、updated详解

慕白Lee的博客

10-16

7万+

vue生命周期四个阶段（created和mount）

coinisi_li的博客

07-12

1万+

1）必经阶段2）非必经阶段提示：主动调用函数销毁后，可用将断开的new Vue()和页面重新建立虚拟DOM树，重新绑定起来挂载界面。2.生命周期钩子函数（回调函数）每个阶段前后，各有一对生命周期钩子函数，也就是回调函数。

vue.js页面加载执行created,mounted的先后顺序说明

01-21

created页面加载未渲染html之前执行。 mounted渲染html后再执行。由于created在html模板生产之前所以无法对Dom进行操作而mounted可以。补充知识：关于Vue子组件data选项某个属性引用子组件props定义的属性的几点思考学过Vue的都知道Vue等MVVM框架相对于传统的JS库比如Jquery最大的区别在于数据驱动视图，重点在于数据，拿到数据后将数据通过模板{{}}语法或者v-html展示在页面上。我们也都知道在Vue父子组件可以通过Props实现父组件传递到子组件。在项目开发中，我们会遇到这种需求，页面初始化时，父组件通过接口拿到需要数据，然后拿到

VUE中created() 和 mounted()俩种生命周期钩子函数的区别

全栈师的博客

05-30

837

操作 DOM 元素（如初始化第三方库：图表、地图等）访问 $refs 获取子组件或 DOM 节点。执行依赖 DOM 渲染的逻辑。

VUE created与mounted区别

weixin_40913947的博客

04-25

1万+

VUE created与mounted区别

Vue中created和mounted的区别及使用场景

行胜于言，行动胜于空想

07-17

3966

created在组件实例创建后调用，而mounted在组件挂载到DOM后调用。created阶段无法访问组件的DOM元素，而mounted阶段可以访问组件的DOM元素。created常用于初始化数据和执行异步操作，mounted常用于执行与DOM相关的操作。如果需要在组件实例创建后立即执行一些操作，而不依赖于DOM，则可以使用created。如果需要在组件挂载到DOM后进行DOM操作或访问DOM元素，则可以使用mounted。

vue中created、mounted等方法整理

热门推荐

liudoris的博客

05-09

14万+

created:html加载完成之前，执行mounted:html加载完成后执行methods：事件方法执行watch：watch是去监听一个值的变化，然后执行相对应的函数。computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值export default { name: "draw", data(){ // 定义变量source ...

VUE生命周期中created和mounted

binglong_world的专栏

04-12

571

一、什么是生命周期？用通俗的语言来说，就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨，但是也基本上可以理解。通过一系列实践，现在把所有遇到的问题整理一遍，今天记录一下created和mounted的区别：二、created和mounted区别？官方图解如下: ...

vue中created(),mounted()与activated()区别及应用

q_qman的博客

08-10

5663

created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次（作用：可用于页面预加载数据）； mounted()：页面初始化完成后，加载完dom后触发，与created一样只会触发一次（可用于页面加载数据） activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据（作用：可解决页面返回上一页后，重新进入此页面的数据刷新问题

前端每日一练：Vue 中 created 和 mounted 生命周期的区别及使用场景详解

SAXX2的博客

03-18

866

created 生命周期钩子在组件实例被创建后立即执行，适合进行数据初始化、设置初始状态和执行异步请求等任务。mounted 生命周期钩子在组件模板渲染到 DOM 后触发，适合操作已经渲染的 DOM 元素和执行与 DOM 相关的逻辑。综上所述，了解 created 和 mounted 生命周期钩子的区别及适用场景，有助于我们合理地利用这两个生命周期，提高组件的性能和开发效率。

vue中mounted和created

09-27

在Vue中，created和mounted是生命周期钩子函数。created是在实例创建完成后立即调用的钩子函数，而mounted是在实例挂载到DOM后调用的钩子函数。在created阶段，实例已经被创建，但是模板还没有渲染成HTML。这个...