vue3常用的东西

锅盖哒2023-10-11 8:13

组件 : 组件是Vue应用程序的基本构建块，允许您将用户界面分解为独立、可重用的部分。在Vue 3中，您可以使用<script setup>语法来定义组件。

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const title = ref('Vue 3 示例');
const increment = () => {
  title.value += '!';
};
</script>

指令 : 指令是Vue的特殊属性，用于添加交互和行为。一些常用的指令包括v-model（用于双向数据绑定）、v-for（用于循环渲染元素）、v-if和v-else（用于条件渲染）等。

<input v-model="message">
<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
<div v-if="showElement">显示此元素</div>

应式数据 : 在Vue 3中，您可以使用ref和reactive来创建响应式数据。ref用于创建可变的响应式数据，而reactive用于创建可变对象的响应式版本。

import { ref, reactive } from 'vue';

const count = ref(0);
const user = reactive({
  name: 'John',
  age: 30,
});

生命周期钩子 : Vue 3提供了一系列生命周期钩子，允许您在组件的不同生命周期阶段执行自定义逻辑，例如created、mounted、updated和unmounted等。

import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  console.log('组件已挂载');
});

onUnmounted(() => {
  console.log('组件已卸载');
});