When writing asynchronous code, it is possible to create subtle race condition bugs. Consider the following example:
v-bind
directive JS-0628The 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.
render
function should return value JS-0622It 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.
v-cloak
directives JS-0630The 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
directives JS-0631v-else-if
is not valid when:
v-if
/v-else-if
directives.v-if
/v-else
directives..native
modifiers JS-0655To migrate to Vue 3.x, consider making the following changes: - .native
modifier for v-on
will be removed. - this.$listeners
will be removed.
emits
validator does not always return a boolean value JS-0660Emitted 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.
v-is
directives JS-0661When 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.
.sync
modifier on v-bind
directives JS-0665In 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.
$attrs
JS-0703By 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.
<template>
<script>
<style>
block to be empty JS-0704If 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
.
The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.