feat(runtime-vapor): watchEffect/watch and onEffectCleanup

[LittleSound]

close #67

onEffectCleanup

function on(el, event, handler) {
  el.addEventListener(event, handler)
  onEffectCleanup(() => {
    el.removeEventListener(event, handler)
  })
}

// in component setup or render
watchEffect(() => {
  on(el1, eventName.value, handler)
  on(el2, eventName.value, handler)
})

Additionally, provide support for watch

watch(id, async (newId, oldId) => {
  const { response, cancel } = doAsyncWork(newId)
  // `cancel` will be called if `id` changes, cancelling
  // the previous request if it hasn't completed yet
  onEffectCleanup(cancel)
  data.value = await response
})

About the scheduler for watchEffect/watch

Warning

Update: The function of scheduler: rendering in this PR will be replaced by Render Watch API.

I added a scheduler functions for doWatch in scheduler.ts: sync (vaporSyncScheduler), pre (vaporPreScheduler), post (vaporPostScheduler). These three schedulers will be selected according to the flush option. In addition, there is a fourth scheduler: rendering (vaporRenderingScheduler). When watchEffect/watch is called in the render function, its default scheduler changes from pre to rendering.

The flush order of these four schedulers is as follows:

sync -> first component( pre -> rendering ) -> ... -> last component( pre -> rendering ) -> post

The following is a picture I drew to describe the process:

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	89.5 kB	34 kB	30.7 kB
runtime-vapor.global.prod.js	23.8 kB (+3.55 kB)	9.13 kB (+1.38 kB)	8.4 kB (+1.29 kB)
vue-vapor.global.prod.js	59.7 kB (+3.55 kB)	20.4 kB (+1.39 kB)	18.5 kB (+1.25 kB)
vue.global.prod.js	147 kB	53.4 kB	47.7 kB

Usages

Name	Size	Gzip	Brotli
createApp	49.7 kB	19.5 kB	17.8 kB
createSSRApp	53 kB	20.8 kB	19 kB
defineCustomElement	52 kB	20.2 kB	18.5 kB
vapor	23.7 kB (+3.55 kB)	9.14 kB (+1.39 kB)	8.42 kB (+1.3 kB)
overall	63.2 kB	24.4 kB	22.2 kB

[1049906948]

11