Answer 1

var b =  10 ; 
( function  b (){ 
   b =  20 ;
    console . log (b); 
})();

我的解法：
1）打印10

var b =  10 ; 
( function  b ( b ) {
  window . b  =  20 ;
  console . log (b) 
})(b)

或者

var b =  10 ; 
( function  b ( b ) {
  b . b  =  20 ;
  console . log (b) 
})(b)

2）打印20

var b =  10 ; 
( function  b ( b ) { 
 b =  20 ;
  console . log (b) 
})(b)

或

var b =  10 ; 
( function  b () {
  var b =  20 ;
  console . log (b) 
})()

麻烦问一下，打印10的第一种方法和打印20的第一种方法有什么不同，为什么输出的结果不一样？按照我的理解，打印20的第一种方法，函数里的b就是window.b,为什么输出结果不一样？

两个作用域不同，所以打印的不一样，第一个是外层的b，window上的。20的第一个打印的函数里面的，b只是在作用于函数里面。

Answer 2

说一下我个人理解，先说结论，可以使用

事件代理作用主要是 2 个

1. 将事件处理程序代理到父节点，减少内存占用率
2. 动态生成子节点时能自动绑定事件处理程序到父节点

这里我生成了十万个 span 节点，通过 performance monitor 来监控内存占用率和事件监听器的数量，对比以下 3 种情况

1. 不使用事件代理，每个 span 节点绑定一个 click 事件，并指向同一个事件处理程序

  <div>
      <span 
        v-for="(item,index) of 100000" 
        :key="index" 
        @click="handleClick">
        {{item}}
      </span>
    </div>

2. 不使用事件代理，每个 span 节点绑定一个 click 事件，并指向不同的事件处理程序

  <div>
      <span 
        v-for="(item,index) of 100000" 
        :key="index" 
        @click="function () {}">
        {{item}}
      </span>
    </div>

3. 使用事件代理

<div  @click="handleClick">
      <span 
        v-for="(item,index) of 100000"  
        :key="index">
        {{item}}
      </span>
    </div>

可以看到使用事件代理无论是监听器数量和内存占用率都比前两者要少

同时对比 3 个图中监听器的数量以及我以往阅读 vue 源码的过程中，并没有发现 vue 会自动做事件代理，但是一般给 v-for 绑定事件时，都会让节点指向同一个事件处理程序（第二种情况可以运行，但是 eslint 会警告），一定程度上比每生成一个节点都绑定一个不同的事件处理程序性能好，但是监听器的数量仍不会变，所以使用事件代理会更好一点