Web front-end interview high-frequency test site - important functions of Vue3.x upgrade (emits attribute, life cycle, multiple events, Fragment, move out .async, asynchronous component writing, move out filter, Teleport, Suspense...)

Series Article Directory

---

---

1. Three consecutive questions (why)

1. Why do you need to use ref?

• Return value type, will lose responsiveness
• For example, in setup, computed, and synthetic functions, it is possible to return value types
• If Vue does not define ref, users will create their own ref, which will be confusing

whyRef.vue component

• Value types are everywhere
• vue3 is responsive through proxy, but only valid for reference types (arrays, objects)
• In order to make value types also responsive, ref appears

<template>
  <p>why ref demo {
    
    {
    
     state.age }} - {
    
    {
    
     age1 }}</p>
</template>

<script>
import {
    
     toRefs, reactive, computed } from "vue";

function useFeatureX() {
    
    
  const state = reactive({
    
    
    x: 1,
    y: 2,
  });

  return toRefs(state);
}

export default {
    
    
  name: "whyRef",
  setup() {
    
    
    const {
    
     x, y } = useFeatureX();

    const state = reactive({
    
    
      age: 20,
      name: "杂货铺",
    });

    const age1 = computed(() => {
    
    
      return state.age + 1;
    });

    setTimeout(() => {
    
    
      console.log(x.value, y.value);
      state.age = 25;
    }, 1000);

    return {
    
    
      state,
      age1,
    };
  },
};
</script>

---

2. Why is .value needed?

• ref is an object (without losing responsiveness), value stores the value
• Reactive through .valueproperty get and set
• Not required when used in templates, reactive, and required .valuein other cases

3. Why do you need toRef and toRefs?

• Original intention: Disperse/expand (deconstruct) object data without losing responsiveness
• Premise: for reactive objects (reactive encapsulated) non-ordinary objects
• Note: do not create responsive, but continue responsive

2. What important functions have been upgraded in Vue3

1、createApp

vue2.x vs vue3.0

// vue2.x
const app = new Vue({
    
    ...})

// vue3
const app = Vue.createApp({
    
    ...})

vue2.x uses vs. vue3.0

// vue2.x
Vue.use(...)
Vue.mixin(...)
Vue.component(...)
Vue.directive(...)

// vue3
app.use(...)
app.mixin(...)
app.component(...)
app.directive(...)

2. The emits attribute

App.vue parent component

• The child component label of the parent component is bound to the onSayHello custom event
• info, is the parameter to be passed from the child to the parent
• Note that the binding must be @onXxxin the format, which is easier to identify as listening events (rules)

<template>
    <HelloWorld @onSayHello="sayHello" />
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
    
    
  methods: {
    
    
    sayHello(info) {
    
    
      console.log('hello', info);
    }
  },
  components: {
    
     HelloWorld },
};
</script>

HelloWorld.vue child component

• Pass two parameters in setup
• The first parameter props, get the property
• The second parameter is an object, and after object destructuring is the emit property
• After that, the custom event is called through emit, which is later used to pass parameters

<template>
  <p>emits 的使用</p>
</template>

<script>
export default {
    
    
    name: 'HelloWorld',
    emits: ['onSayHello'],
    setup(props, {
     
      emit }) {
    
    
        emit('onSayHello', 'vue3')
    }
};
</script>

3. Life cycle

Refer to the previous article

4. Multiple events

Define one two two functions in methods

<button @click="one($event), two($event)">Submit</button>

5. Fragment component template

vue2.x component template: multiple html tags must be wrapped

<template>
  <div>
    <h3>Hello Vue3</h3>
    <p>前端杂货铺</p>
  </div>
</template>

vue3.x component template: no need to wrap

<template>
    <h3>Hello Vue3</h3>
    <p>前端杂货铺</p>
</template>

6. Remove .async

Async can realize two-way binding between parent and child component data, similar to v-model

There can only be one v-model on a component in Vue2, and the .sync modifier can have many

// vue2.x
<MyComponent v-bind:title.sync="title" />

// vue3.x
<MyComponent v-model:tilte="title">

7. Writing of asynchronous components

Vue2.x writing

new Vue({
    
    
  components: {
    
    
    'my-component': () => import('./xxx.vue')
  }
})

Vue 3.x transcription

import {
    
     createApp, defineAsyncComponent } from 'vue'

createApp({
    
    
    components: {
    
    
        AsyncComponent: defineAsyncComponent(() => 
            import('./components/AsyncComponent.vue')
        )
    }
})

8. Remove filter

The following filters are not available in vue3

{
    
    {
    
     message | capitalize}}

<div v-bind:id="rawId | formatId"></div>

9、Teleport

Detailed reference link

• is a technique that can move our component html structure to a specified location
• set in datamodalOpen: false

<button @click="modalOpen = true">
    打开全屏模式（使用 teleport）
</button>

<teleport to="body">
    <div v-if="modalOpen" class="modal">
        <div>
            telePort 弹窗（父元素是 body）
            <button @click="modalOpen = false">关闭弹窗</button>
        </div>
    </div>
</teleport>

10、Suspense

Detailed reference link

• Render some extra content while waiting for async components to make the app have a better user experience

<Suspense>
	<Test1 /> <!-- 是一个异步组件 -->
	<!-- #fallback 就是一个具名插槽
	    即 Suspense 组件内部，有两个 slot，
	    其中一个具名为 falllback -->
	<template #fallback>
	    Loading...
	</template>
</Suspense>

11、Composition API

• reactive
• ref related
• readonly
• watch 和 watchEffect
• setup
• Lifecycle hook function

不积跬步无以至千里 不积小流无以成江海

Click to follow and don't get lost, continue to update...