12.2 组件状态与自更新

function mountComponent(vnode, container, anchor) {
  const componentOptions = vnode.type
  const { render, data } = componentOptions
  // 执行 data 得到原始数据，并包装为响应式数据
  const state = reactive(data())
  // render 的 this 指向 state，同时把 state 作为第一个参数传入
  const subTree = render.call(state, state)
  patch(null, subTree, container, anchor)
}

const state = reactive(data())

effect(() => {
  // 执行渲染函数：读取 state → 收集依赖
  const subTree = render.call(state, state)
  // 渲染
  patch(null, subTree, container, anchor)
})

effect(() => {
  const subTree = render.call(state, state)
  patch(null, subTree, container, anchor)
}, {
  // 指定该副作用函数的调度器
  scheduler: queueJob
})

// 任务缓存队列，用 Set 自动去重
const queue = new Set()
// 是否正在刷新队列
let isFlushing = false
// 一个立即 resolve 的 Promise
const p = Promise.resolve()

function queueJob(job) {
  queue.add(job)
  if (!isFlushing) {
    isFlushing = true
    // 在微任务中刷新队列
    p.then(() => {
      try {
        queue.forEach(job => job())
      } finally {
        // 重置状态
        isFlushing = false
        queue.clear()
      }
    })
  }
}

const MyComponent = {
  name: 'MyComponent',
  // 用 data 函数定义组件自身的状态
  data() {
    return { foo: 'hello world' }
  },
  render() {
    setTimeout(() => {
      this.foo = 'hello vue'
      this.foo = 'hello vue1'
      this.foo = 'hello vue2'
    }, 2000)
    // 在渲染函数内使用组件状态
    return { type: 'div', children: `foo 的值是: ${this.foo}` }
  }
}