1. Components can be loaded globally or locally
Vue.js provides two ways to load components: one globally at the Vue instance and one at the component level. Both approaches have their own advantages.
Globally loaded components make them accessible from any template in the application, including subcomponents. It reduces the number of times global components have to be imported into child components.
Also, if a component is loaded globally, you will not get a Vue registered component error — “Did you register the component correctly?” . Be careful to load global components. It will inflate your application, and even if it is not used, it will still be included in the initial bundle built by Webpack.
Loading components locally enables you to isolate components and load them only when necessary. When used with Webpack, components are lazily loaded only when they are used. This makes your initial application file size smaller and reduces initial load time.
Lazy loading/asynchronous components
Lazy-loading components using Webpack’s dynamic import. Vue supports lazy loading of components at render time and code split time. These optimizations allow your component code to load only when needed, thereby reducing your HTTP requests, file sizes, and automatically giving you a performance boost. The important part about this feature is that it applies to globally loaded and locally loaded components.
Load asynchronous components globally:
3. Required attributes
There are many ways to create props for a component. You can pass in an array of strings representing the prop name, or you can pass in an object with a key as the prop name and configuration object.
Using an object-based approach allows you to modify some configurations for individual prop, such as whether to set required. The value of required is true or false. If prop is not set when using the component, true will throw an error, false (the default) means it is not required and no error will be thrown.
It is good to use the required configuration precisely when sharing components for use by others or yourself, indicating that this prop is important.
4. Use $emit to trigger custom events
Communication between child and parent components can be done by issuing custom events using the component built-in function $emit.
The $emit function accepts the event name as a string and an optional value. To listen for events, simply add “@EventName” to the component that emitted the event (where the child component uses it) and pass in the event handling method. This is a good way to keep a single data flow and keep data flowing from child to parent.
Break down components logically
Easier said than done, how do you divide a component according to a logic?
The first way to decompose components is based on data changes. If the data is changing in one part of the component but not in the other parts, that part of the component that is changing should be extracted as a separate component.
The reason is that if your data /HTML keeps changing in one part of the template, you need to check and update the entire component. However, if you put the changing HTML in its own component and pass in the data using props, the component is only updated when its props changes.
Another way to logically break down components is reusability. If you have HTML, graphics or features that are reused throughout the application, such as buttons, check boxes, logo animations, rallying phrases or graphics with simply changing text — this would be a good candidate to extract into a new component that can be reused. Reusable components have the hidden advantage of being easy to maintain because you only need to change one component, rather than having to find multiple places to replace and change in the code base.
6. Validate your props
Instead of using an array of strings to define props, objects that allow each prop to be configured are used. Two very useful configuration items are “types” and validators.
Using the type parameter, Vue will automatically type to check your prop value. For example, if we expect a Number prop but receive a String, you’ll get a warning in the console like this:
[Vue warn]: Invalid prop: type check failed for prop “count”. Expected Number
For more complex validations, we can pass the function to the Validator property, which accepts the prop value as an argument and returns true or false. This is very powerful because it allows us to write custom validation against the value passed to that particular attribute.
7. Bind and overwrite multiple props
If your component has multiple props, such as 5,6,7, or more, setting up bindings for each prop in succession can become cumbersome. Fortunately, there is a quick way to set bindings for all properties on a component by using V-bind to bind objects instead of individual properties.
Another advantage of using object bindings is that you can override any binding of an object.
In our example, if we set isActive to false in the Person object, we can perform another binding on the actual Person component and set isActive to true without overwriting the original object.
8. Modify the props of the component
In some cases, you may want to modify the values passed in from prop. However, doing so warns you to “Avoid mutating a prop directly” by not modifying properties directly. Instead, use prop values as the default values for local data properties. Doing so will enable you to view the raw values, but modifying the local data will not change the prop values.
There is one benefit. With this approach, your local data properties have no effect on the prop value, so any changes to the parent component’s prop value will not update your local value. However, if you do need these updates, you can use computed attribute composite values.
9. Mount vs Shallow Mount in test tool
There are two ways to create and start components in the Vue test tool. One is a mount and the other is a shallow mount. Both have their own advantages and disadvantages.
The MOUT technique is very effective when you want to test dependencies between components and their children. Allows you to test whether the parent component interacts correctly with its children as expected. Instead, as its name implies, the Shallow Mount technique instantiates and renders only the parent component, completely isolating and ignoring any of its children. That is, mount renders all parent components, and shallow Mount renders only the parent component. Sometimes you just need to test some features of the parent component.
So which method is better? It’s up to you. The strategy you choose should depend on your measurable goals. Attempting to test the component by itself with complete isolation, the Shallow mount method works well. If you need to deal with components that have subcomponents to ensure communication, use mount. A good option is to use them together. Not limited to a mix and match to meet your testing needs.
10. Vue CLI power
The Vue CLI is a powerful command line interface that allows developers to quickly take advantage of a number of features that can speed up workflows.
One feature I use a lot is to run vue Serve followed by a path to the vue component. The advantage of doing this is that you can fully develop a standalone component, while also hot-loading and iterating components without having to temporarily import new components into the page for development.
Related articles:
Vue. Js application performance Optimization 1
Vue. Js application Performance Optimization ii
Vue. Js application performance optimization iii
How to render a dynamic component defined in JSON using vue.js
