<div id="app">
  <h3>{{title}}</h3>
</div>

<script src="./reactive.js"></script>
<script>
  // 基本结构
  const Vue = {
    createApp(options) {
      const renderer = Vue.createRenderer({
        querySelector(selector) {
          return document.querySelector(selector)
        },
        insert(child, parent, anchor) {
          parent.insertBefore(child, anchor || null)
        }
      })
      return renderer.createApp(options)
    },
    createRenderer({ querySelector, insert }) { // 平台特有操作
      // 获得渲染器
      return {
        render() { },
        hydrate() { },
        createApp(options) {
          // 返回App实例
          return {
            mount(selector) {
              // 宿主
              const parent = querySelector(selector)

              // 获取渲染函数，编译结果
              if (!options.render) {
                options.render = this.compile(parent.innerHTML)
              }

              if (options.setup) {
                this.setupState = options.setup()
              }

              this.data = options.data()

              this.proxy = new Proxy(this, {
                // 代理目标和访问的key
                // target指的是app
                get(target, key) {
                  if (key in target.setupState) {
                    return target.setupState[key]
                  } else {
                    return target.data[key]
                  }
                },
                set(target, key, val) {
                  if (key in target.setupState) {
                    target.setupState[key] = val
                  } else {
                    target.data[key] = val
                  }
                }
              })

              // 渲染dom，追加到宿主元素
              this.update = effect(() => {
                const el = options.render.call(this.proxy)
                parent.innerHTML = ''
                insert(el, parent)
              })
              // this.update()// init
            },
            compile(template) {
              // 返回render
              return function render() {
                // 描述视图
                const h3 = document.createElement('h3')
                h3.textContent = this.title
                return h3
              }
            }
          }
        }
      }
    }
  }
</script>
<script>
  const { createApp } = Vue
  // new Vue
  // Vue.component
  // 函数式: 类型支持ts，摇树优化，打包体积减小
  // 消灭静态方法，编程实例方法
  // 避免全局污染，实例之间相互独立
  // 扩展性， 自定义渲染器
  // const app2 = createApp({})
  // app.config.globalProperties.xxx
  const app = createApp({
    // 统一api，一致性
    data() {
      return {
        title: 'hello,vue3!'
      }
    },
    setup() {
      const state = reactive({
        title: 'vue3, hello!'
      })
      setTimeout(() => {
        state.title = 'hello, vue3!'
      }, 2000);
      return state
    }
  })
  // api简化、一致性
  app.mount('#app')

</script>