汪微的博客
zane,做一个有思维的开发者

汪微的博客

vue.js源码解读系列 - 双向绑定具体如何初始化和工作

2018年04月04日98 browse

Vue.js之所有能实现数据的双向绑定,最核心也是最基础的是Object.defineProperty的使用。

那么 new Vue() 之后,option.data 的数据具体是如何绑定到 Vue,又如何进行数据双向绑定的呢?

new Vue() -> 
this._init() -> 
initState(vm) -> 
observe(vm._data = {}, true) -> 
new Observer(value) -> 
this.observeArray(value),this.walk(value) ->
defineReactive() -> 
Object.defineProperty

vue.js的option.data 就是如此的进化,最终所有data都成为 vm._data 的可观察者对象。

那么如何让vm.name的改变同步到vm._data.name的改变呢,在vue中做了一层代理,看下图。


这样就能够达到  vm.name的任何操作都会反映到vm._data.name之上,vue的props也是同理。


我们一步一步的来看流程:

1、this._init()


2、initState(vm)


3、observe(vm._data = {}, true)



4、new Observer(value) 


5、this.observeArray(value),this.walk(value)


6、defineReactive(),Object.defineProperty



补充:

首先来看一张官网的图:


Vue首先会调用所有使用的数据,从而触发所有的 getter 函数,进而通过Dep对象收集所有响应式依赖,调用所有Watcher执行Render 操作,其中会进行虚拟Dom的存储和比较,进而渲染页面。

当有数据变更时会触发 setter 函数,触发dep.notify(),进而调用Watcher的update,推入Vue的异步观察队列中,最终调用Watch的getter或者cb方法进而调用vm._update(),再调用vm__patch__方法进行虚拟DOM的diff,并最终渲染到页面。

对于数组的操作:

Vue对数组的方法进行了一定的处理:



defineReactive方法中的Dep.target的值是什么

Dep.target实际上是一个Watcher实例



总结:

  • 理解Vue的mvvm模式
  • 知道vm.option.data如何初始化并转化成观察者对象
  • 理解更改data是如何进行调用Watcher并进行更新


博主 zane 发表于 2018-04-04 11:15:55,添加在了 vue 标签下

打赏

您的支持将鼓励我继续努力与分享。

扫码打赏,建议金额1-10元

提醒:打赏金额将直接进此方账号,无法退款,请您谨慎操作。

评论

正在加载验证码......

提交

我有一部分看不懂~😭

2019-04-28 11:18:48

是的 是new Vue(),写错了

2019-04-18 17:21:43


2019-04-15 09:57:36

👍

2018-11-15 17:09:44

发发发

2018-08-19 20:37:34

😀

2018-05-28 15:48:40

怎么才能达到这种高度呢😖

2018-05-16 21:52:04