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 在一个组件声明一个人,人有名,人有姓,输入姓和名.((&--&%--& ...
随机推荐
- Java基础系列--05_面向对象
1.概述: (1)面向过程:将问题一步一步的解决的过程(详细步骤),在C语言中所有的代码都是基于过程化的代码. (2)面向对象:面向对象是基于面向过程的编程思想,所有的事情都交由创建出来的对象去指挥. ...
- 浏览器仿EXCEL表格插件 版本更新 - 智表ZCELL产品V1.3.1更新
智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...
- Linux:Day18(上) dns服务基础进阶
DNS:Domain Name Service,协议(C/S,53/udp,53/tcp):应用层协议. BIND:Bekerley Internat Name Domain,ISC(www.isc. ...
- day正则表达式补充
# 2.正则 # 方法:findall | match | split | sub# a = 10# print(a.__hash__())# def fn():# pass# print(fn.__ ...
- day08(字符编码,字符与字节,文件操作)
一,复习 ''' 类型转换 1.数字类型:int() | bool() | float() 2.str与int: int('10') | int('-10') | int('0') | float(' ...
- php将字符串转为二进制数据串
/** * 将字符串转换成二进制 * @param type $str * @return type */ function StrToBin($str){ //1.列出每个字符 $arr = pre ...
- JS获取登录者IP和登录城市
登录城市:<sp class="cy"></sp><br /> 管理员个数:<font color=</strong>< ...
- 【刷题】【LeetCode】007-整数反转-easy
[刷题][LeetCode]总 用动画的形式呈现解LeetCode题目的思路 参考链接-空 007-整数反转 方法: 弹出和推入数字 & 溢出前进行检查 思路: 我们可以一次构建反转整数的一位 ...
- 2019-04-19 EasyWeb数据源问题
问题描述:今天增加了个新模块,为了让各个模块自己保留自己的数据源配置,所以把数据源配置类放入自己模块包中,但是进行请求发现数据源会先选择默认的数据源,导致报错说主数据源下不存在表:当我把配置文件放回统 ...
- python3中的 zip()函数 和python2中的 zip()函数 的区别
python3中的 zip()函数 和python2中的 zip()函数 的区别: 描述: zip() 函数用于将可迭代对象作为参数,将对象中对应的元素打包成一个个元组,然后返回由这些元组组成的对象. ...