vue api学习之nextTick的理解
对于 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(图例中第一个步骤,即'本次更新循环'):
- 首先修改数据,这是同步任务。同一事件循环的所有的同步任务都在主线程上执行,形成一个执行栈,此时还未涉及 DOM 。
- 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的理解的更多相关文章
- Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
- Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
- Vue – 基础学习(1):对生命周期和钩子函的理解
一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...
- Vue学习笔记-Django REST framework3后端接口API学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- vue API 知识点(1)---全局 API 总结
1.Vue.extend(options) 构造器,创建一个 子类 .参数是一个包含组件选项的对象 data 选项是特例,需要注意 在 Vue.extend() 中它必须是一个函数, <div ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
- 【VUE】VUE相关学习和知识备份
一.学习资料参考 1.1.Vue.js 官网:Vue.js https://cn.vuejs.org/ 官方文档:介绍 - Vue.js https://cn.vuejs.org/v2/guide/ ...
- RESTful API 学习
/********************************************************************************* * RESTful API 学习 ...
- VUE API 重点
VUE API 重点 生命周期方法 每个组件都有生命周期,是向 ReactJs 学习的. computed 在一个组件声明一个人,人有名,人有姓,输入姓和名.((&--&%--& ...
随机推荐
- Mysql5.6二进制包安装方法
1.Download MySQL Community Server 访问mysql官方网站转到下载页https://dev.mysql.com/downloads/mysql/5.6.html#dow ...
- 用addRoutes实现动态路由
原文转自前端路上,转载请注明出处. 之前在基于Vue实现后台系统权限控制一文中提到路由权限的实现思路,因为不喜欢在每次路由跳转的before钩子里做判断,所以在初始化Vue实例前对路由做了筛选,再用实 ...
- Storm入门(四)WordCount示例
一.关联代码 使用maven,代码如下. pom.xml 和Storm入门(三)HelloWorld示例相同 RandomSentenceSpout.java /** * Licensed to t ...
- Nmon实时监控并生成HTML监控报告
前面的博客介绍了服务端监控工具:Nmon使用方法,最近在github找到了一个nmon自动监控并生成HTML格式报告的工具:easyNmon,使用体验蛮不错的,这里介绍下它的安装及使用方法. 一.关于 ...
- codeforces#1139D. Steps to One (概率dp+莫比乌斯反演)
题目链接: http://codeforces.com/contest/1139/problem/D 题意: 在$1$到$m$中选择一个数,加入到一个初始为空的序列中,当序列的$gcd$和为$1$时, ...
- 自己常用易忘的CSS样式
鼠标小手: cursor:pointer 点击边框消失:outline:none; ul li下划线以及点消失: list-style-type:none; span 超出内容为...:overf ...
- 2019中山大学程序设计竞赛 Triangle
今天水了一发hdu上的中山校赛 这个题交了将近十遍才过...... 就是说给 n 个木棍,如果能找出3个能组成三角形的木棍就输出yes 反之输出no 乍一看很简单 一个排序遍历一遍就好了 但是n值太大 ...
- Spring Boot 2.x 编写 RESTful API (六) 事务
用Spring Boot编写RESTful API 学习笔记 Transactional 判定顺序 propagation isolation 脏读 不可重复读 幻读 不可重复读是指记录不同 (upd ...
- koa-static node服务器设置静态目录
最近毕设需要用到上传照片,但当node服务器成功获取前端传来的图片时,又不知道如何在页面获取服务器image目录下的图片,一直报以下错误: 问题主要是无法找到图片url,虽然可以一个个在app.js文 ...
- 「洛谷4197」「BZOJ3545」peak【线段树合并】
题目链接 [洛谷] [BZOJ]没有权限号嘤嘤嘤.题号:3545 题解 窝不会克鲁斯卡尔重构树怎么办??? 可以离线乱搞. 我们将所有的操作全都存下来. 为了解决小于等于\(x\)的操作,那么我们按照 ...