vue 响应式与数据更新,dom更新与安全抓取

响应式与数据更新

在vue中,需要展示在页面上的数据必须在data中声明,没有在data中声明的属性将不会被vue感应。

vue会使用Object.defineProperty 方法 将data中的属性变成getter/setter型属性,每一个vue组件会对应一个watcher,它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。

虽然在初始化之后,不能去声明data中的属性(对于已经创建的实例,Vue 不允许动态添加根级别的响应式属),

但可以对嵌套对象中添加属性,在开发过程中,往往会遇到一个问题,即某个嵌套对象中增加或删除了某个属性,但页面表现上,对应元素没有生成或被删除。出现这个问题的原因在于vue无法检测到对象属性的添加和删除,如果要添加或删除属性,要生成新对象,替换这个老对象 ,示例:

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


vue对dom的更新是一个异步行为,如上述代码,并不是执行了这一句,someObject对应的dom中的值就会立即改变,如果在这句后面直接抓取dom取值,那么取得的还是旧值。 在实际开发中,如果混合使用了data数据更新,与dom抓取取值,很可能出现值不是最新的情况。

这个问题的根本原因就是vue对dom的更新是一个异步行为,dom并没有马上更新,实际上,vue在对数据更新时,会创建一个异步队列,一次性更新同一个事件循环中设置的所有数据,组件会在下一个事件循环更新(即异步队列中的数据会在下一个事件循环中更新)。vue提供了nextTick(),该方法接收一个回调函数,回调函数将在 DOM 更新完成后被调用,即可保证回调中抓取的dom值为最新值。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,086评论 0 29
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,282评论 0 25
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,242评论 6 13
  • VUE介绍 Vue的特点构建用户界面,只关注View层简单易学,简洁、轻量、快速渐进式框架 框架VS库库,是一封装...
    多多酱_DuoDuo_阅读 2,773评论 1 17
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 3,401评论 0 25