Vue中created和mounted钩子函数有何用法差异？

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

1：在使用Vue框架的过程中，我们经常需要对一些数据进行初始化处理。这时候，我们常用的方法就是在`created`和`mounted`选项中进行处理。

官方解释：`created`是在实例创建完成后被立即调用，此时已完成数据观测、属性和方法的运算，`watch/event`事件回调已设置，但是挂载阶段尚未开始，DOM尚未生成，$el 属性目前不可见。简单来说，`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 也在文档内。