chapter3-3 component 标题处写成了 compnent 源码和文档都是

chapter3-5

1. Vue.extend({},name) 第二个参数有处理组件名称吗？ 我查看了以下源码好像没有
   将name放入到第一个对象参数中
2. id=‘loading-wrapper’有点混淆
   使用其他id名称区分
3. return ()=>{ } 这里也可以稍微提一下 听课时有点懵逼这个位置

分享一下我补充的注释

function Loading(msg) {
  // 1 创建 加载组件构造函数 根据id 有了定义的样式
  const LoadingComponent = Vue.extend({
    template: '<div id="loading-wrapper">{{msg}}</div>',
    name: 'LoadingComponent',
    props: {
      msg: {
        type: String,
        // msg为传入的参数
        default: msg
      }
    }
    // 第二个字符串参数 是无效的？ 
  }, 'LoadingComponent')
  // 2 创建 div 作为挂载组件的节点
  const div = document.createElement('div')
  div.setAttribute('id', 'mount-here')
  document.body.append(div)
  // 将实例化的组件 挂载到 创建的div上; id=mount-here 只是用于定位挂载
  // 实例化的组件结构 将完全取代 原div结构 
  new LoadingComponent().$mount('#mount-here')

  // 3 返回箭头函数 需要 Loading(msg)() 才会执行 需再调用一次
  return () => {
    document.body.removeChild(document.getElementById('loading-wrapper'))
  }
}
// 挂载到Vue原型上 作为全局函数 $开头
Vue.prototype.$loading = Loading
new Vue({
  el: '#root',
  methods: {
    showLoading() {
      // 3 此处 hide 还不会执行 return后箭头函数 
      // 相当于执行Loading('正在加载，请稍等...')
      const hide = this.$loading('正在加载，请稍等...')
      setTimeout(() => {
        // 3 此处 hide() 会执行 return后箭头函数
        // 相当于执行Loading('正在加载，请稍等...')();
        hide()
      }, 2000)
    }
  }
})