Vue3 Other new features 2

This is the 26th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

If you feel helpful, please click 👍 to encourage you

Teleport shift (a)

• Teleport provides a clean way for a component’s HTML to insert the display under a specific tag (most likely body) outside the parent component’s interface
• Use selectors inside to attribute quotes

  <teleport to="body">
  </teleport>
Copy the code

The parent component

<template>
  <h2>App</h2>
  <modal-button></modal-button>
</template>

<script lang="ts">
import ModalButton from './ModalButton.vue'
export default {
  setup() {
    return{}},components: {
    ModalButton
  }
}
</script>
Copy the code

Child components

The node will appear under the body

<template>
  <button @click="modalOpen = true">Click me to open the dialog box</button>

  <teleport to="body">
    <div v-if="modalOpen">
      <div>Look where I showed up<button @click="modalOpen = false">
          Close
        </button>
      </div>
    </div>
  </teleport>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'modal-button',
  setup () {
    const modalOpen = ref(false)
    return {
      modalOpen
    }
  }
}
</script>
Copy the code

Girl (uncertain)

• They allow our application to render some back-up content while waiting for asynchronous components, allowing us to create a smooth user experience
• V-slot :defaul can be abbreviated to #defaul

• How to introduce asynchronous components in VUE3

const AsyncComp = defineAsyncComponent(() = > import('./AsyncComp.vue'))
Copy the code

The parent component

<template>
  <Suspense>
    <template v-slot:default>
      <AsyncComp/>
    </template>

    <template v-slot:fallback>
      <h1>LOADING...</h1>
    </template>
  </Suspense>
</template>

<script lang="ts">
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() = > import('./AsyncComp.vue'))
export default {
  setup() {
    return{}},components: {
    AsyncComp,
  }
}
</script>
Copy the code

Child components

<template>
  <h2>AsyncComp22</h2>
  <p>{{msg}}</p>
</template>

<script lang="ts">
export default {
  name: 'AsyncComp',
  setup () {
     return new Promise((resolve, reject) = > {
       setTimeout(() = > {
         resolve({
           msg: 'abc'})},2000)}}}</script>
Copy the code

Judgment of responsive data

• IsRef: Checks whether a value is a ref object
• IsReactive: Checks whether an object is created byreactiveCreate a responsive proxy

• IsReadonly: Checks whether an object is created byreadonlyThe read-only agent created
• IsProxy: Checks whether an object is created byreactiveorreadonlyMethod to create an agent

setup() {
    const state1 = ref(1);
    console.log('isref:', isRef(state1));//isref: true
    const state2 = reactive({});
    console.log('isReactive:', isReactive(state2));//isReactive: true
    const state3 = readonly({});
    console.log('isReadonly:', isReadonly(state3));//isReadonly: true
    const state4 = reactive({});
    console.log('isProxy:', isProxy(state2));//isProxy: true
    console.log('isProxy:', isProxy(state4));//isProxy: true
    return {};
  },
Copy the code

ShallowReactive and shallowRef

• ShallowReactive: Handles only the responsivity of the outermost properties within the object (i.e. shallow responsivity)
• ShallowRef: Only value responses are processed, and reactive is not implemented

 setup() {
    // Depth response
    const m1 = reactive({ a: 1.b: { c: 2}});// Shallow response
    const m2 = shallowReactive({ a: 1.b: { c: 2}});// Depth response
    const m3 = ref({ a: 1.b: { c: 2}});// Shallow response
    const m4 = shallowRef({ a: 1.b: { c: 2}});const update = () = > {
      // Change m1 data --reactive mode
      // m1.a += 1;
      // m1.b.c += 1;
      // Change m2 data --shallowReactive
      // m2.a += 1;
      // m2.b.c += 1;
      // Change the data of m3 -- the way of ref
      // m3.value.a += 1;
      // m3.value.b.c += 1;
      // Change m4 data --shallowRef mode
      // m4.value.a += 1;
      // m4.value.b.c += 1;
      console.log('m3:', m3);
      console.log('m4:', m4);
    };
    return { m1,m2,m3,m4,update };
  },
Copy the code