Vue中created和mounted钩子有何具体应用差异?

2026-06-10 17:200阅读0评论SEO资源
  • 内容介绍
  • 相关推荐

本文共计834个文字,预计阅读时间需要4分钟。

Vue中created和mounted钩子有何具体应用差异?

1:在Vue框架使用过程中,我们常需对一些数据进行初始化处理。这时候,我们常用的就是created与mounted选项中的处理。首先来看官方解释,官方解释称created是在实例创建完成后被立即调用的钩子,即在实例创建后,数据和方法已经被初始化。

1:在使用vue框架的过程中,我们经常需要给一些数据做一些初始化处理,这时候我们常用的就是在created与mounted选项中作出处理。

首先来看下官方解释,官方解释说created是在实例创建完成后呗立即调用。

在这一步,实例已完成以下配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

这话的意思我觉得重点在于说挂架阶段还没开始,什么叫还没开始挂载,也就是说,模板还没有被渲染成html,也就是这时候通过id什么的去查找页面元素是找不到的。

下面看下实例来证明。

看这个例子的结果截图如下,此错误证明找不到id为name的Dom元素。即模板还未渲染成html

所以,一般creadted钩子函数主要是用来初始化数据。

2:mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。官方解释如下:

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

这意思是该钩子函数是在挂在完成以后也就是模板渲染完成以后才会被调用。

阅读全文

本文共计834个文字,预计阅读时间需要4分钟。

Vue中created和mounted钩子有何具体应用差异?

1:在Vue框架使用过程中,我们常需对一些数据进行初始化处理。这时候,我们常用的就是created与mounted选项中的处理。首先来看官方解释,官方解释称created是在实例创建完成后被立即调用的钩子,即在实例创建后,数据和方法已经被初始化。

1:在使用vue框架的过程中,我们经常需要给一些数据做一些初始化处理,这时候我们常用的就是在created与mounted选项中作出处理。

首先来看下官方解释,官方解释说created是在实例创建完成后呗立即调用。

在这一步,实例已完成以下配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

这话的意思我觉得重点在于说挂架阶段还没开始,什么叫还没开始挂载,也就是说,模板还没有被渲染成html,也就是这时候通过id什么的去查找页面元素是找不到的。

下面看下实例来证明。

看这个例子的结果截图如下,此错误证明找不到id为name的Dom元素。即模板还未渲染成html

所以,一般creadted钩子函数主要是用来初始化数据。

2:mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。官方解释如下:

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

这意思是该钩子函数是在挂在完成以后也就是模板渲染完成以后才会被调用。

阅读全文