Vue 虚拟Dom 及 部分生命周期初探
|
<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个实现给出详情解析 4、 5、 <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）老节点全部遍历完或新节点全部遍历完，则退出大循环（对未遍历到的老节点执行，对未遍历到的新节点执行） 大致如图：
// b在父组件中没有初始化，即没有执行父组件的observe
var child = Vue.extend({
template: '
数据响应及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回调 大致如图：
? （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
