vue中$nextTick的用法讲解


Posted in Javascript onJanuary 17, 2019

vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时,我们经常用到一个方法是this.$nextTick,相信你也用过。我常用的场景是在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要用到本章介绍的函数。

虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做。比如你在Vue生命周期的created()/mounted()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()/mounted()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

vue中$nextTick的用法讲解

为什么要用nextTick?

请看如下一段代码

new Vue({
 el: '#app',
 data: {
  list: []
 },
 mounted: function () {
  this.get()
 },
 methods: {
  get: function () {
   this.$http.get('/api/article').then(function (res) {
    this.list = res.data.data.list
    // ref list 引用了ul元素,我想把第一个li颜色变为红色
    this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
   })
  },
 }
})

我在获取到数据后赋值给数据模型中list属性,然后我想引用ul元素找到第一个li把它的颜色变为红色,但是事实上,这个要报错了,我们知道,在执行这句话时,ul下面并没有li,也就是说刚刚进行的赋值操作,当前并没有引起视图层的更新。因此,在这样的情况下,vue给我们提供了$nextTick方法,如果我们想对未来更新后的视图进行操作,我们只需要把要执行的函数传递给this.$nextTick方法,vue就会给我们做这个工作。

new Vue({
 el: '#app',
 data: {
  list: []
 },
 mounted: function () {
  this.$nextTick(() => {
    this.get()
  })
 },
 methods: {
  get: function () {
   this.$http.get('/api/article').then(function (res) {
    this.list = res.data.data.list
    // ref list 引用了ul元素,我想把第一个li颜色变为红色
    this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
   })
  },
 }
})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
Extjs 几个方法的讨论
Jan 28 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
JavaScript数据类型详解
Apr 01 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
javaScript中的空值和假值
Dec 18 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 #Javascript
js中Array对象的常用遍历方法详解
Jan 17 #Javascript
vuex如何重置所有state(可定制)
Jan 17 #Javascript
node app 打包工具pkg的具体使用
Jan 17 #Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 #Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 #Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 #Javascript
You might like
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
ThinkPHP中的关联模型注意点
2014/06/16 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
Python基本语法经典教程
2016/03/11 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
大学毕业生自荐书怎么写?
2014/01/06 职场文书
学术会议邀请函范文
2014/01/22 职场文书
班主任对学生的评语
2014/04/26 职场文书
酒店管理求职信
2014/06/09 职场文书
微笑服务标语
2014/06/24 职场文书
2014年检验员工作总结
2014/11/19 职场文书
华清池导游词
2015/02/02 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
施工安全保证书
2015/05/09 职场文书
详解JS数组方法
2021/11/20 Javascript