Vue3 - 进阶体验 [3]在这篇文章中我主要想分享三个知识点 - Fragment `vue3 新增默认隐式标签`

前言

前两章节分享了使用 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 ，代码看起来简单了很多，开发效率大大的提高。唯一不美观的就是它还在实验阶段

小小鼓励，大大成长，欢迎点赞，收藏

Vue3 - 进阶体验 [3]

前言