vue 容易忽略的点
2018-05-20 本文已影响0人
蘑菇酱960903
- 关于this.$refs获取dom节点
在mounted中使用this.$refs需要注意，虽然mounted表示dom节点结构已经准备就绪，这种准备就绪不包括那些通过数据动态操作dom的，例如v-if / v-show / v-for，这些操作生成的dom节点不会在mounted阶段被获取 - vue 生命周期
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列
created: dom节点还没有渲染，数据已经准备好
mounted： dom节点渲染完成，实例挂载完毕 - vm.$nextTick(callback)
在 Vue 生命周期的 created() 钩子函数进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中。原因是什么呢，原因是在 created() 钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，所以此处一定要将 DOM 操作的 js 代码放进 Vue.nextTick() 的回调函数中。与之对应的就是 mounted 钩子函数，因为该钩子函数执行时所有的 DOM 挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 ；；；在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的 DOM 结构的时候，这个操作都应该放进 Vue.nextTick() 的回调函数中。
发生阶段：在dom节点数据更新完毕之后，dom节点渲染之前
