Vue 的高级语法可以帮助开发者更高效地构建复杂应用，下面从多个方面为你详细介绍：
1. 组合式 API
组合式 API 是 Vue 3 引入的新特性，它提供了一种更灵活、更高效的方式来组织和复用逻辑。
1.1 setup 函数
setup 函数是组合式 API 的入口，在组件创建之前执行，用于初始化数据和逻辑。
<template>
<div>
<p>{{ count }}</p>
<button @click=increment>Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 使用 ref 创建响应式数据
const count = ref(0);
const increment = () => {
count.value++;
};
// 返回需要在模板中使用的数据和方法
return {
count,
increment
};
}
};
</script>
1.2 生命周期钩子
在 setup 函数中可以使用组合式 API 的生命周期钩子，它们的命名与选项式 API 类似，但前面加上了 on。
<template>
<div></div>
</template>
<script>
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('Component is mounted.');
});
}
};
</script>
1.3 自定义组合式函数
可以将可复用的逻辑封装到自定义组合式函数中。
// useCounter.js
import { ref } from 'vue';
export function useCounter() {
const count = ref(0);
const increment = () => {
count.value++;
};
const decrement = () => {
count.value--;
};
return {
count,
increment,
decrement
};
}
<template>
<div>
<p>{{ count }}</p>
<button @click=increment>Increment</button>
<button @click=decrement>Decrement</button>
</div>
</template>
<script>
import { useCounter } from './useCounter.js';
export default {
setup() {
const { count, increment, decrement } = useCounter();
return {
count,
increment,
decrement
};
}
};
</script>
2. 异步组件
异步组件允许在需要时才加载组件，有助于提高应用的性能。
2.1 基本用法
<template>
<div>
<AsyncComponent />
</div>
</template>
<script>
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
import('./AsyncComponent.vue')
);
export default {
components: {
AsyncComponent
}
};
</script>
2.2 处理加载状态和错误
<template>
<div>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</div>
</template>
<script>
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent({
loader: () => import('./AsyncComponent.vue'),
errorComponent: {
template: '<div>Error loading component.</div>'
}
});
export default {
components: {
AsyncComponent
}
};
</script>
3. 渲染函数
渲染函数提供了比模板更灵活的方式来创建虚拟 DOM。
<template>
<!-- 空模板，使用渲染函数 -->
</template>
<script>
import { h } from 'vue';
export default {
render() {
return h('div', { class: 'container' }, [
h('p', 'This is a render function example.'),
h('button', { onClick: () => console.log('Clicked') }, 'Click me')
]);
}
};
</script>
4. 自定义指令
自定义指令可以对普通 DOM 元素进行底层操作。
4.1 全局自定义指令
// main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 注册全局自定义指令
app.directive('focus', {
mounted(el) {
el.focus();
}
});
app.mount('#app');
<template>
<input v-focus />
</template>
<script>
export default {};
</script>
4.2 局部自定义指令
<template>
<input v-color='red' />
</template>
<script>
export default {
directives: {
color: {
mounted(el, binding) {
el.style.color = binding.value;
}
}
}
};
</script>
5. 插件
插件是一种可以扩展 Vue 功能的方式，通常用于添加全局功能。
// myPlugin.js
export default {
install(app, options) {
// 添加全局方法
app.config.globalProperties.$myMethod = () => {
console.log('This is a global method.');
};
// 添加全局指令
app.directive('my-directive', {
mounted(el) {
el.style.border = '1px solid red';
}
});
}
};
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './myPlugin.js';
const app = createApp(App);
app.use(MyPlugin);
app.mount('#app');
<template>
<div v-my-directive>
<button @click=$myMethod>Call global method</button>
</div>
</template>
<script>
export default {};
</script>
6. 混合（Mixin）
混合是一种复用组件选项的方式，但在 Vue 3 中，组合式 API 更推荐用于复用逻辑。
// myMixin.js
export const myMixin = {
data() {
return {
message: 'This is a mixin message.'
};
},
methods: {
showMessage() {
console.log(this.message);
}
}
};
<template>
<div>
<button @click=showMessage>Show mixin message</button>
</div>
</template>
<script>
import { myMixin } from './myMixin.js';
export default {
mixins: [myMixin]
};
</script>