Vue3 Built-in Attributes

In Vue.js, is, key, and ref are three commonly used built-in attributes, used as follows.

Attribute Core Function Usage/Example
is Solves HTML tag syntax restrictions, dynamically specifies the component/native tag to render

<tag is="component-name">
<component :is="variable">

<ul><li is="my-component"></li></ul>
key Provides a unique identifier to Vue's virtual DOM, improves list rendering efficiency, and ensures correct component state <tag key="unique-value">
<tag :key="item.id">
<div v-for="item in list" :key="item.id">{{item}}</div>
ref Gets a DOM element or component instance, used to directly manipulate the native DOM / call child component methods Template: ref="name"
Script: this.$refs.name
<input ref="inputRef">
this.$refs.inputRef.focus()

is 属性

In Vue.js, the is attribute is typically used for implementing dynamic components, especially useful when you want to dynamically switch between different components at runtime.

  • Type: String or Object
  • Purpose: isThe attribute is used to dynamically specify the current<component>component that should render which child component. Usually combined with<component>the `component` element and dynamic component features, allowing you to switch different components at runtime based on data.

Example

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';

export default {
  data() {
    return {
      currentComponent: 'FirstComponent'
    };
  },
  components: {
    FirstComponent,
    SecondComponent
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'FirstComponent' ? 'SecondComponent' : 'FirstComponent';
    }
  }
};
</script>

In the above code,currentComponentis a data property that determines<component>which specific component the element should render. When the button is clicked, callingtoggleComponentthe method will switchcurrentComponentthe value, thereby dynamically changing the rendered component.

Note:

  • Notes:
    • isThe value of the attribute can be either a string of the component name or a component object.
    • When using a string, the component name should match the registered component name.
    • If using an object, you can directly reference the component object or use a dynamic computed property to return the component object.

key 属性

  • Type: String or Number

  • PurposeIn Vue.js list rendering, everyv-forelement in a loop needs to have a uniquekeyattribute.keyThe role of `key` is to help Vue identify the uniqueness of each node, thereby updating the virtual DOM efficiently. When Vue re-renders the list, it will, based onkeydecide whether to reuse existing DOM elements or recreate them.

    Example

    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    In the above code,item.idaskeythe attribute, ensuring that each list item can be correctly identified and processed by Vue when data updates.

  • Notes:

    • keyIt should be unique and stable. Stable means,keyit should not change as data changes; otherwise, it will affect Vue's performance and the virtual DOM reuse strategy.
    • Avoid using index askeyunless you explicitly know that the order of the list items will not change.

ref 属性

  • Type: String or Object

  • Purpose: refIt is used to register reference information for elements or child components. In actual development, you can userefto access specific DOM elements or child component instances, thereby performing operations such as calling methods, accessing properties, etc.

Adding ref to a DOM element

Example

<template>
  <div>
    <input type="text" ref="inputField">
  </div>
</template>

<script>
export default {
  mounted() {
console.log(this.$refs.inputField); // access DOM element
this.$refs.inputField.focus(); // call DOM element method
  }
}
</script>

Adding ref to a child component

Example

<template>
  <div>
    <child-component ref="childRef"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
console.log(this.$refs.childRef); // access child component instance
this.$refs.childRef.doSomething(); // call child component method
  }
}
</script>

Notes:

  • When using in the template,refVue will provide a corresponding$refsobject, through which you can access the registered DOM element or child component instance.
  • Avoid overusing `ref`ref, and as much as possible operate on DOM and child components through data-driven approaches and event handling to keep the code maintainable and clear.
Other Extensions