vue mounted 与 created区别
时间: 2023-12-17 13:27:07 浏览: 31
在Vue中,created和mounted都是生命周期钩子函数,但它们的执行时机不同。
- created钩子函数是在Vue实例创建时立即调用的,此时组件的模板和虚拟DOM都未渲染出来,因此无法访问到DOM元素。一般在created钩子函数中进行一些数据的初始化操作,例如获取数据、监听事件等。
- mounted钩子函数是在Vue实例挂载到DOM元素上后调用的,此时组件的模板和虚拟DOM都已经渲染出来,可以访问到DOM元素。一般在mounted钩子函数中进行一些需要访问DOM元素的操作,例如调用第三方插件、操作DOM元素等。
下面是一个示例代码:
```html
<template>
<div>
<p ref="message">{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
}
},
created() {
console.log('created:', this.$refs.message) // 输出:undefined
},
mounted() {
console.log('mounted:', this.$refs.message) // 输出:<p>Hello, Vue!</p>
}
}
</script>
```
在上面的示例中,我们定义了一个组件,其中包含一个p标签,通过ref属性获取到DOM元素。在created钩子函数中,我们尝试访问这个DOM元素,但是由于此时DOM元素还未渲染出来,因此输出undefined。而在mounted钩子函数中,我们再次尝试访问这个DOM元素,此时已经渲染出来了,因此可以正常输出。