Vue3 - advanced experience [3]

Preface

The first two chapters share the use of Vue3 How to create a technology stack project to get started quickly , After reading and practicing , In theory, there is no problem to start the project directly .

In this article, I mainly want to share three knowledge points

• Fragment vue3 Add default implicit label
• Teleport One that can bring us html Technology of structural teleportation
• script setup Vue Experimental writing proposed by the team

Fragment

In the previous chapter , Pay attention to the children's shoes that have seen the code , I don't know if there is a small change in wood , stay Vue2 in , The component must have a root label , And in the Vue3 in , To optimize the , Components can have no root tag , Multiple tags will be included in one Fragment In a virtual element , Children's shoes that have used document fragments can be understood as basically similar , Let's take a look at this 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: " Xiao Na ", age: 17 }); return { refValue, reactiveValue }; }, }; </script>
 Copy code 

benefits Reduce the label level , Reduce memory footprint

Teleport

Teleport yes Vue3 Provide a new technology , Place the inside of the component dom Elements , Blink to a certain position , Speaking in vernacular alone may not be so easy to understand , Let's use code to practice the specific effect

Teleport grammar

<Teleport to=" Where to move , Such as ：body,id,class  etc. ">
    // ...  Own elements 
</Teleport>
 Copy code 

practice

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

The default class is tip The element of is not displayed , And I wrote it inside a component , When I click Open , Class is tip The element is displayed , Click close to close , In order to see the effect , I use the v-if

Teleport According to the effect , It's amazing , Was moved to body End the label position , There is also a better one at this time tip Element positioning is relative to body Of , Thief Shuang ~

not used Teleport General effects , It's still defining the position of the element

script setup understand

Why did I put an understanding on the title , Because so far Vue The team hasn't officially released the syntax yet , Just in the experimental stage , But whether it smells good or not , I can only tell you , One word sweet !

script setup It's a simplification setup Technical solution of function , Make the code more concise , Why do you say that? ? Let's review setup How to use

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

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

 Copy code 

I don't say much nonsense , I went straight to the last one script setup In the form of , Let's compare

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

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

 Copy code 

Found something ? stay script setup in , <script> The label becomes <script setup> , setup Functions no longer exist , Directly into a statement , And then ok 了 , You read that right , It's that simple , Then a wisp

Use variables and methods

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

Use components

All imported components will be registered automatically , You can use it directly

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

Use props

stay script setup in , Need to use defineProps To define , The specific usage is similar to props Is essentially the same

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

//  to `props` Definition type 
const props = defineProps({
  title: String,
  content: {
      type: Stirng,
      required: true
  }
});
 Copy code 

Use context

Like a hooks Get slots , attrs , Acquired slots attrs Just like before setup What's in it is the same

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

Use emit

stay script setup in , Need to use defineEmit To define , The usage is no different from that before

import { defineEmit } from 'vue'  
// 4, Defining events 
const emit = defineEmit(['emitclick']);
// Triggering event 
const emitclick = () => {
  emit('myclick','params'); 
}
 Copy code 

The parent component listens and follows Vue2 equally

<template> 
  <HelloWorld msg="Hello Vue3" @myclick="onmyclick"/>
</template> 
<script setup> import HelloWorld from './components/HelloWorld.vue'; const onmyclick = () => { console.log(" Child components  helloword  adopt  emit  Triggered events "); } </script>
 Copy code 

end

Generally speaking, these functions are very wow , especially setup script , The code looks much simpler , The development efficiency is greatly improved . The only thing that's not beautiful is that it's still in the experimental stage

A little encouragement , Grow greatly , Welcome to thumb up , Collection