Vue3 引入了许多新的特性和语法糖，以下是一些常见的 Vue3 语法特性的示例：
- Composition API (组合式 API):
<template>
<div>{{ count }}</div>
</template>
<script>
import { ref, reactive, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const state = reactive({ count: 0 });
const doubleCount = computed(() => state.count * 2);
// 返回需要在模板中使用的属性和方法
return {
count,
doubleCount
};
}
}
</script>
- Teleport (传送门):
<teleport to="body">
<div>这个 div 会被插入到 body 标签中</div>
</teleport>
- Fragments (片段):
<template>
<div>
Part 1
<span>Part 2</span>
</div>
</template>
- Emits Composition (发射):
import { defineComponent } from 'vue';
export default defineComponent({
emits: ['update', 'delete'],
setup(props, { emit }) {
function updateItem() {
emit('update', newValue);
}
function deleteItem() {
emit('delete', itemId);
}
return { updateItem, deleteItem };
}
});
- Custom Render (自定义渲染):
import { h, render } from 'vue';
render(
h('div', 'Hello World!'),
document.body
);
- Script Setup 语法糖 (更简洁的组件定义方式):
<template>
<button @click="increment">{{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>
- Data Option Composition (数据选项组合):
import { reactive } from 'vue';
export default {
data() {
return {
localState: 'initial state'
}
},
setup() {
const state = reactive({
localState: 'new state'
});
// 返回的对象将会与 data 选项合并
return state;
}
}
- Template Refs (模板引用):
<template>
<div ref="divRef">Hello</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const divRef = ref(null);
onMounted(() => {
console.log(divRef.value); // DOM 元素
});
return { divRef };
}
}
</script>
这些特性和示例代码提供了 Vue3 的一个概览，展示了如何使用 Vue3 的新特性来编写更加现代和灵活的代码。