zoukankan      html  css  js  c++  java
  • vue中的$nextTick()

    vue中$nextTick()作用

    1、vue更新数据是异步的

    1.0中确实是通过v-el:xxx标记dom然后在组件里通过this.$els.xxx就可以获得这个dom对象了,$nextTick(() => {})与dom相关操作写在该函数回调中,确保DOM已渲染。

    2、什么是Vue.nextTick()

    在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的js代码。

    3、什么时候需要用到Vue.nextTick()

    你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()回调函数中。原因是,在created()钩子函数执行的时候DOM其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mouted钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。使用时机: el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子函数,此时页面并未全部渲染。
    在某个动作有可能改变DOM元素结构的时候,对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中。

  • 相关阅读:
    文件和数组的排序
    批量删除文档中的注释和空行
    strcat()的编写
    OpenGL鼠标旋转图像
    c++对文件操作的支持(二)
    汉字的16进制存储
    启动程序的c++方法
    HDU 2199 Can you solve this equation? 二分
    HDU 2899 Strange fuction 二分
    HDU 1233 还是畅通工程 最小生成树
  • 原文地址:https://www.cnblogs.com/hixxcom/p/7976858.html
Copyright © 2011-2022 走看看