Vue: reactivity

Overview

The reactivity system is one of the Vue’s outstanding features. It’s responsible for transforming plain Javascript object to reactive view. When the object(data) is modified, it automatically update the view. The insight of the reactivity system will bring you a better understanding of it.

Principle

Reactivity in Vue from vuejs.org
Vue transform plain javascript object to Virtual DOM so that Vue is faster than traditional framework like Angular which use HTML DOM directly (you have to read more about Virtual DOM for fully understanding why). But how it make it and what Vue does behind the process of rendering? As we new a Vue instance, Vue will call data function to get the plain object, go through it recursively and convert it to getter and setter by using Object.defineProperty (that’s it will not work if you add properties after Vue instance has been created. The object returned by data function will not be called again after that). getter and setter are hoods for data tracking. When properties are accessed or modified, events are fired to notify the watcher (what’s inside the watcher need more in-deep investigation, probably like the watcher is Angular according to watch options) . Watchers will push the DOM-updating (re-render) call to a queue, then Vue will handle the queue when process thread is idle (nextTick).
update queue in Vue
As you can see, Vue handle the changes asynchronously. So watcher will just push one call to the queue even if there are multiple changes at one time. The Render function will be called at the final processing stage. Render function creates Virtual DOM Tree from the properties (that’s why we write render function as createElement), which will be finnally transformed to HTML DOM. With new specification of DOM, transformation from Virtual DOM to HTML DOM is fast (compared to DOM iteration and searching for target in Angular). For how to transform Virtual DOM to HTML DOM, you have to read the source code carefully)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值