JavaScript

When writing asynchronous code, it is possible to create subtle race condition bugs. Consider the following example:

The v-bind directive is invalid when: - The directive does not have an attribute value.

It is considered a best practice to avoid 'polluting' the global scope with variables that are intended to be local to the script. Global variables created from a script can produce name collisions with global variables created from another script, which will usually lead to runtime errors or unexpected behavior. It is mostly useful for browser scripts.

In JavaScript, you can extend any object, including builtin or "native" objects. Sometimes people change the behavior of these native objects in ways that break the assumptions made about them in other parts of the code.

Computed properties should be synchronous. Asynchronous actions inside them may not work as expected and can lead to unexpected behavior, that's why it is recommended to avoid using asynchronous actions.

It is required to have a return value for every render method. A render function returns a virtual DOM node, commonly named VNode in the Vue ecosystem, which is an interface that allows Vue to write these objects in your browser DOM. They contain all the information necessary to work with Vue.

The issue is raised when v-cloak has argument, modifier, and attribute value. The v-cloak directive will remain on the element until the associated Vue instance finishes compilation. It is combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.

The following pattern:

v-else-if is not valid when:

• The directive has an argument.
• The directive has a modifier.
• The directive doesn't have an attribute value.
• The directive is on the elements that the previous element don't have v-if/v-else-if directives.
• The directive is on the elements which have v-if/v-else directives.

To migrate to Vue 3.x, consider making the following changes: - .native modifier for v-on will be removed. - this.$listeners will be removed.

Emitted events can be defined on the component via the emits option. In the event a native event (e.g., click) is defined in the emits option, it will be overwritten by the event in the component instead of being treated as a native listener. To add validation, the event is assigned a function that receives the arguments passed to the $emit call and returns a boolean to indicate whether the event is valid or not.

When using in-DOM templates, the template is subject to native HTML parsing rules. Some HTML elements, such as <ul>, <ol>, <table> and <select> have restrictions on what elements can appear inside them, and some elements such as <li>, <tr>, and <option> can only appear inside certain other elements. As a workaround, we can use the v-is directive on these elements.

In some cases, we may need “two-way data binding” for a prop. Unfortunately, true two-way binding can create maintenance issues, because child components can mutate the parent without the source of that mutation being obvious in both the parent and the child.

Using promises is forbidden in places where the TypeScript compiler allows them but they are not handled properly. These situations can often arise due to a missing await keyword or just a misunderstanding of the way async functions are handled/awaited.

Single-file components should always order <script>, <template>, and <style> tags consistently, with <style> last. At least one of the other two is always necessary.

By default, parent scope attribute bindings that are not recognized as props will "fallthrough". This means that when we have a single-root component, these bindings will be applied to the root element of the child component as normal HTML attributes. When authoring a component that wraps a target element or another component, this may not always be the desired behavior.

If you prefer splitting up your *.vue components into multiple files, you can use the src attribute to import an external file for a language block. Beware that src imports follow the same path resolution rules as webpack module requests, which means: - Relative paths need to start with ./

All components used in a Vue template should be registered in the components field.

Using literals like true, 0, and false on either side of a logical operator is unnecessary. For example, true && something will always evaluate to something.