key special attribute - type and purpose
The key special attribute is a hint for Vue's virtual DOM algorithm to identify vnodes when diffing the new list of nodes against the old list. It expects type number | string | symbol.
Vue · API reference · all subjects
built-in-special-attributes
18 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
key attribute behavior with and without keys
Without keys, Vue minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, Vue reorders elements based on the order change of keys, and elements with keys that are no longer present are always removed and destroyed.
key attribute uniqueness requirement
Children of the same common parent must have unique keys. Duplicate keys will cause render errors.
key attribute with v-for example
Common use case of key attribute combined with v-for: ```vue-html <ul> <li v-for="item in items" :key="item.id">...</li> </ul> ```
key attribute forcing element replacement
The key attribute can be used to force replacement of an element or component instead of reusing it. This is useful to properly trigger lifecycle hooks of a component or trigger transitions.
key attribute with transition example
Example of using key to force replacement and trigger transitions: ```vue-html <transition> <span :key="text">{{ text }}</span> </transition> ``` When text changes, the span will always be replaced instead of patched, so a transition will be triggered.
ref special attribute - type and purpose
The ref special attribute denotes a template ref. It is used to register a reference to an element or a child component. It expects type string | Function.
ref in Options API
In Options API, the reference registered with ref will be available under the component's this.$refs object. Example: ```vue-html <!-- stored as this.$refs.p --> <p ref="p">hello</p> ```
ref in Composition API
In Composition API, the reference will be stored in a ref with matching name using useTemplateRef: ```vue <script setup> import { useTemplateRef } from 'vue' const pRef = useTemplateRef('p') </script> <template> <p ref="p">hello</p> </template> ```
ref returns element or component instance
If ref is used on a plain DOM element, the reference will be that element. If used on a child component, the reference will be the child component instance.
ref with function value
The ref attribute can accept a function value which provides full control over where to store the reference: ```vue-html <ChildComponent :ref="(el) => child = el" /> ```
ref registration timing
Because refs are created as a result of the render function, you must wait until the component is mounted before accessing them.
this.$refs is non-reactive
this.$refs is non-reactive, therefore you should not attempt to use it in templates for data-binding.
is special attribute - type and purpose
The is special attribute is used for binding dynamic components. It expects type string | Component.
is attribute on native elements - version requirement
Using the is attribute on native HTML elements is only supported in Vue 3.1+.
is attribute on native HTML elements
When the is attribute is used on a native HTML element, it will be interpreted as a Customized built-in element, which is a native web platform feature.
is attribute with vue: prefix
To have Vue replace a native element with a Vue component, prefix the value of the is attribute with 'vue:' so that Vue will render the element as a Vue component instead: ```vue-html <table> <tr is="vue:my-row-component"></tr> </table> ```
data-allow-mismatch special attribute
data-allow-mismatch is a special attribute available in Vue 3.5+ that can be used to suppress hydration mismatch warnings. The value can limit the allowed mismatch to a specific type: 'text', 'children' (allows mismatch for direct children only), 'class', 'style', or 'attribute'. If no value is provided, all types of mismatches will be allowed. Example: <div data-allow-mismatch="text">{{ data.toLocaleString() }}</div>