前言
前两章节分享了使用 Vue3 技术栈如何创建工程到快速上手实战，创建工程，快速入门，看过且实践过之后，直接上手项目理论上是没有问题的。
在这篇文章中我主要想分享三个知识点
- Fragment
vue3 新增默认隐式标签 - Teleport
一种能将我们的html结构瞬移的技术 - script setup
Vue团队提出的实验性写法
Fragment
在前章中，注意看过代码的童鞋，不知道有木有发现一个小小的变化，在Vue2中， 组件必须有一个根标签, 而在Vue3中，优化了，组件可以没有根标签, 内部会将多个标签包含在一个Fragment 虚拟元素中，用过文档片段的童鞋可以理解为它们基本类似，来段代码看一下吧
<template>
<h2> {{refValue}}</h2>
<h3> {{ reactiveValue.name }} ： {{ reactiveValue.age }} </h3>
</template>
<script>
import { ref, reactive } from "vue";
export default {
setup () {
const refValue = ref(123);
const reactiveValue = reactive({ name: "小娜", age: 17 });
return {
refValue,
reactiveValue
};
},
};
</script>
复制代码好处 减少标签层级, 减小内存占用
Teleport
Teleport 是 Vue3 提供的一个新的技术，将组件内部的 dom 元素，瞬移到某个位置，光白话说可能不是那么容易理解，我们用代码来实践一下具体的效果
Teleport 语法
<Teleport to="要移动的位置，如：body,id，class 等">
// ... 自己的元素
</Teleport>
复制代码实践
<template>
<h2>{{reactiveObj.name}} - {{reactiveObj.demo}}</h2>
<h2 @click="isShow = true">打开</h2>
<!-- 注意这里的 Teleport to body -->
<Teleport to="body">
<div class="tip"
v-if="isShow">
<button @click="isShow = false">关闭</button>
<ul>
<li v-for="i in 5"
:key="i">{{i}}</li>
</ul>
</div>
</Teleport>
</template>
<script>
import { ref, reactive } from "vue"
export default {
setup () {
let isShow = ref(false)
let reactiveObj = reactive({ name: "Hisen", demo: "Vue3" })
return {
isShow,
reactiveObj
}
}
}
</script>
复制代码默认类为 tip 的元素是不显示的，并且我是写在某个组件内部的，当我点击打开的时候，类为 tip 元素就显示出来，点击关闭则关闭，为了看出来效果，我使用了 v-if
Teleport 显示效果，很神奇啊，居然被移动到 body 结束标签位置了，还有一个更好的就是此时的 tip 元素定位是相对于 body 的，贼爽 ~
未使用 Teleport 常规效果，就还是在定义元素位置
script setup 了解
为什么我在标题上备注了一个了解 ，因为截至目前 Vue 团队还没有正式发布该语法，只是在实验阶段，但是它到底香不香，我只能告诉你，一个字 香 !
script setup 是一种简化 setup 函数的技术解决方案，让代码更简洁明了，为什么这么说? 我们回顾一下 setup 的使用方式
<template>
<h3>{{refValue}}</h3>
</template>
<script>
import { ref } from "vue";
export default {
setup () {
let refValue = ref(123)
return {
refValue,
};
}
};
</script>
复制代码废话不多说，我直接上一个 script setup 的形式，来对比一下
<template>
<h3>{{refValue}}</h3>
</template>
<script setup> // 注意点
import { ref, reactive } from "vue"
let refValue = ref(123)
</script>
复制代码发现了点什么 ? 在 script setup 中， <script> 标签变成了 <script setup> , setup 函数也不复存在了，直接变成了声明，然后就 ok 了，你没看错，就是这样简单 ， 接着缕一缕
使用变量和方法
<script setup>
import { ref } from "vue";
const refValue = ref("setup script");
const handlerClick = () => {
console.log("on click");
};
</script>
复制代码使用组件
被导入的组件均会自动注册，可以直接使用
<script setup>
import childComp from "./components/childComp.vue";
import Button from "./components/Button.vue";
</script>
复制代码使用 props
在 script setup 中，需要使用 defineProps 来定义，具体的用法跟 props 基本一样
<script setup>
import { defineProps } from "vue";
const props = defineProps(['title', 'content']);
</script>
// 给`props`定义类型
const props = defineProps({
title: String,
content: {
type: Stirng,
required: true
}
});
复制代码使用 context
类似一个 hooks 获取到 slots ， attrs , 获取到的slots attrs跟之前的 setup 里面的是一样的
import { useContext } from 'vue'
const { slots, attrs } = useContext()
复制代码使用 emit
在 script setup 中， 需要用 defineEmit 来定义，用法上和之前的没有什么区别
import { defineEmit } from 'vue'
// 4，定义事件
const emit = defineEmit(['emitclick']);
//触发事件
const emitclick = () => {
emit('myclick','params');
}
复制代码父组件监听跟 Vue2 一样
<template>
<HelloWorld msg="Hello Vue3" @myclick="onmyclick"/>
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue';
const onmyclick = () => {
console.log("子组件 helloword 通过 emit 触发的事件");
}
</script>
复制代码结束
总体来说这几个功能都是很哇塞的 ， 特别是 setup script ，代码看起来简单了很多，开发效率大大的提高。唯一不美观的就是它还在实验阶段
小小鼓励，大大成长，欢迎点赞，收藏
