直接看vue2.0吧。这篇文章在公司分享过，终于写出来了。我们采用用最精简的代码，还原vue2.0响应式架构实现
以前写的那篇 vue 源码分析之如何实现 observer 和 watcher可以作为本次分享的参考。
为了好演示我们只考虑最简单的情况，如果看了vue 源码分析之如何实现 observer 和 watcher可能就会很好理解，不过没关系，我们三言两语再说说，这段代码要实现的功能就是将
中data 里面所有的属性置于 observer，然后data里面的属性，比如 text 以改变，就引起_update()函数调用进而重新渲染，是怎样做到的呢，我们知道其实就是赋值的时候就要改变对吧，当我给data下面的text 赋值的时候 set 函数就会触发，这个时候 调用_update 就ok了，但是
template里面只用到了data上的两个属性name和age，但是当我改变height的时候，用第一步的代码，会不会触发重新渲染?会!，但其实不需要触发重新渲染，这就是问题所在!!
首先，template最后都是编译成render函数的(具体怎么做，就不展开说了，以后我会说的)，然后render 函数执行完就会得到一个虚拟DOM，为了好理解我们写写最简单的虚拟DOM
这就是 虚拟最简单虚拟DOM,tag是html 标签名，data 是包含诸如 class 和 style 这些标签上的属性，childen就是子节点，关于虚拟DOM做梦梦见洗头就不展开说了。
回到开始的问题，也就是说，我得知道，render 函数里面依赖了vue实例里面哪些变量(只考虑render 就可以，因为template 也会是帮你编译成render)。叙述有点拗口，还是看代码吧
就像这段代码，render 函数里其实只依赖text，并没有依赖 name和 age,所以，我们只要text改变的时候
我们自动触发 render 函数 让它生成一个虚拟DOM就ok了(剩下的就是这个虚拟DOM和上个虚拟DOM做比对，然后操作真实DOM，只能以后再说了)，那么我们正式考虑一下怎么做
回到最那张图，我们知道data上的属性设置defineReactive后，修改data 上的值会触发 set。
对，我们可以在做做手脚，我们先执行一下render，我们看看data上哪些属性触发了get，我们岂不是就可以知道 render 会依赖data 上哪些变量了。
(其实不仅是render，任何一个变量的改别，是因为别的变量改变引起，都可以用上述方法，也就是computed 和 watch 的原理，也是mobx的核心)
我们写一个依赖收集的类，每一个data 上的对象都有可能被render函数依赖，所以每个属性在defineReactive
然后，当执行render 函数去touch依赖的时候，依赖到的变量get就会被执行，然后我们就可以把这个 render 函数加到 subs 里面去了。
当我们，set 的时候 我们就执行 notify 将所有的subs数组里的函数执行，其中就包含render 的执行。
好我们解释一下 Dep.target 因为我们得区分是，普通的get，还是在查找依赖的时候的get，
vue2.0 在重新渲染后做diff 的时候是不比较的，vue2.0比 达到性能最大化的react 还要快的一个原因
点赞 0新品更多三星Galaxy A50再 配置大容量电池华为P smart 2019即将登陆英国米家投影仪青春版售价公布：2499元观点更多人工智能2018中国AI手机行业报告：AI芯片与AI算法成关键5G雷军“”的5G公司 高通刚刚投了云计算盘点云计算2018： 安全和赢利成未来重心5G华为谈5G：技术领先 公司在全球会严格合规经营微博/微信
每日头条、业界资讯、热点资讯、爆料，全天微博播报。各种爆料、内幕、花边、资讯一网打尽。百万互联网粉丝互动参与，TechWeb微博期待您的关注。
本文由来源于财鼎国际(www.hengpunai.cn)
网友评论 ()条 查看