-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
看了多篇Vue内核文章原理还是不太明白,看看这篇试试? #20
Comments
作者:殷荣桧@腾讯 Vue最精华的部分就是双向绑定,在此基础上,又添加了computed,watch, methods等方法。所以要看懂Vue内核,那第一步肯定就是要了解Vue双向绑定的原理,但是说实话,看了网上很多,好多代码都是经过重构优化后的代码,失去了代码原始的面貌,不太易于理解。所以决定写一个原始一点但是又尽可能简洁一点的,但是原理绝对是Vue双向绑定的原理,确保你看懂这篇文章,就能够了解Vue内核。采用最少的代码,来实现一个个功能。有什么写的不妥的地方,烦请在仓库issue中指出,我好及时修正。 如果你对当前流行的轮子的原理感兴趣,下面这些都是我用尽可能少的代码,尽可能易于理解的方式实现的框架的原理,这些你也可以看看,有疑问欢迎在各个仓库下留言: 接下来所讲的这些就为了实现下面这个简单的双向绑定:
在chrome devtools控制台中通过this.vue.name = 'willen'可以自动更新页面中的name为’willen‘。看看结果: (1)从最容易的Dependency.js开始说。 先来看代码:
从代码看下来,Dep就是subs容器,是一个数组,将一个个的watcher都放到subs容器中。watcher就是一个个的回调函数,都放在subs的容器中等待触发。addSub中的this.subs.push(watcher)就是将一个个的watcher回调函数放入到其中。notify就是用来将subs中的watcher都触发掉。watcher中就是一个一个更新页面中对应的变量的函数。这个下面会说到。 (2)接下来就看看这个watcher是什么?
(3) 接下来看一下Observer,这个类是做什么工作的。
(4) 最后再一起来看看编译类Compile,这个是用来对{{name}}进行编译,说白了就是在你的实例的data对象中,找到name: 'jackieyin',然后在页面上将{{name}}替换为‘jackieyin’
(5)这个时候就可以来组装出一个我们自己的小型的Vue了。
(6)大功告成,把我们所写的零件组装在一起试一下我们的小型的vue是否工作正常。
怎么样,搞定了,其实,这只是Vue的冰山一角(下图中的绿色框框的部分),在这个仓库中还实现了一系列vue的功能,如果你有兴趣可以一个commit一个commit的往上看,每个commit都只实现一个完整的细小的功能,而且代码量都尽可能的少,你如果想看一定能看懂。这仓库都是没有使用虚拟DOM来实现,更新颗粒度细,现在的Vue降低了更新的颗粒度,用了虚拟DOM,但是Vue中双向绑定的原理始终未变,所以这篇文章还是需要看懂的,老弟。以后有时间我再研究研究虚拟DOM写个仓库。 |
No description provided.
The text was updated successfully, but these errors were encountered: