理解vue中mounted生命周期函数一定会拿到挂载的DOM

vue在实例化一个组件并且渲染到页面上，会经过以下几个有序阶段：

1. 初始化阶段

   • 通过new Vue(options) 开始创建一个Vue实例对象 ，初始是一个空的实例对象
   • 进入_init()方法，给实例对象上塞一些属性，如_self指向自己 vm._self = vm
   • 执行mergeOptions()方法，将options中的created、methods等函数塞入实例下对应属性的数组中，展示如下：{el: ‘#app’, created: [f], mounted: [f] }
   • 执行initLifecycle(vm)方法,初始化生命周期标志
   • 执行initEvents(vm)方法，初始化事件
   • 执行initRender(vm)方法，初始化渲染
   • 执行callHook$1(vm, ‘beforeCreate’)方法，执行beforeCreate生命周期中的函数
   • 执行进入initInjections(vm) initState(vm) initProvide(vm) 等方法，初始化inject、状态、provide
   • 执行callHook$1(vm, ‘created’)方法，执行created生命周期中的函数。所以在cteated生命周期函数执行时，实例组件中的数据已经响应式处理完成，在这个生命周期中进行接口请求即可

2. 模板编译和挂载准备阶段

   • 执行$mount(vm.$options.el)方法，生成render函数,生成vm.$el
   • 执行callHook$1(vm, ‘beforeMount’)方法，执行beforeMount生命周期中的函数

3. 挂载阶段

   • 使用new Watcher(vm,updateComponent)监听，并手动触发get函数，触发updateComponent方法的执行
   • 执行updateComponent方法，生成VNode，再通过diff算法比对新老VNode,执行挂载DOM操作

4. 执行mounted生命周期

   • 在DOM挂载完成之后，执行callHook$1(vm, ‘mounted’)函数，执行mounted生命周期中的函数

所以mounted生命周期钩子函数的执行一定是在DOM挂载完成之后，在此函数中可以获取到DOM对象。