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()的回调函数中。

  • 相关阅读:
    express 连接 moogdb 数据库
    数组 去重
    vue 路由meta 设置title 导航隐藏
    :src 三目运算
    axios baseURL
    js对象修改 键
    Swiper隐藏后在显示滑动问题
    字符串中的替换
    获取服务器时间
    vue a链接 添加参数
  • 原文地址:https://www.cnblogs.com/hixxcom/p/7976858.html
Copyright © 2011-2022 走看看