Vue中created与mounted的区别浅析
大多数人在谈论生命周期钩子时会感到困惑的一件事是 created 和 mounted 之间的区别。有着相似的名称，觉得应该做同样的事情，但还是有一些细微的差别。
首先，created() 和 mounted() 都可以访问原型上的 data 和 props 。例如，下面的代码中，这两个钩子将在控制台中打印出 My Data 和 My Props ：
<template>
<div></div>
</template>
<script>
export default {
data() {
return {
dataMsg: "My data",
};
},
props: {
propMsg: {
type: String,
default: "My Props",
},
},
created() {
console.log(this.dataMsg);
console.log(this.propMsg);
},
mounted() {
console.log(this.dataMsg);
console.log(this.propMsg);
},
};
</script>created() 和 mounted() 之间的根本区别在于访问DOM，在上面的示例中，如果尝试引用 this.$el，在 created() 中返回 null，在 mounted() 中返回 DOM 元素：
export default {
created() {
// 打印 null
console.log(this.$el);
},
mounted() {
// 打印 DOM 元素
console.log(this.$el);
},
};因此，任何 DOM 操作，甚至使用诸如 querySelector 之类的方法获取 DOM 元素结构将无法在 created() 中使用。因此根据这点区别 created() 非常适合调用 API，而 mounted() 非常适合在 DOM 元素完全加载后执行任何操作。
在 Vue3 组合式API（Composition API）中，created() 和 beforeCreated() 将不再存在，可以取而代之的是 setup()，因此，在 setup() 中 DOM 仍然不可用，而 mounted() 保持不变。
附：vue官网给出的生命周期图
总结
到此这篇关于Vue中created与mounted区别的文章就介绍到这了,更多相关Vue created与mounted区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于Vue缓存方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
在vue-cli脚手架中配置一个vue-router前端路由
这篇文章主要给大家介绍了在vue-cli脚手架中配置一个vue-router前端路由的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-07-07
贪食蛇是一个非常经典的游戏, 在游戏中, 玩家操控一条细长的直线, 它会不停前进, 玩家只能操控蛇的头部朝向, 一路拾起触碰到之物。本文将用Vue实现这一游戏，感兴趣的可以尝试一下2022-04-04
Vue中data传递函数、props接收函数及slot传参的使用及说明
这篇文章主要介绍了Vue中data传递函数、props接收函数及slot传参的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Vue利用vue-baidu-map实现获取经纬度和搜索地址
在开发项目的时候，发现需要获取经纬度，由于这个项目是用vue写的，最后决定使用vue-baidu-map来快速获取经纬度，感兴趣的可以了解一下2022-09-09
这篇文章主要介绍了Vue如何实现监听组件原生事件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
v-model 指令默认会在 input 事件中加载输入框中的数据（中文输入法中输入拼音的过程除外）。这篇文章通过实例代码给大家介绍Vue.js中 v-model 指令的修饰，感兴趣的朋友跟随小编一起看看吧2018-12-12
这篇文章主要介绍了Vuex 入门教程，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式, 那这个 vuex 怎么用呢？就具体来看一下吧2018-01-01
这篇文章主要介绍了Vue中rules的写法使用小结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
本篇文章主要介绍了详解Vue 非父子组件通信，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-10-10
最新评论