vue.js源码解读系列 - 双向绑定具体如何初始化和工作
2018年04月04日1014 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
标签下打赏
您的支持将鼓励我继续努力与分享。


评论
正在加载验证码......
我有一部分看不懂~😭
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