BREAKING CHANGE: watch APIs now default to use `flush: 'pre'` instead of
`flush: 'post'`.
- This change affects `watch`, `watchEffect`, the `watch` component
option, and `this.$watch`.
- As pointed out by @skirtles-code in
[this comment](https://github.com/vuejs/vue-next/issues/1706#issuecomment-666258948),
Vue 2's watch behavior is pre-flush, and the ecosystem has many uses
of watch that assumes the pre-flush behavior. Defaulting to post-flush
can result in unnecessary re-renders without the users being aware of
it.
- With this change, watchers need to specify `{ flush: 'post' }` via
options to trigger callback after Vue render updates. Note that
specifying `{ flush: 'post' }` will also defer `watchEffect`'s
initial run to wait for the component's initial render.
returned from `defineComponent`
ref: https://github.com/vuejs/vue-router-next/pull/421
also close#1880
Previous `Component` type is now exported as `ConcreteComponent`.
This introduces a minor breaking change when calling `h(comp, { ... })`
will now fail if `comp` is a of generic `Component` type, since it does
not specify what props it expects.
BREAKING CHANGE: `<portal>` has been renamed to `<teleport>`.
`target` prop is also renmaed to `to`, so the new usage will be:
```html
<Teleport to="#modal-layer" :disabled="isMobile">
<div class="modal">
hello
</div>
</Teleport>
```
The primary reason for the renaming is to avoid potential naming
conflict with [native portals](https://wicg.github.io/portals/).
BREAKING CHANGE: replae `watch(fn, options?)` with `watchEffect`
The `watch(fn, options?)` signature has been replaced by the new
`watchEffect` API, which has the same usage and behavior. `watch`
now only supports the `watch(source, cb, options?)` signautre.
BREAKING CHANGE: `watch` behavior has been adjusted.
- When using the `watch(source, callback, options?)` signature, the
callback now fires lazily by default (consistent with 2.x
behavior).
Note that the `watch(effect, options?)` signature is still eager,
since it must invoke the `effect` immediately to collect
dependencies.
- The `lazy` option has been replaced by the opposite `immediate`
option, which defaults to `false`. (It's ignored when using the
effect signature)
- Due to the above changes, the `watch` option in Options API now
behaves exactly the same as 2.x.
- When using the effect signature or `{ immediate: true }`, the
intital execution is now performed synchronously instead of
deferred until the component is mounted. This is necessary for
certain use cases to work properly with `async setup()` and
Suspense.
The side effect of this is the immediate watcher invocation will
no longer have access to the mounted DOM. However, the watcher can
be initiated inside `onMounted` to retain previous behavior.
