<p class="jhl-title"><span class="Apple-converted-space">踏入前端,步入玄学
17年底至18年初附带做了vue的一些框架搭建,中途断断续续用了部分vue,时隔几个月后的工作又拾起vue,对于一些原理性的知识淡忘了,正值这段时间使用中遇到了一些坑,又拨了部分代码出来温习温习。
正式进入大前端,新同事称谓的玄学...
读在最前面:
1、本文根据问题,讲述大致 Vue虚拟Dom Diff 思路、数据响应式机制相关,源码版本 Vue.js v2.5.17-beta.0
2、知识点:vue virtual dom diff、 observe 、 watch、render ,各知识点暂不深入剖析
3、阅读本文,读者应了解Vue有一定的前端基础,知道一些名词概念如:render、vnode、virtual dom
4、本文先引出问题及原理,然后单用2个实现给出详情解析
<p class="jhl-title">直接甩疑问案例,Fire!
<p class="jhl-item">问1:当v-if为true时,会重新渲染相关dom节点吗?
答:会!(什么??? 难道v-if 为true不应该一直坚强到最后吗,是什么让她如此虚弱)
涉及 知识点 vue virtual dom diff
问题原理:
前言:vue2 引入了虚拟dom,即如果使用.vue的模板方式书写,会首先编译为render函数,生成vnode,每次数据变更后,会在nexttick中进行新老vnode对比进行patch操作
1、对比前后 vnode对象相同颜色的节点进行
2、我们挑选黄色节点说明:0、1、2标识节点序号 , 头、尾 分别代表节点的头部和节点的尾部
对比序号从0、0(分别对应老节点序号0,新节点序号0)开始,每一次循环对比一个节点数据(使用sameVNode方法判断,见下面代码示例,源码5858行),新老对比范围为 ,
(1)头头,即老0->新0 如果一致,则新老开始节点 序号 +1 同时,跳出循环 ,开始下一个循环对比 新老对比范围为 ,
(2)尾尾,即老2->新2 如果一致,则新老结束节点 序号 -1 同时,跳出循环 ,开始下一个循环对比 新老对比范围为 ,
(3)头尾,即老0->新2 如果一致,则老开始节点 序号 +1,新结束节点序号-1 同时,跳出循环 ,开始下一个循环对比 新老对比范围为 ,
(4)尾头,即老2->新0 如果一致,则老结束节点 序号 -1 ,新开始节点序号+1 同时,跳出循环 ,开始下一个循环对比 新老对比范围为 ,
(5)用新节点去未遍历过的的老节点中查找
(6)老节点全部遍历完或新节点全部遍历完,则退出大循环(对未遍历到的老节点执行,对未遍历到的新节点执行)
大致如图:
数据响应及render相关-案例说明
',props: { value: { required: true } },mounted() { this.$emit('input',888); },watch: { value(val,oldVal) { console.log(val,oldVal,'child') } } });涉及 知识点 observe、render、watch
问题原理:
1、vue实例在生成时,会经历比较漫长的初始化过程如:初始化事件、渲染器、注入器、等等
2、v-model指令为被默认构造 :value="b" @input="b = xxx" (此处b为上面代码中v-model="b"),执
3、每次data数据变化的时候,会收集watcher进入一个队列,队列中收集了所有此时刻周期中有相关变化形成,在下一个时间周期中进行数据响应更新 ,并执行render 、patch
4、在render中会进行新老vnode patch,在更新过程中会执行node的prepatch(源码5938行)操作,其中会执行updateChildComponent -> 从而更新了 value的值,从而进入了watch回调
大致如图:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。