1. 组合式api
代替选项式api, 作为组合式api的入口,拆散逻辑关注点，将同一个逻辑关注点的代码收集在一起
另外，还提供了逻辑复用计划，代替Vue2.x Mixin(命名抵触隐患，不同组件间配置化应用不够灵便)应用
import dataGet from './dataGet.js';import dataDelete from './dataDelete.js';import dataUpdate from './dataUpdate.js';export default { props: { id: String, }, // 组件创立之前执行，this实例无法访问 setup(props, context) { // 解构props, 获取对id的响应式援用 const { id } = toRefs(props); const { xxx } = dataGet(); const { xxx } = dataDelete(); const { xxx } = dataUpdate(); /* something others */ // 返回的内容会裸露给组件的其余部分包含模板 return { xxx }; // 或者返回一个渲染函数, 此时u须要应用expose裸露组件外部的办法/属性以供父组件拜访 context.expose({ property }); return () => h('div', 'test composite-api'); }}// SFC中应用组合式api的语法糖// 代码预编译为setup函数的内容<script setup>......// defineProps, defineEmits// 不反对渲染函数......</script>setup中应用依赖注入
// 响应性绑定// 组合式apisetup() { const location = ref('North Pole') const geolocation = reactive({ longitude: 90, latitude: 135 }) provide('location', location) provide('geolocation', geolocation)}// 选项式api, 应用computedapp.component('todo-list', { provide() { return { todoLength: Vue.computed(() => this.todos.length) } }})app.component('todo-list-statistics', { inject: ['todoLength'],})// 2.x响应性绑定data() { return { test1: 'xxx', test2: { text: 'aaa', }, }}provide: { return { proData1: () => this.test1, // 形式1 proData2: this.test2, // 形式2 }},2. Teleport
管制模板的渲染地位
常见应用场景：模态框、对话框
app.component('modal-button', { template: ` <button @click="modalOpen = true"> Open full screen modal! </button> // 将模态框内容渲染至body元素下 <teleport to="body"> <div v-if="modalOpen" class="modal"> <div> I'm a teleported modal! (My parent is "body") <button @click="modalOpen = false"> Close </button> </div> </div> </teleport> `, data() { return { modalOpen: false } }})3. 片段
多根节点
// 2.x// 联合inheritAttrs: false绑定$attrs到非根元素<template> <div> <header>...</header> <main v-bind="$attrs">...</main> <footer>...</footer> </div></template><script>export default { inheritAttrs: false,}</script>// 3.x// 反对多根节点，显示绑定$attrs<template> <header>...</header> <main v-bind="$attrs">...</main> <footer>...</footer></template>4. 状态驱动的动静css
// 应用v-bind<script setup>const theme = { color: 'red'}</script><template> <p>hello</p></template><style scoped>p { color: v-bind('theme.color');}</style>5. emits组件选项
// 应用对象语法能够进行事件验证app.component('custom-form', { emits: { // 没有验证 click: null, // 验证 submit 事件 submit: ({ email, password }) => { if (email && password) { return true; // 失效 } else { console.warn('Invalid submit event payload!') return false } } }, methods: { submitForm(email, password) { this.$emit('submit', { email, password }) } }})