answershuto/vuedemo

《剖析 Vue.js 内部运行机制》配套Demo

Hi there 👋 I'm ranmo(染陌)

• Developer at Alibaba TaoBao FED
• Member of W3C CSS Working Group
• Author of 《剖析 Vue.js 内部运行机制》

🤝🏻  Connect with Me

📖   Blog

🔧  Languages and Tools

vuedemo's Issues

关于新旧节点patch问题

大佬你好，请问为何不直接将oldVNode删除，用newVNode直接替换呢

一点小建议

感觉这里可以优化一下
22行：set: function reactiveSetter (newVal) {
if (newVal === val) return;
val = newVal;
cb(newVal);
}

您好，请问下《template 模板是怎样通过 Compile 编译的》里面的lowerCasedTag是什么意思？没看到其他地方定义啊~

if (stack[pos].lowerCasedTag === tagName.toLowerCase()) {
     break;
}

lowerCasedTag指的是

const element = {
    type: 1,
    tag: startTagMatch.tagName,
    attrsList: startTagMatch.attrs,
    attrsMap: makeAttrsMap(startTagMatch.attrs),
    parent: currentParent,
    children: []
}

element里面的tag这个属性吗

关于 《响应式系统的依赖收集追踪原理》.js 中一些疑惑

该 JS 文件中有 defineReactive 函数定义如下：

function defineReactive (obj, key, val) {
  const dep = new Dep();
  
  Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactiveGetter () {
          dep.addSub(Dep.target);
          return val;         
      },
      set: function reactiveSetter (newVal) {
          if (newVal === val) return;
          val = newVal;
          dep.notify();
      }
  });
}

不太明白为什么要把 dep.addSub(Dep.target); 放到 get 方法里面呢？这样就会一定要读取过属性才会添加到订阅队列中，感觉 不太好。改成以下会不会好一些呢？

function defineReactive (obj, key, val) {
  const dep = new Dep();
  dep.addSub(Dep.target);
  
  Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactiveGetter () {
          return val;         
      },
      set: function reactiveSetter (newVal) {
          if (newVal === val) return;
          val = newVal;
          dep.notify();
      }
  });
}

《批量异步更新策略及 nextTick 原理》.js 中的一些问题

flushSchedulerQueue() 函数在遍历执行所有的 watcher 之后，应该要清空当前的 watcher 队列才对的，即 queue.length = 0，完整代码如下：

function flushSchedulerQueue () {
    let watcher, id;

    for (index = 0; index < queue.length; index++) {
        watcher = queue[index]
        id = watcher.id;
        has[id] = null;
        watcher.run();
    }

    waiting  = false;
    queue.length = 0;
}

如果不清空队列的话，在以后的 nextTick() 中就会重复执行之前的旧的 watcher ，比如，测试代码中在一秒后再执行 watch1.update() ：

(function () {
    let watch1 = new Watcher();
    let watch2 = new Watcher();

    watch1.update();
    watch1.update();
    watch2.update();

    setTimeout(() => {
      watch1.update();
    }, 1000)
})();

会发现，在一秒之后，只更新了 watcher1, 但是， watcher2 也会执行。

parseEndTag方法中currentParent指向错误

parseEndTag 方法中

    if (pos >= 0) {
        stack.length = pos;
        currentParent = stack[pos]; 
    }   

currentParent指向错误，如果将测试html语句

<div :class="c" class="demo" v-if="isShow">
    <span v-for="item in sz">{{item}}</span>
</div> 

变为

 <div :class="c" class="demo" v-if="isShow">
     <span>2333</span>
     <span>23333</span>
</div>  

则生成的ast的diiv的children只有一个span，建议修改一下currentParent的指向

    if (pos >= 0) {
        if(pos>0){
            currentParent = stack[pos - 1]
        }
        else{
            currentParent = null
        }
        stack.length = pos
    }