对于 Vue.nextTick 方法,之前没有听说过,突然听到别人提起,貌似作用挺大。以下为学习心得。
官方文档上这样定义:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
看定义就是一头雾水,这定义对于我这种初级选手来说写的也是不明不白。
1、DOM更新循环指的是什么
2、下次更新循环是什么时候
3、修改数据之后使用,是加快了数据更新进度吗
4、在什么情况下用到
带着这些问题去使用一下nextTick
首先写了个demo,按照官方文档的操作过程,试了一下修改数据之后获取更新后DOM的值
<div id="app">
<div id="div" v-if="showDiv">这是一段文本</div>
<button @click="getText">获取 div 内容 </button>
</div> <script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
showDiv:false
},
methods: {
getText(){
this.showDiv = true
//修改代码后获取dom的值
var text = document.getElementById('div').innerHTML;
console.log(text,"text")
// this.$nextTick().then(()=>{
// var text1 = document.getElementById('div').innerHTML;
// console.log(text1)
// })
}
}
})
</script>

果然,浏览器是明智的,报错了

之后改了代码,如上述代码,两个调换一下,把上边的注释掉,下边的代码打开,然后在浏览器中查看,果然能拿到div里的值

在 Vue 的文档中,说明 Vue 是异步执行 DOM 更新的。

查看网上资料,对异步有这样的解释

(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
(2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
(3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(4)主线程不断重复上面的第三步。

从网上搜了张图片

下面来说一下对这张图的理解

Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新

第一个 tick(图例中第一个步骤,即'本次更新循环'):

  1. 首先修改数据,这是同步任务。同一事件循环的所有的同步任务都在主线程上执行,形成一个执行栈,此时还未涉及 DOM 。
  2. Vue 开启一个异步队列,并缓冲在此事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。

第二个 tick(图例中第二个步骤,即'下次更新循环'):

同步任务执行完毕,开始执行异步 watcher 队列的任务,更新 DOM 。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel 方法,如果执行环境不支持,会采用 setTimeout(fn, 0) 代替。

补充一下,在这里我也试了用setTimeout获取div里的内容,确实能获取到

methods: {
getText(){
this.showDiv = true
//修改代码后获取dom的值
//var text = document.getElementById('div').innerHTML;
//console.log(text,"text")
// this.$nextTick().then(()=>{
// var text1 = document.getElementById('div').innerHTML;
// console.log(text1)
// })
setTimeout(()=>{
var text1 = document.getElementById('div').innerHTML;
console.log(text1)
}, 0)
}
}

也能拿到结果

第三个 tick(图例中第三个步骤):

此时就是文档所说的:下次 DOM 更新循环结束之后。

用途:需要在视图更新之后,基于新的视图进行操作。

vue api学习之nextTick的理解的更多相关文章

  1. Vue中$nextTick的理解

    Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...

  2. Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别

    Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别

  3. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

  4. Vue学习笔记-Django REST framework3后端接口API学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  5. vue API 知识点(1)---全局 API 总结

    1.Vue.extend(options) 构造器,创建一个 子类 .参数是一个包含组件选项的对象 data 选项是特例,需要注意 在 Vue.extend() 中它必须是一个函数, <div ...

  6. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

  7. 【VUE】VUE相关学习和知识备份

    一.学习资料参考 1.1.Vue.js 官网:Vue.js https://cn.vuejs.org/ 官方文档:介绍 - Vue.js https://cn.vuejs.org/v2/guide/ ...

  8. RESTful API 学习

    /********************************************************************************* * RESTful API 学习 ...

  9. VUE API 重点

    VUE API 重点 生命周期方法 每个组件都有生命周期,是向 ReactJs 学习的. computed 在一个组件声明一个人,人有名,人有姓,输入姓和名.((&--&%--& ...

随机推荐

  1. Mysql5.6二进制包安装方法

    1.Download MySQL Community Server 访问mysql官方网站转到下载页https://dev.mysql.com/downloads/mysql/5.6.html#dow ...

  2. 用addRoutes实现动态路由

    原文转自前端路上,转载请注明出处. 之前在基于Vue实现后台系统权限控制一文中提到路由权限的实现思路,因为不喜欢在每次路由跳转的before钩子里做判断,所以在初始化Vue实例前对路由做了筛选,再用实 ...

  3. Storm入门(四)WordCount示例

    一.关联代码 使用maven,代码如下. pom.xml  和Storm入门(三)HelloWorld示例相同 RandomSentenceSpout.java /** * Licensed to t ...

  4. Nmon实时监控并生成HTML监控报告

    前面的博客介绍了服务端监控工具:Nmon使用方法,最近在github找到了一个nmon自动监控并生成HTML格式报告的工具:easyNmon,使用体验蛮不错的,这里介绍下它的安装及使用方法. 一.关于 ...

  5. codeforces#1139D. Steps to One (概率dp+莫比乌斯反演)

    题目链接: http://codeforces.com/contest/1139/problem/D 题意: 在$1$到$m$中选择一个数,加入到一个初始为空的序列中,当序列的$gcd$和为$1$时, ...

  6. 自己常用易忘的CSS样式

    鼠标小手:   cursor:pointer 点击边框消失:outline:none; ul li下划线以及点消失: list-style-type:none; span 超出内容为...:overf ...

  7. 2019中山大学程序设计竞赛 Triangle

    今天水了一发hdu上的中山校赛 这个题交了将近十遍才过...... 就是说给 n 个木棍,如果能找出3个能组成三角形的木棍就输出yes 反之输出no 乍一看很简单 一个排序遍历一遍就好了 但是n值太大 ...

  8. Spring Boot 2.x 编写 RESTful API (六) 事务

    用Spring Boot编写RESTful API 学习笔记 Transactional 判定顺序 propagation isolation 脏读 不可重复读 幻读 不可重复读是指记录不同 (upd ...

  9. koa-static node服务器设置静态目录

    最近毕设需要用到上传照片,但当node服务器成功获取前端传来的图片时,又不知道如何在页面获取服务器image目录下的图片,一直报以下错误: 问题主要是无法找到图片url,虽然可以一个个在app.js文 ...

  10. 「洛谷4197」「BZOJ3545」peak【线段树合并】

    题目链接 [洛谷] [BZOJ]没有权限号嘤嘤嘤.题号:3545 题解 窝不会克鲁斯卡尔重构树怎么办??? 可以离线乱搞. 我们将所有的操作全都存下来. 为了解决小于等于\(x\)的操作,那么我们按照 ...