preface

The first two chapters share how to use the Vue3 technology stack to create a project to get started quickly, create a project, and get started quickly. Once you have seen and practiced the project, there is no problem in theory.

In this article I would like to share three main knowledge points

  • Fragment Vue3 added default implicit labels
  • Teleport A technique that teleports our HTML structures
  • script setup Experimental writing by the Vue team

Fragment

In Vue2, a component must have a root tag. In Vue3, the component can have no root tag. It contains multiple tags inside a Fragment virtual element. Children who have used document fragments can understand that they are basically similar, so let’s look at the code

<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: "XiaoNa".age: 17 });
    return{ refValue, reactiveValue }; }};</script>
Copy the code

Benefits Reduced label hierarchy and reduced memory footprint

Teleport

Teleport is a new technology provided by Vue3, which teleports the DOM elements inside a component to a certain location. It may not be easy to understand in simple terms, but let’s use code to practice the effect

Teleport grammar

<Teleport to="Location to move, e.g. body, ID, class, etc.">
    / /... One's own element
</Teleport>
Copy the code

practice

<template>
  <h2>{{reactiveObj.name}} - {{reactiveObj.demo}}</h2>
  <h2 @click="isShow = true">Open the</h2><! -- Notice the Teleport to body --><Teleport to="body"> 
    <div class="tip"
         v-if="isShow">
      <button @click="isShow = false">Shut down</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>

Copy the code

Elements of class tip by default are not displayed, and I wrote them inside a component. When I click open, elements of class Tip are displayed, and when I click close, elements of class Tip are displayed. To see the effect, I used V-if

Teleport has been moved to the end of the body tag, and the tip element is positioned relative to the body tag

Without Teleport general effects, you are still defining element positions

script setup To understand

Why did I add a note in the title? Up to now, the Vue team has not officially released this syntax, it is only in the experimental stage, but whether it smells good or not, I can only tell you, a word smells good!

Script Setup is a technical solution that simplifies setup functions to make code more concise. Why? Let’s review how setup is used

<template>
    <h3>{{refValue}}</h3>
</template>

<script>
import { ref } from "vue";
export default {
  setup () {
    let refValue = ref(123)
    return{ refValue, }; }};</script>

Copy the code

Without further ado, I’ll just use script setup for comparison

<template>
    <h3>{{refValue}}</h3>
</template>

<script setup> / / attention
import { ref, reactive } from "vue"
let refValue = ref(123)
</script>

Copy the code

What did you find? In Script Setup, the

Use variables and methods

<script setup>
import { ref } from "vue";
const refValue = ref("setup script");
const handlerClick = () = > {
  console.log("on click");
};
</script>
Copy the code

Using the component

Imported components are automatically registered and can be used directly

<script  setup>
import childComp from "./components/childComp.vue";
import Button from "./components/Button.vue";
</script>
Copy the code

The use of props

In Script Setup, you need to define defineProps, which is basically the same as props

<script setup>
import { defineProps } from "vue";
const props = defineProps(['title'.'content']);
</script>

// Define the type for 'props'
const props = defineProps({
  title: String.content: {
      type: Stirng,
      required: true}});Copy the code

Use the context

Like a hooks to slots, attrs, attrs to slots is the same as it was in setup

import { useContext } from 'vue'
const { slots, attrs } = useContext()
Copy the code

Use the emit

In script setup, you need to define it using defineEmit. Is there any difference in usage

import { defineEmit } from 'vue'  
// 4, define the event
const emit = defineEmit(['emitclick']);
// Trigger the event
const emitclick = () = > {
  emit('myclick'.'params'); 
}
Copy the code

The parent component listens as Vue2 does

<template> 
  <HelloWorld msg="Hello Vue3" @myclick="onmyclick"/>
</template> 
<script setup>
import HelloWorld from './components/HelloWorld.vue'; 
const onmyclick = () = > {
  console.log("Event emitted by child component HelloWord via emit");
} 
</script>
Copy the code

The end of the

In general, these features are awesome, especially the Setup script. The code looks much simpler and the development efficiency is greatly improved. The only thing that’s not pretty is that it’s experimental

Small encouragement, great growth, welcome to praise, collection