中海达前端面试，2022.11.9

const images = document.querySelectorAll('img')
// 获取显示屏的高度
window.addEventListener('scroll', function() {
  images.forEach(img => {
    const imgTop = img.getBoundingClientRect().top // 获取的是
    if (imgTop < window.innerHeight) {
      img.src = img.getAttribute('data-src')
    }
  })
})

• 还有一种方案，就是使用Intersection的API，这个API，能够解构出一个isIntersecting, 如果是true，就给图片的src属性赋值。在Vue当中一般封装成自定义指令。这个方案和上面的方案的区别是：上面的window.scroll，他会一直监听，即便图片已经进入了可视区了。但是IntersectionObserver的API，我们能够observer.unobserve(el)，一旦赋值，就停止监听了，性能会有提升。

const directives = (app) => {
  app.directive('lazyload', {
    mounted (el, binding) {
      // 创建observer对象
      const observer = new IntersectionObserver(([{ isIntersecting }]) => {
        // 解构出 isIntersecting参数 如果是true -》表示在可视范围
        if (isIntersecting) {
          // 停止监听dom
          observer.unobserve(el)
          // 给el 也就是绑定这个属性的dom 添加 onerror这个事件 然后给他的src属性添加图片
          el.onerror = function () {
            el.src = defaultImage
          }
          // 给el的src赋值 binding.value就是 v-lazyload=""绑定的值
          el.src = binding.value
        }
      })
      observer.observe(el)
    }
  })
}

• 我讲了了解，说看过snabbdom源码，然后他就直接跳过了，哈哈哈！
• 虚拟dom是什么
• diff算法是什么
• key的作用是什么。这三个问题都是大头

• 我说了自己可能不太了解，描述了Vue内部进行了封装，通过.call/.apply/.bind不确定是哪一个。
• 说React里面就是没有进行处理，类组件里面要用bind进行改this

• 讲了轮播图组件的bug，鼠标停在轮播图中，然后刷新页面，鼠标刚开始还在轮播图里面，但是这个时候，轮播图还是依然自动播放的，按理来说是停止自动播放，表明自己请教过一些前辈，但是仍旧没能够解决。明确的讲到了一个碰到的，但是没有解决的问题，也有去努力查文章和请教别人。面试官也给出了建议

• 说实话有点没听懂，讲了用nextTick就能够解决

• 讲了props，emit和自定义事件，
• 讲了eventBus并在vue3中被废除，

• 面试官提示，vue3中的一些，讲了project和inject
• vuex
• vue2中，用$attrs和$listeners，可以父亲组件给孙子组件传递数据，孙子组件可以给父亲组件this.$emit()，适合爷孙传值。但是$listeners在vue3中被废弃了。

• 块级独占一行，行内不是
• 块级可以设置宽高，行内不行，宽高就是元素的宽度，如果要修改，必须通过display转化为行内块或者块级。其实定位和浮动也可以
• 行内元素设置行高ok，等同于和块级元素设置行高。意思是，比如div > span, 假设给span设置line-height，那么等同于给块级元素设置行高
• 面试官提示margin和padding，我说了行内的上下不能设置，但是左右的margin和padding都是有效果的。
  
• 块级元素中可以放块级元素，也可以放行内元素。行内元素里面不应该放块级元素
• 行内元素，设置浮动后，这个元素是块级元素嘛？应该是行内块元素，可以设置宽高，不占一行。

• 不太确定，说是不相等，因为内存地址的空间不是同一块空间
• []===[]呢？我说也不相等。小结：两个等于会进行隐式转换，但是数组因为比较的还是内存地址，所以两个数组的比较和三个数组的比较没啥区别
• 0 == false呢？说相等，三个等于是不相等的