created和mounted的区别
时间: 2023-12-17 19:07:05 浏览: 37
在 Vue.js 中,created() 和 mounted() 都是生命周期钩子函数,但它们在组件生命周期中的执行时机是不同的。
created() 钩子函数在实例被创建之后立即被调用,此时组件的模板和虚拟 DOM 都未被挂载到页面中。在这个阶段,可以进行一些初始化操作,如数据的加载、事件的注册等。
mounted() 钩子函数在组件挂载到页面中之后被调用。在这个阶段,组件的模板和虚拟 DOM 都已挂载到页面中,可以进行一些与 DOM 有关的操作,如获取元素的宽高、操作元素、调用第三方插件等。
需要注意的是,mounted() 钩子函数执行时机晚于 created() 钩子函数,因此如果在 created() 钩子函数中有获取 DOM 元素的操作,可能会得到 undefined 或 null。此时可以将获取 DOM 元素的操作放到 mounted() 钩子函数中。
相关问题
详细介绍created和mounted区别
在Vue.js中,created和mounted都是生命周期钩子函数。它们的主要区别在于执行的时间点不同。
created钩子函数会在实例被创建之后立即执行,此时组件的DOM元素还没有被挂载到页面上。在这个阶段,我们可以访问组件的数据和方法,但是无法访问到DOM元素。
mounted钩子函数会在组件挂载到页面上之后执行,此时组件的DOM元素已经被创建并且挂载到页面上了。在这个阶段,我们可以访问到组件的DOM元素,也可以操作DOM元素。
因此,如果我们需要在组件创建之后立即执行一些操作,可以使用created钩子函数;如果我们需要在组件挂载到页面上之后执行一些操作,可以使用mounted钩子函数。
vue created和mounted区别
Vue 的 `created` 和 `mounted` 是 Vue 生命周期钩子函数,在 Vue 实例创建后和挂载到 DOM 上后被调用。
- `created` 钩子在实例创建之后立即调用。在这里可以进行一些数据的初始化工作,但是不能访问 DOM。
- `mounted` 钩子在实例挂载到 DOM 后调用。在这里可以进行 DOM 操作,也可以进行一些初始化的操作。
所以一般来说created用来初始化数据,mounted用来初始化dom元素和事件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)