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 相关文章推荐
用javascript实现在小方框中浏览大图的代码
Aug 14 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
JavaScript实现简单计算器功能
Dec 19 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 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
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
flash 得到自身url参数的代码
2009/11/15 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
Python标准库之循环器(itertools)介绍
2014/11/25 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
保洁主管岗位职责
2013/11/20 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
致400米运动员广播稿
2014/02/07 职场文书
同学聚会主持词
2014/03/18 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
新教师教学工作总结
2015/08/14 职场文书
Mysql Show Profile
2021/04/05 MySQL
Pygame Draw绘图函数的具体使用
2021/11/17 Python
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库