When writing asynchronous code, it is possible to create subtle race condition bugs. Consider the following example:
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.
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.
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.
<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.
The result of a call to String#toUpperCase
should only be compared with an uppercase string. Calls like s.toUpperCase() === "Not-Uppercase"
will always evaluate to false
. Similarly, calls to toLowerCase
should only be compared with lowercase strings.
Arrow functions should not be used in computed properties because they are unable to access other properties (using this.property
) of the same object. Accidental usage can thus lead to bugs.
.on()
JS-0800Avoid using .on()
in favour of component's lifecycle hooks. The order of execution for on()
is not deterministic.
function
or var declarations in nested blocks is not preferred JS-0016Function declarations (with the function
keyword) and variable declarations should preferably be in the root of a program or the body of a function. Having nested function declarations inside blocks may have unexpected results at runtime due to hoisting.
ember-data
to @ember-data
JS-0818ember-data
has been split in multiple packages. For instance, its store is now released in @ember-data/store
package. These packages have been released starting from ember-data
version 3.11.
Why we have to migrate?
This rule is aimed at disallowing exports = {}
, but allows module.exports = exports = {}
to avoid conflict with node/exports-style rule's allowBatchAssign
option.
Macros are called with incorrect number of arguments
The var
keyword is soft-deprecated, and should not be used to redeclare existing variables.
An unused expression that does not affect the state of the program indicates a logic error.
This issue ensures the proper casing and spelling while declaring static class properties and lifecycle methods.
The static class properties i.e., propTypes
, contextTypes
and childContextTypes
are supported by the react-props
.