首页 > 其他分享 > vue中created和mounted区别

vue中created和mounted区别

时间:2023-09-23 15:34:14浏览次数:41  
标签:vue 函数 DOM 钩子 created 组件 mounted

在 Vue.js 中,created 和 mounted 都是生命周期钩子函数,用于在组件不同的生命周期阶段执行代码。它们的主要区别如下:

1.created 钩子函数:


2.created 在组件实例被创建后立即调用。此时组件的实例已经被创建,并且组件的数据观测(data observation)和事件机制已经初始化完成。
3.created 钩子函数常用于执行一些初始化逻辑,例如获取数据、订阅事件、进行初始的数据处理等。


4.mounted 钩子函数:


5.mounted 在组件被挂载到 DOM 后调用。此时,组件的模板已经编译完成,并且组件实例被挂载到了真实的 DOM 元素上。
6.mounted 钩子函数常用于进行DOM操作、依赖第三方库的初始化或访问外部API等操作,因为在该阶段组件已经被完全渲染到页面中。

简而言之:

7.created 钩子函数适用于在组件创建时执行的逻辑,通常涉及组件自身的初始化,但此时尚未访问到 DOM 元素。
8.mounted 钩子函数适用于在组件挂载到 DOM 后执行的逻辑,此时可以操作 DOM 元素、访问外部API、初始化插件等。

需要注意的是,如果组件在切换路由时被销毁再重新创建,mounted 钩子函数会再次触发,而 created 钩子函数只会在组件实例创建时触发一次。这是因为 created 是在组件实例创建时调用的,而 mounted 是在组件被挂载后调用的。
在选择使用 created 或 mounted 钩子函数时,需要根据具体的需求和操作时机来决定哪个更适合。

标签:vue,函数,DOM,钩子,created,组件,mounted
From: https://www.cnblogs.com/daitu66/p/17724452.html

相关文章

  • ts和vue3的结合常见的一些问题(持续更新)
    特此注意是vue3,而不是vue2使用typescript的interface关键词定义一个存数据的数据类型interfacePosition{long:number,lnt:number,height:number}constposition=ref<Position>({long:0,lnt:0,height:0})......
  • vue2 访问网关的时候post无法请求
    问题复现:后台使用微服务的框架在consul配置并使用网关进行代理。 问题描述:前台访问网关调用后台方法 请求方式为get时正常使用~post时显示跨域问题 post访问路径正常但就是无效果显示跨域问题报错解决方法:module.exports=defineConfig({......
  • vue3的面试题
    1.什么是Vue3?Vue3有哪些新增特性?答:Vue3是Vue.js框架的最新版本,它增加了很多新特性,包括CompositionAPI、Teleport、Suspense和Fragment等。2.Vue3CompositionAPI是什么?它的作用是什么?答:Vue3CompositionAPI是Vue3中的一个新特性,它的作用是将组件中的逻辑分解成可复用的可......
  • 全面分析 Vue 的 computed 和 watch 的区别
    全面分析Vue的computed和watch的区别 一、computed介绍computed用来监控自己定义的变量,该变量在data内没有声明,直接在computed里面定义,页面上可直接使用。//基础使用{{msg}}<inputv-model="name"/>//计算属性computed:{msg:function(){retur......
  • 【vue2】 demo1
    练习用的<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>......
  • Vue.js 3.0 promise的运用
    ......
  • vue3 defineEmits的使用
    1.计数器案例父组件:<template><h2>当前计数为:{{counter}}</h2><HelloWorld@add1="add1"@decre1="decre1"></HelloWorld></template><scriptsetup>import{ref}from'vue'import......
  • vue前端导出pdf
    functionexportDataPdf(el,fileName,splitClassName){ //防止页面数据被切割 constA4_WIDTH=595 constA4_HEIGHT=842 el.style.height='initial' constpageHeight=el.scrollWidth/A4_WIDTH*A4_HEIGHT //获取分割dom,此处为class类名为item......
  • vue el-table-column 内容省略号,根据数字展示内容,鼠标移上展示详情
    鼠标移上展示详情:title="scope.row.fmContent"<el-table-columnprop="fmContent"label="工单内容"<templateslot-scope="scope"><span:title="scope.row.fmContent">scope.row.fmContent.slice(@,22)I&......
  • HbuilderX将Vue项目打包后的dist,打包成安卓apk安装包
    1、先看这个(必看):https://www.cnblogs.com/lyt520/p/16545806.html2、安装移动端log(如不需要可跳过此步骤)npminstallvconsolemain.js中引入:importVConsolefrom'vconsole'constvConsole=newVConsole()Vue.use(vConsole)3、HBuilderX和逍遥模拟器(用模拟器实现真......