Vue RFC: Expose logic-related component options via function-based APIs instead

In order to expose a reactive value that can be mutated by a function declared inside , we can use the API:

Calling returns a value wrapper object that contains a single reactive property: . This is what enables composition functions to encapsulate the logic that manages the state while passing the state back to the components as a trackable reference:

Value wrappers can also hold non-primitive values and will make all nested properties reactive. If you want a watcher callback to fire before flush or synchronously, you can use the option:

All current lifecycle hooks will have an equivalent function that can be used inside :

If provided key contains a value wrapper, will also return a value wrapper and the binding will be reactive (i.e. the child will update if ancestor mutates the provided value).

Source: github.com