vue 容易忽略的点

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

推荐阅读更多精彩内容

  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 6,868评论 1 51
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 4,178评论 0 29
  • Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务 处理逻辑、数据...
    云中一樵夫阅读 663评论 0 1
  • 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: 实例生命周期钩子 每个 Vue 实例...
    Timmy小石匠阅读 847评论 0 11
  • 本系列在简书首发,转载请注明出处,作者うちはイタチ写此系列文章,我会假设你是非程序行业的人员,并尽量剥开讲细。首先...
    2eff02f813df阅读 720评论 0 1