Vue.js 2.0 深入响应式原理

这篇具有很好参考价值的文章主要介绍了Vue.js 2.0 深入响应式原理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

大部分的基础内容我们已经讲到了,现在讲点底层内容。Vue 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图。这会让状态管理变得非常简单且直观,不过理解它的原理以避免一些常见的陷阱也是很重要的。在本节中,我们将开始深挖 Vue 响应系统的底层细节。

如何追踪变化

把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。这是 ES5 的特性,不能打补丁实现,这便是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。

用户看不到 getter/setters,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同,所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。

每个组件实例都有相应的 watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。

Vue.js 2.0 深入响应式原理

变化检测问题

受现代 Javascript 的限制(以及 Object.observe 的废弃),Vue 不能检测到对象属性的添加或删除。因为 Vue 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue 转换它,这样才能让它是响应的。例如:

var vm = new Vue({
  data:{
  a:1
  }
})
// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive properties)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上:

Vue.set(vm.someObject, 'b', 2)

您还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名:

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

有时你想向已有对象上添加一些属性,例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是,添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象,让它包含原对象的属性和新的属性:

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

也有一些数组相关的问题,之前已经在列表渲染中讲过。

由于 Vue 不允许动态添加根级响应式属性,所以你必须在初始化实例前声明根级响应式属性,哪怕只是一个空值:

var vm = new Vue({
  data: {
    // 声明 message 为一个空值字符串
    message: ''
  },
  template: '<div>{{ message }}</div>'
})
// 之后设置 `message` 
vm.message = 'Hello!'

如果你不在 data 对象中声明 message,Vue 将发出警告表明你的渲染方法正试图访问一个不存在的属性。

这样的限制在背后是有其技术原因的,在依赖项跟踪系统中,它消除了一类边界情况,也使 Vue 实例在类型检查系统的帮助下运行的更高效。在代码可维护性方面上这也是重要的一点:data 对象就像组件状态的模式(Schema),在它上面声明所有的属性让组织代码更易于被其他开发者或是自己回头重新阅读时更加快速地理解。

异步更新队列

你应该注意到 Vue 执行 DOM 更新是异步的,只要观察到数据变化,Vue 就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个 watcher 被多次触发,只会推入一次到队列中。然后,在接下来的事件循环中,Vue 刷新队列并仅执行必要的 DOM 更新。Vue 在内部尝试利用原生的 Promise.then 和 MutationObserver 来调用异步队列,如果执行环境不兼容,会采用 setTimeout(fn, 0) 代替。

例如,当你设置 vm.someData = 'new value' ,该组件不会马上被重新渲染。当刷新队列时,这个组件会在下一次事件循环清空队列时更新。我们基本不用关心这个过程,但是如果你想在 DOM 状态更新后做点什么,这就可能会有些棘手。一般来讲, Vue 鼓励开发者沿着数据驱动的思路,尽量避免直接接触 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: 'not updated'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = 'updated'
      console.log(this.$el.textContent) // => 'not updated'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => 'updated'
      })
    }
  }
})

 文章来源地址https://www.toymoban.com/news/detail-410601.html

到了这里,关于Vue.js 2.0 深入响应式原理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 1200 + AI工具大收录,58个分类,支持大部分行业

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一、使用步骤 总结 随着人工智能技术的不断发展,越来越多的AI工具涌现出来,它们在各个领域中得到了广泛的应用。除了常用的文本、图片、视频AI工具,还有普通办公、设计、编程、

    2024年02月16日
    浏览(41)
  • 用Matlab实现车牌分割(可识别大部分蓝色、绿色车牌)

          最近学习了数字图像处理的腐蚀、膨胀、闭运算、开运算等内容,于是想进行实践。车牌分割是一个不错的选择,里面涉及到了很多知识点。       这里先简述一下车牌分割的思路和流程(这里以绿色车牌为例): 1.定位绿色车牌区域 2.车牌矫正(如果图像中车牌是倾

    2024年02月12日
    浏览(46)
  • 安全清理大部分的C盘内存(一般10GB以上)

     如果感觉有用请 关注,点赞,收藏!  下次分享更有用的干货~ 欢迎转载,请注明出处! 用360清理发现, windows search日志 占用了70多个G空间,先清除!    该日志文件有撒用呢?  如果没有这个日志文件,我们在文件系统进行搜索的时候就会比较慢了,而且还会出现这样的

    2023年04月15日
    浏览(56)
  • MySQL 字段为 NULL 的5大坑,大部分人踩过

    在验证问题之前,我们先建一张测试表及测试数据。   构建的测试数据,如下图所示:   有了上面的表及数据之后,我们就来看当列中存在 NULL 值时,究竟会导致哪些问题? 我们都知道, count 是用来计数的,当表中某个字段存在 NULL 值时,就会造成 count 计算出来的数据丢

    2024年02月05日
    浏览(56)
  • 校园综合服务平台V3.9.2 源码修复大部分已知BUG

    校园综合服务平台,版本更新至V3.9.1  ,源码功能强大,ui 精美, 功能包含但不限于校园跑腿,外卖,组局,圈子,商城,抽奖,投票,团购,二手市场,签到,积分商城,一元购等!即刻源码持续更新

    2024年04月26日
    浏览(55)
  • windows11(win10大部分通用)系统C盘清理 | 深度优化

    前言 :首先对于计算机来说,Windows操作系统一般是安装在磁盘驱动器的C盘中,运行时会产生许多  垃圾文件  ,C盘空间在一定程度上会越来越小。而把它作为生产力工具的我们,时间越久,C盘常常会提示显示其内存已不足。C盘容量不足将会极大  影响系统的运行速度  ,

    2024年02月05日
    浏览(78)
  • 面试官:synchronized 能不能禁止指令重排序?大部分人都会答错!

    首先一定要明确:指令重排序和有序性是不一样的。这一点非常重要。 我们经常都会这么说: volatile能保证内存可见性、禁止指令重排序但是不能保证原子性。 synchronized能保证原子性、可见性和有序性。 注意:这里的有序性并不是代表能禁止指令重排序。 举个例子: 在双

    2024年02月11日
    浏览(40)
  • 50个Linux常用命令行快捷键(大部分适配Mac OS)

    50个Linux常用命令行快捷键 (大部分适配Mac OS) 移动光标到行首: Ctrl + a 移动光标到行尾: Ctrl + e 移动光标到上一个单词的开头: Ctrl + ← 移动光标到下一个单词的开头: Ctrl + → 删除光标之前的字符: Ctrl + u 删除光标之后的字符: Ctrl + k 删除光标之前的单词: Ctrl + w 清

    2024年02月10日
    浏览(66)
  • 数学建模美赛E、F题备考策略(自用,大部分复制粘贴)

    这里要讲一下故事的背景,我们小组三个人都是大一大二的学生,我的队友们都是数学专业的学生,所以比赛中的编程部分就交给了我这样的工业工程系的选手。我们在看完了历年赛题后一直认为:前面的几题我们都很难建立出很棒的模型,因此我们将目光对准E、F两题,希

    2024年01月17日
    浏览(50)
  • 教你一步解决大部分wallpaper engine使用时卡顿、鼠标延迟的问题

    解决方法: 在英伟达的Geforce Experience里点击设置,如果不知道怎么进,只需要搜索Experience就可以了 将里面的“在游戏内覆盖”勾选去掉即可 OK,解决了

    2024年02月15日
    浏览(367)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包