zoukankan      html  css  js  c++  java
  • 笔记:vue.nextTick()方法的使用详解

    vue.nextTick定义:

    在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM.

    简单理解:数据更新了,在dom渲染后立即执行该函数

    举例

     

     注意:Vue实现响应并不是数据发生变化之后DOM立即变化,而是按照一定的策略进行DOM更新。$nextTick是在下次DOM更新循环结束之后执行回调,在修改数据之后使用nextTick,则可以再回调中获取更新后的DOM

    Vue.nextTick()使用的场景

    1.Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue。nextTick()的回调函数。原因是,created的钩子函数执行时,DOM其实并未进行任何渲染,所以一定要将DOM操作的js代码放进Vue.nextTick()回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOm挂载已完成。

     2.当项目中你想在改变DOM元素的数据后基于新的dom做点什么,对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中。通俗讲:更新数据后,当你想立即使用js操作新的视图的时候需要使用它

     正确做法:vue改变dom元素结构后使用vue.$nextTick()方法来实现dom数据更新后延迟执行后续代码

     3.使用第三方插件

  • 相关阅读:
    创建一个Flex工程
    WebORB手动配置要点
    热血三国地图增强版
    vs2008 sp1无法加载实体模型工具的解决办法
    Berkeley DB for .NET使用
    FluorineFx使用自定义VO(实现IExternalizable接口)
    PD生成数据表时出现“未能准备语句”
    替换AsWing的JTree组件中的图标
    参数传递
    c# 32位16位MD5加密
  • 原文地址:https://www.cnblogs.com/charon-66/p/13259824.html
Copyright © 2011-2022 走看看