zoukankan      html  css  js  c++  java
  • Vue.nextTick()的介绍和使用场景

    每次都很好奇这个干嘛的,然后百度之后还是不明白。今天就彻彻底底好好的弄明白这是干嘛的!!

    首先看一下vue文档

    nextTick(),是将回调函数延迟在下一次DOM更新数据后调用,简单的理解是:当数据更新了,在DOM中渲染后,自动执行该函数

    使用场景
    1.Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,原因是在created()钩子函数执行的时候并没有加载DOM,所以此阶段对DOM进操作也是无效的。所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。
    2.当项目中你想在改变DOM元素的数据后基于新的DOM做点什么,对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中;通俗的理解是:更改数据后当你想立即使用js操作新的视图的时候需要使用它。

    Vue.nextTick(callback) 使用原理:
    原因是,Vue是异步执行dom更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时,Vue会清空队列,并进行必要的DOM更新。
    当你设置 vm.someData = ‘new value’,DOM 并不会马上更新,而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情,就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

  • 相关阅读:
    android 仿微信聊天界面,以及语音录制功能
    程序员的鄙视链
    Spring 4 官方文档学习(十一)Web MVC 框架之URI Builder
    Spring 4 官方文档学习(十一)Web MVC 框架之Flash Attributes
    Spring 4 官方文档学习(十一)Web MVC 框架之resolving views 解析视图
    JDK中的序列化和反序列化
    HTTP/1.1 学习
    HttpComponents 基础接口/类与HTTP message的对应关系
    Apache HttpComponents 学习
    HttpClient学习之 客户端HTTP编程入门
  • 原文地址:https://www.cnblogs.com/JiAyInNnNn/p/11468261.html
Copyright © 2011-2022 走看看