前言

在什么阶段才能访问并操作DOM呢？遇到这个问题我们首先想到的是钩子函数，只有能清楚的了解钩子函数的执行顺序，才能够把握访问的节点。

1.生命周期函数（钩子函数）

本文章不是详细讲解生命周期的，故不太会详细的讲解生命周期函数，如果想详细了解声明周期的，请单独查阅其他博客文章。

Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理工作设定。

生命周期图：

2.什么阶段才能调用DOM？

在此处要提一个钩子函数，那就是beforeMount函数，编译好的模板挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

当钩子函数执行mounted的时候，编译好的模板挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

在钩子函数 mounted 被调用前，Vue 已经将编译好的模板（在此之前为虚拟模板）挂载到页面上，所以在 mounted 中可以访问操作 DOM。