组件: 组件是Vue应用程序的基本构建块,允许您将用户界面分解为独立、可重用的部分。在Vue 3中,您可以使用语法来定义组件。
- <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('组件已卸载');
- });