Vue3 内置属性

 在 Vue.js 中，is、key 和 ref 是三个常用的内置属性，用法如下。

is 属性

在 Vue.js 中，is 属性通常用于动态组件的实现，特别是当你希望在运行时动态地切换不同的组件时非常有用。

• 类型: String 或 Object
• 作用: is 属性用于动态地指定当前 <component> 组件应该渲染哪一个子组件。通常结合 <component> 元素和动态组件的特性一起使用，允许你在运行时基于数据来切换不同的组件。

实例

<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>

以上代码中，currentComponent 是一个数据属性，它决定了 <component> 元素要渲染的具体组件。当点击按钮时，调用 toggleComponent 方法会切换 currentComponent 的值，从而动态改变渲染的组件。

注意事项：

• 注意事项:
  • is 属性的值可以是组件的名称字符串，也可以是组件对象。
  • 当使用字符串时，组件名称应该与注册的组件名一致。
  • 如果使用对象，可以直接引用组件对象或者使用动态计算属性返回组件对象。

---

key 属性

• 类型: String 或 Number

• 作用: 在 Vue.js 的列表渲染中，每个 v-for 循环中的元素需要有一个唯一的 key 属性。key 的作用是帮助 Vue 识别每个节点的唯一性，从而高效地更新虚拟 DOM。当 Vue 重新渲染列表时，会根据 key 来决定是否重新使用现有 DOM 元素或者重新创建。

  实例

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

• 以上代码中，item.id 作为 key 属性，确保了每个列表项在数据更新时可以正确地被 Vue 辨识和处理。

• 注意事项:

  • key 应该是唯一且稳定的。稳定的意思是，key 不应该随着数据的变化而变化，否则会影响 Vue 的性能和虚拟 DOM 的复用策略。
  • 避免使用索引作为 key，除非你明确知道列表项的顺序不会改变。

---

ref 属性

• 类型: String 或 Object

• 作用: ref 是用来给元素或子组件注册引用信息的。在实际开发中，你可以使用 ref 来访问具体的 DOM 元素或子组件实例，从而进行一些操作，如调用方法、访问属性等。

给 DOM 元素添加 ref

实例

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

<script>
export default {
  mounted() {
    console.log(this.$refs.inputField); // 访问 DOM 元素
    this.$refs.inputField.focus(); // 调用 DOM 元素方法
  }
}
</script>

给子组件添加 ref

实例

<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); // 访问子组件实例
    this.$refs.childRef.doSomething(); // 调用子组件方法
  }
}
</script>

注意事项:

• 在模板中使用 ref 时，Vue 将会提供一个对应的 $refs 对象，通过该对象可以访问到注册的 DOM 元素或子组件实例。
• 避免滥用 ref，尽可能通过数据驱动和事件处理来操作 DOM 和子组件，保持代码的可维护性和清晰性。