BREAKING CHANGE: adjust attr fallthrough behavior
Updated per pending RFC https://github.com/vuejs/rfcs/pull/137
- Implicit fallthrough now by default only applies for a whitelist
of attributes (class, style, event listeners, a11y attributes, and
data attributes).
- Fallthrough is now applied regardless of whether the component has
explicitly declared props. (close#749)
BREAKING CHANGE: revert setup() result reactive conversion
Revert 6b10f0c & a840e7d. The motivation of the original change was
avoiding unnecessary deep conversions, but that can be achieved by
explicitly marking values non-reactive via `markNonReactive`.
Removing the reactive conversion behavior leads to an usability
issue in that plain objects containing refs (which is what most
composition functions will return), when exposed as a nested
property from `setup()`, will not unwrap the refs in templates. This
goes against the "no .value in template" intuition and the only
workaround requires users to manually wrap it again with `reactive()`.
So in this commit we are reverting to the previous behavior where
objects returned from `setup()` are implicitly wrapped with
`reactive()` for deep ref unwrapping.
BREAKING CHANGE: custom directive bindings no longer expose instance
This is a rarely used property that creates extra complexity in
ensuring it points to the correct instance. From a design
perspective, a custom directive should be scoped to the element and
data it is bound to and should not have access to the entire
instance in the first place.
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.
Terser will aggressively inline hot functions in renderer.ts in order
to reduce "function" declarations, but the inlining leads to performance
overhead (small, but noticeable in benchmarks).
Since we cannot control user's minifier options, we have to avoid the
deopt in the source code by using arrow functions in hot paths.
Previously codegen node for elements and components used raw expressions,
which leads to multiple permutations of AST shapes based on whether the
node is a block or has directives. The complexity is spread across the
entire compiler and occurs whenever a transform needs to deal with
element codegen nodes.
This refactor centralizes the handling of all possible permutations
into the codegen phase, so that all elements/components will have a
consistent node type throughout the transform phase.
The refactor is split into two commits (with test updates in a separate
one) so changes can be easier to inspect.
reference: https://github.com/vuejs/rfcs/issues/121
BREAKING CHANGE: object returned from `setup()` are no longer implicitly
passed to `reactive()`.
The renderContext is the object returned by `setup()` (or a new object
if no setup() is present). Before this change, it was implicitly passed
to `reactive()` for ref unwrapping. But this has the side effect of
unnecessary deep reactive conversion on properties that should not be
made reactive (e.g. computed return values and injected non-reactive
objects), and can lead to performance issues.
This change removes the `reactive()` call and instead performs a
shallow ref unwrapping at the render proxy level. The breaking part is
when the user returns an object with a plain property from `setup()`,
e.g. `return { count: 0 }`, this property will no longer trigger
updates when mutated by a in-template event handler. Instead, explicit
refs are required.
This also means that any objects not explicitly made reactive in
`setup()` will remain non-reactive. This can be desirable when
exposing heavy external stateful objects on `this`.
BREAKING CHANGE: `createApp` API has been adjusted.
- `createApp()` now accepts the root component, and optionally a props
object to pass to the root component.
- `app.mount()` now accepts a single argument (the root container)
- `app.unmount()` no longer requires arguments.
New behavior looks like the following:
``` js
const app = createApp(RootComponent)
app.mount('#app')
app.unmount()
```
This avoids trying to grab .el from hoisted child nodes (which can
be created by another instance), and also skips transition check
since fragment children cannot have transitions.
Store the keys for props that need default or boolean casting
during normalization, so that later we only need to iterate
through this array instead of the entire props object.
