Vue:API
lastmod 2022-02-06created 2022-02-061 edits
Summary of Vue API list
$data, $props
Properties that give access to the data options. They give access to the contents of the component's data option and props option.
$el
el is short for Element and refers to the Vue instance's DOM element. A component's element is a DOM object of type HTMLElement.
$root
The $root property refers to the root of the tree, the topmost parent among them. In projects created with Vue CLI, the App component is usually the root component.
$parent, $children
The $parent and $children properties refer to the current instance's parent and children. There is always only one parent, but there can be two or more children, hence the plural.
$attrs
The $attrs property refers to the HTML attributes given to the current component that are not recognized as props data.
$set, $delete
Methods that update or remove a value declared as reactive.
$on
The $on method registers an event handler on the instance. It basically has the same function as the v-on directive. Events are triggered by the $emit method. An event handler registered with the $on method receives as arguments the arguments passed from the $emit event.
$once
The $once method has the same function as the $on method, but the event handler runs only once. An event listener registered via the $once method is removed immediately after it is called once.
$off
The $off method removes registered custom events. Depending on the given arguments, the $off method can selectively choose which event listeners to remove.
$forceUpdate
The $forceUpdate method forces the instance to re-render. Only the instance on which $forceUpdate was executed is re-rendered, without affecting child components or instances. Because Vue's state-watching logic is not perfect, occasionally the state changes but the changed state is not reflected on screen. In such cases, you can use this method to force the component to re-render and reflect the state on screen. However, since rendering itself is an expensive operation, excessive use can be a major cause of degraded application performance.
$nextTick
The $nextTick method provides the ability to register a callback function to be run after the next rendering cycle. The cycle in which Vue redraws the screen based on the updated state after the state is updated is called a Tick.