vue 在 created 钩子函数请求异步数据，在 mounted 钩子获取不到？
恢复现场,我们在 created,周期中调用了一个 methods,此方法为异步请求获取数据
在 created 周期,实例已经完成数据观测,属性,方法的运算,watch/event 事件的回调,完成 data 数据的初始化 el 并没有。mounted 是模板挂载
在 mounted 周期中调用
结果如下，长度为零，拿不到返回值
解决方法，原因因为我们是异步请求初始化数据导致
（1） 可以通过 setTimeOut()设定等待一个时间，确保你的初始值都已经被初始化了，但是问题是不知道需要延迟多久，况且这个方法也不是很好。在 mounted 当中使用 this.$nextTick 也不好用；使用 setTimeout，设置延时可以，但是在网速不好的情况下还是有问题。所以不推荐；
mounted () {
this.getCateTypeList()
setTimeout(this.getCateTypeList,1000)
},
（2） 通过 watch，去监听这个 categoryList，再通过 nextTick 渲染
watch: {
categoryList(e){
this.$nextTick( () => {
this.categoryList = e
this.getCateTypeList()
})
}
}
下面了解下nextTick的主要应用的场景及原因。
- 在 Vue 生命周期的
created()钩子函数进行的 DOM 操作一定要放在Vue.nextTick()的回调函数中
在created()钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，所以此处一定要将 DOM 操作的 js 代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的 DOM 挂载和渲染都已完成，此时在该钩子函数中进行任何 DOM 操作都不会有问题 。
- 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的 DOM 结构的时候，这个操作都应该放进
Vue.nextTick()的回调函数中。
Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的
Promise.then和MessageChannel，如果执行环境不支持，会采用setTimeout(fn, 0)代替。
例如，当你设置
vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程，但是如果你想在 DOM 状态更新后做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用Vue.nextTick(callback)。这样回调函数在 DOM 更新完成后就会调用。
new Vue({
// ...
methods: {
// ...
example: function () {
// 修改数据
this.message = 'changed'
// DOM 还没有更新
this.$nextTick(function () {
// DOM 现在更新了
// `this` 绑定到当前实例
this.doSomethingElse()
})
}
}
})
