1. Dynamic components
Dynamic components use component components, implemented with a special property is
For example, we now want to implement the implementation of clicking a Tab-bar to switch between different components
Realization 1: Judge by V-if
Implementation two: Dynamic components
Note: the value of is must be a globally or locally registered component
If we implement dynamic component communication we can pass porps directly to component or listen for EMIT events
Page display:
2.keep-alive
We can use a built-in keep-alive component for development situations where we want to keep the state of the component rather than destroy it
At this point we add a button count to the case above, and we hope that the state of the count will not be lost when the toggle component comes back
Keep alive – properties
Pinclude – string | RegExp | Array. Only components with matching names are cached
Exclude – string | RegExp | Array. Any component with a matching name will not be cached
Max – number | string. The maximum number of component instances that can be cached is the number at which instances in the cached component that have not been accessed recently are destroyed
Include and exclude matches first check the component’s own name option:
The life cycle of the cache component
A cached component does not execute a created or Mounted lifecycle function upon re-entry
If we need to listen when the component is leaving or re-entering, we can use the activated and deactivated lifecycle hook functions to listen
3. Code subcontracting of Webpack
By default, when building the entire component tree, webPack packs component modules together when it is packaged (such as in an app.js file) because components are directly dependent on each other through modularity
As the project grows, the content of app.js file is too large, which will slow down the rendering speed of the first screen
For components that do not need immediate use, we can separate them into smaller chunks of chunk.js
These chunk.js are loaded from the server as needed and run the code to display the corresponding content
4. Asynchronous components
In large projects, we may need to break the application into smaller chunks and load it from the server only when needed
For components that want to be loaded asynchronously, Vue provides us with a defineAsyncComponent function
The defineAsyncComponent function takes two types of arguments
- The factory function that needs to return a Promise object
- Accepts an object type to configure an asynchronous function
Factory function, written method 1:
Take an object type and configure an asynchronous function as follows:
5. Asynchronous components and Suspense
Currently the API is not very stable
Suspense is a built-in global component that has two slots
- Default: Displays the content of default if it can be displayed
- Fallback: If default cannot be displayed, the contents of the Fallback slot will be displayed
6. Element and component references
$refs
To get the element object or subcomponent instance directly from a Vue component, DOM manipulation is not recommended. We can bind the element or component to a ref attribute
Application to HTML tags fetch real DOM elements, and application to component tags fetch component instance objects
When ref is used in v-for, the corresponding ref contains an array of values:
root
The $children attribute has been removed from Vue3
We can access the parent element with $parent
$root gets the corresponding root component
7. Life cycle
Also known as: lifecycle callback functions, lifecycle functions, lifecycle hooks
Some specially named functions Vue calls for us at a critical moment
By calling back to the lifecycle function, we can know what phase the component is currently going through
Common lifecycle hooks:
- Mounted: Sends ajax requests, starts a timer, associates custom events, and subscribs messages.
- BeforeDestroy: Clear timers, unbind custom events, unsubscribe messages, etc.
About destroying Vue instances
- You can’t see any information with Vue developer tools after destruction
- Custom events are invalid, but native DOM events are still valid
- You typically do not manipulate data beforeDestroy, because even if you manipulate data, the update process is no longer triggered
8. Component V-Model
Previously, we used input’s V-Model for two-way data binding, because default for the V-Model helped us accomplish two things
V-bind :value for data binding and @input for event listening
Now wrapping an input component can do the same
Parent component used:
YunInput components:
If we want the component to still use the V-Model internally, we can do this using setters and getters for calculating properties
The default V-Model is actually bound to the modelValue property and the @update:modelValue event
In addition, bind multiple V-models, where V-model :title binds the title property and listens for @update:title events
9.Mixin
If we want to extract the same logic from our code
One approach supported in both Vue2 and Vue3 is to use mixins to do this
Mixins can contain any component options, and when a component uses a Mixin object, all Mixin object options are mixed into the options of the component itself
Local mixed with
With global
Global mixins can be used when there are options in a component that all components need to have
Global mixins can be registered using the application app’s method Mixin
Once registered, globally mixed options affect each component
Mixin’s merging rules
If there is a conflict between the options in the Mixin object and the options in the component object, there are different cases
- If the value returned by the data function is merged by default, the component’s own data is retained if it conflicts
- The lifecycle hook functions will be merged into the array and will be called
- The options that are values for objects, such as Methods, Components, and directives, will be combined into the same object, and if there is a conflict, the component itself will continue to dominate