Vue中this.$nextTick的作用及用法


Posted in Javascript onFebruary 04, 2020

Vue实现响应式后DOM的变化

data对象中数据改变是如何追踪的?

vue将遍历data对象中所有的属性,并通过 Object.defineProperty 把这些属性全部转为 getter/setter;但是我们是没有办法看到 getter/setter的,但是在内部它们让 Vue 能够追踪依赖,在属性被访问和修改时通知变更。

每个组件都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。

Vue是无法检测到data对象属性的添加和删除

原因:Vue在对初始化组件时会对对象属性执行getter/setter转化,所以属性必须在data对象上存在才能让Vue将它转化为初始化。

var vm = new Vue({
 data:{
 a:1
 }
 })

 // `vm.a` 是响应式的

 vm.b = 2
 // `vm.b` 是非响应式的

如何动态添加根级别的响应式属性【就是对data添加属性】

this.$set(this.someObject,'b',2)

异步更新队列

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。

如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。

然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。

Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0) 代替。

例如,当你设置 vm.someData = 'new value',该组件不会立即重新渲染。

当刷新队列时,组件会在下一个事件循环“tick”中更新。

多数情况我们不需要关心这个过程,但是如果你想基于更新后的 DOM 状态来做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。例如:

<div id="example">{{message}}</div>
 var vm = new Vue({
  el: '#example',
  data: {
  message: '123'
  }
 })
 vm.message = 'new message' // 更改数据
 vm.$el.textContent === 'new message' // false
 Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
 })

在组件内使用 vm.$nextTick() 实例方法特别方便,因为它不需要全局 Vue,并且回调函数中的 this 将自动绑定到当前的 Vue 实例上:

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
  return {
   message: '未更新'
  }
  },
  methods: {
  updateMessage: function () {
   this.message = '已更新'
   console.log(this.$el.textContent) // => '未更新'
   this.$nextTick(function () {
   console.log(this.$el.textContent) // => '已更新'
   })
  }
  }
 })

因为 $nextTick() 返回一个 Promise 对象,所以你可以使用新的 ES2017 async/await 语法完成相同的事情:

methods: {
updateMessage: async function () {

this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
await this.$nextTick()
console.log(this.$el.textContent) // => '已更新'
}
}

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM

实例化理解Vue响应化

<div id="app">

<div>Price :¥{{ price }}</div>
<div>Total:¥{{ price * quantity }}</div>
<div>Taxes: ¥{{ totalPriceWithTax }}</div>
<button @click="changePrice">改变价格</button>
</div>
var app = new Vue({
el: '#app',
data() {

return {
 price: 5.0,
 quantity: 2
};
},
computed: {

totalPriceWithTax() {
 return this.price * this.quantity * 1.03;
}
},
methods: {

changePrice() {
 this.price = 10;
}
}
})

上例中当price 发生变化的时候,Vue就知道自己需要做三件事情:

  • 更新页面上price的值
  • 计算表达式 price*quantity 的值,更新页面
  • 调用totalPriceWithTax 函数,更新页面

数据发生变化后,会重新对页面渲染,这就是Vue响应式,那么这一切是怎么做到的呢?

想完成这个过程,我们需要:

  • 侦测数据的变化
  • 收集视图依赖了哪些数据
  • 数据变化时,自动“通知”需要更新的视图部分,并进行更新

对应专业俗语分别是:

  • 数据劫持 / 数据代理
  • 依赖收集
  • 发布订阅模式

总结

再来回顾下整个过程:

Vue中this.$nextTick的作用及用法

在new Vue()后, Vue 会调用_init函数进行初始化,也就是init 过程,在 这个过程Data通过Observer转换成了getter/setter的形式,来对数据追踪变化,当被设置的对象被读取的时候会执行getter函数,而在当被赋值的时候会执行setter函数。

当外界通过Watcher读取数据时,会触发getter从而将Watcher添加到依赖中。

在修改对象的值的时候,会触发对应的setter,setter通知之前依赖收集得到的 Dep 中的每一个 Watcher,告诉它们自己的值改变了,需要重新渲染视图。这时候这些 Watcher就会开始调用update来更新视图。

以上就是本次介绍的全部相关知识点内容,如果大家学习中有任何补充可以联系三水点靠木小编。

Javascript 相关文章推荐
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
iview实现图片上传功能
Jun 29 Javascript
JS中this的4种绑定规则详解
Feb 04 #Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 #Javascript
Preload基础使用方法详解
Feb 03 #Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 #Javascript
使用preload预加载页面资源时注意事项
Feb 03 #Javascript
jQuery实现小火箭返回顶部特效
Feb 03 #jQuery
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 #Javascript
You might like
Dedecms常用函数解析
2008/02/01 PHP
php checkbox 取值详细说明
2010/08/19 PHP
php记录日志的实现代码
2011/08/08 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
php中__toString()方法用法示例
2016/12/07 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
angularjs $http调用接口的方式详解
2018/08/13 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
js实现内置计时器
2019/12/16 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
python根据文件大小打log日志
2014/10/09 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
Django单元测试工具test client使用详解
2019/08/02 Python
scrapy-splash简单使用详解
2021/02/21 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
揭牌仪式主持词
2014/03/19 职场文书
禁毒宣传标语
2014/06/19 职场文书
驾驶员安全责任书
2014/07/22 职场文书
2014年教师工作总结
2014/11/10 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers