vue3.x新特性
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中使用依赖注入
// 响应性绑定
// 组合式api
setup() {
const location = ref('North Pole')
const geolocation = reactive({
longitude: 90,
latitude: 135
})
provide('location', location)
provide('geolocation', geolocation)
}
// 选项式api, 使用computed
app.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 })
}
}
})
转载自:https://segmentfault.com/a/1190000042099877