Summary of the latest 50 Vue full set of vue2+vue3 interview questions with answers in 2023

This article is constantly updated, welcome to add in the comment area

1. What is MVVM?

M - Model data: it is the encapsulation carrier of the data related to the business logic of the application
V - View view: it focuses on the display and rendering of the interface
VM - ViewModel view-data: it is the glue of View and Model, responsible for The interaction and collaboration between View and Model
Vue two-way data binding is achieved through data hijacking combined with publish-subscribe mode, that is to say, data and view are synchronized, data changes, view changes, view changes, and data also occurs Change;
Core: About VUE two-way data binding, its core is Object.defineProperty() method, get set method.
The most iconic feature of MVVM is data binding. The core idea is to separate the View layer from other layers through declarative data binding. The concept of completely decoupling the View layer also makes it easier to write test cases for the Web front end.
One of the most important features of MVVM is the two-way binding of data, while React is a one-way data flow, state-driven view, it does not have a pure sense of VM, it only uses attributes and states to map views, which is obviously not MVVM. Top More is the V layer in MVVM. For Vue Technically speaking, Vue.js mainly focuses on the ViewModel layer of the MVVM pattern. It connects the view and the model through two-way data binding. It is more like MVVM but not completely in accordance with MVVM. Realization, just borrowed some ideas from MVVM.
View and model cannot communicate directly under the framework of MVVM. They communicate through the ViewModel. The ViewModel usually implements an observer. When the data changes, the ViewModel can monitor the change of the data, and then notify the corresponding view for automatic update. When the user operates the view, the ViewModel can also monitor To the change of the view, and then notify the data to make the change, which actually realizes the two-way binding of the data. And the View and ViewModel in MVVM can communicate with each other

2. What is MVC?

• M - Model data: data entity, used to save the data to be displayed on the page. For example, the data obtained by ajax.
• V - View view, a page that displays data, usually html.
• C - Controller Controller: Controls the entire business logic and is responsible for processing data, such as data acquisition and data filtering, which in turn affects the display of data on the view.
MVC is one of the most widely used software architectures. Generally, MVC is divided into: Model (model), View (view), and Controller (controller). This is mainly based on the purpose of layering, so that the responsibilities of each other are separated. View generally uses Controller to communicate with Model. Controller is the coordinator of Model and View, and View and Model are not directly connected. Basically a one-way connection. M and V refer to the same meaning as M and V in MVVM. C means Controller refers to the page business logic. MVC is one-way communication. That is, the View and the Model must be connected through the Controller.

3. Talk about the difference between MVVM and MVC

"The difference between MVVM and MVC is as follows: 1. The communication between each part of mvvm is two-way, while the communication between each part of mvc is one-way; 2. mvvm really separates the page and data logic into js to achieve, while in mvc Not separated."
MVC allows changing the way the view responds to user input without changing the view. The user's operations on the View are handed over to the Controller for processing, and the Controller responds to the events of the View by calling the interface of the Model to operate on the data. Once When the Model changes, the relevant views are notified to update.
The specific evolution process: traditional MVC ——> MVP ——> MVVM

4. Differences between vue3 and vue2

1. Refactoring of responsive system, use proxy to replace Object.defineProperty attribute, advantages:

- Proxy可直接监听 对象`添加/删除`属性;

- Proxy直接监听 数组的变化

- Proxy监听的目标是对象本身，不需要像Object.defineProperty那样遍历每个属性，有一定的性能提升

2. New 组合式API(Composition API), better logic reuse and code organization:

- setup配置

- ref与reactive

- watch与watchEffect

- provide与inject

3. Reconstruct virtual DOM, diff algorithm

4. Life cycle renaming

Vue3.0 provides lifecycle hooks in the form of Composition API, and the corresponding relationship with the hooks in Vue2.x is as follows:

beforeCreate ===> setup()

created ===> setup()

beforeMount ===> onBeforeMount

mounted ===> onMounted

beforeUpdate ===> onBeforeUpdate

updated ===> onUpdated

beforeUnmount===> onBeforeUnmount

unmounted ===> onUnmounted

5. New built-in components: Fragment, Teleport, Suspense

6. Remove:

- 移除v-on.keyCode修饰符，同时也不再支持config.keyCodes

- 移除v-on.native修饰符,

- 移除过滤器（filter）

- `不`再建议使用mixins, 组合式函数本身就是更好的mixin代替品

5. Responsive principle of vue2.x

• Object type: Intercept reading and modifying properties through Object.defineProperty() (data hijacking)

• Array type: interception is achieved by overriding a series of methods for updating the array. (The change method of the array is wrapped).

• There are problems:

1. When adding or deleting attributes, the interface will not be updated.

2. Modify the array directly through the subscript, and the interface will not be automatically updated.

Supplement: $set in vue2 can solve these problems.

6. Responsive principle of vue3.0

• Through Proxy (proxy): Intercept the change of any attribute in the object, including: read, write, add, delete, etc. of attribute value.

• Through Reflect (reflection): operate on the properties of the source object.

new Proxy(data, {
    
    

    // 拦截读取属性值

    get (target, prop) {
    
    

        return Reflect.get(target, prop)

    },

    // 拦截设置属性值或添加新属性

    set (target, prop, value) {
    
    

        return Reflect.set(target, prop, value)

    },

    // 拦截删除属性

    deleteProperty (target, prop) {
    
    

        return Reflect.deleteProperty(target, prop)

    }

})

proxy.name = 'tom' 

7. Why use Proxy API instead of defineProperty API in Vue3.0?

a. The biggest limitation of the defineProperty API is that it can only monitor singleton properties.

The responsive implementation in Vue2.x is based on the descriptor in defineProperty. It traverses + recurses the attributes in data, and sets getters and setters for each attribute.
This is why Vue can only respond to predefined attributes in data. Using subscripts in Vue to directly modify the value of an attribute or add a pre-existing object attribute cannot be monitored by a setter. This is a limitation of defineProperty.
b. The monitoring of the Proxy API is aimed at an object, so all operations on this object will enter the monitoring operation, which can completely proxy all attributes, which will bring great performance improvements and better codes.

Proxy can be understood as setting up a layer of "interception" before the target object. External access to the object must first pass through this layer of interception. Therefore, a mechanism is provided to filter and rewrite external access.
c. Reactive is lazy

In Vue.js 2.x, for an object with deep property nesting, if you want to hijack its internal deep changes, you need to recursively traverse the object and execute Object.defineProperty to make each layer of object data responsive , which will undoubtedly consume a lot of performance.
In Vue.js 3.0, using the Proxy API cannot monitor the deep-level property changes inside the object, so its processing method is to recursively respond in the getter. The advantage of this is that the internal properties that are actually accessed will become Responsive, simply can be said to be responsive on demand, reducing performance consumption.

8. What optimizations did Vue3.0 compile?

Generate Block tree

The granularity of Vue.js 2.x data updating and triggering re-rendering is at the component level, and within a single component, the entire vnode tree of the component needs to be traversed.
In 2.0, the speed of rendering efficiency is positively correlated with the size of the component: the larger the component, the slower the rendering efficiency. Moreover, for some static nodes without data update, these traversals are a waste of performance.
Vue.js 3.0 has achieved the analysis of the static template through the compilation phase, and the compilation generates a Block tree.
Block tree is a nested block that divides templates based on dynamic node instructions. The node structure inside each block is fixed, and each block only needs to track the dynamic nodes it contains.
Therefore, in 3.0, the rendering efficiency is no longer positively correlated with the size of the template, but is positively correlated with the number of dynamic nodes in the template.

slot compilation optimization

In Vue.js 2.x, if a component is passed into a slot, every time the parent component is updated, the child component will be forced to update, resulting in a waste of performance.
Vue.js 3.0 optimizes the generation of slots, so that the update of attributes in non-dynamic slots will only trigger the update of subcomponents.
Dynamic slot refers to the use of v-if, v-for, dynamic slot name, etc. on the slot, which will cause the slot to dynamically change at runtime but cannot be tracked by sub-components.

diff algorithm optimization

9. Which hook functions will be triggered when VUE2 loads the page for the first time?

When the page is loaded for the first time, the hook
functions beforeCreate, created, beforeMount, mounted will be triggered

10. Advantages of Vue3

better performance

smaller size

better ts support

better code organization

better logic extraction

More new features

11. What are the new features of Vue3?

1. Performance improvement

Responsive performance improvement, from the original Object.defineProperty to ES6-based Proxy, making it faster and eliminating warnings.

Vdom has been rewritten to break through the performance bottleneck of Vdom.

Perform template compilation optimization.

More efficient component initialization.

2. Better support for typeScript

With better type inference, Vue3 supports typeScript very well.

3. Add Composition API

Composition API is a new function of vue3, which is more powerful than mixin. It can separate each functional module, improve the reusability of code logic, and make the code more compressible.

4. New components

Fragment no longer restricts the template to only one root point.

Teleport Portal allows us to transfer the content of our control to any DOM.

Supense renders some extra content while waiting for asynchronous components to give the app a better user experience.

5. Tree-shaking: support tree-shaking optimization

After tree-shaking optimization, unnecessary modules will be pruned, and the modules that are really needed will be packed into the package. The optimized project is half the size of the original and loads faster.

6. Custom Renderer API: custom renderer

Do WebGL programming the way the DOM is implemented.

12. Is there any change in the vue3 combined API life cycle hook function?

setup operates around the beforeCreate and created lifecycle hooks, so there is no need to define them explicitly. Other hooks can be programmed into setup.

It is worth noting that the hook functions in the combined API, by adding "on" in front of the life cycle hook to access the life cycle hook of the component, need to be registered, and can only be used synchronously during setup, because they rely on the internal global state to locate the current component instance.

13. What is the Options API?

In vue2, we define attributes and methods such as data, methods, props, mounted, and computed in a vue file to jointly process page logic. This method is called Options API.

For complex components developed in this way, the same function often needs to define properties and methods in different vue configuration items, and the code is relatively scattered. If the function is more complicated, it is often difficult to distinguish the function corresponding to each method when maintaining the code, which increases the cost of code maintenance. So vue3 abandoned the Options API and replaced it with the Composition API.

14. What is Composition API?

Composition API is new to vue3, so vue2 doesn't have it. In the Composition API, it is organized according to the logic function of the code. All the APIs defined by a function will be put together, so that even if the function is complex and the amount of code increases, all the code of a certain function can be located at once, and code maintenance convenient. Its biggest feature is: high cohesion, low coupling.

15. What is the difference between Composition API and Options API?

Vue3 still supports the options API, but we recommend using the Composition API. Advantages and disadvantages comparison:

Better programmability.

Better code organization.

Better logical abstraction ability.

It is friendly to tree-shaking, and the code is easier to compress.

no this

16. What is the difference between watch and watchEffect?

Both watch and watchEffect are listeners, and watchEffect is a side effect function. The differences between them are:

watch needs to pass in the data source of monitoring, and watchEffect can automatically use the mobile data source as a dependency.

watch can access the value before and after the change, watchEffect can only get the value after the change.

When the watch is running, it will not be executed immediately, but will be executed after the value changes, while the watchEffect can be executed immediately after running. This can be changed through the configuration item immediate of the watch.

17. How is two-way data binding implemented in Vue2?

Answer: vue two-way data binding is realized through data hijacking combined with publish and subscribe mode, that is to say, data and view are synchronized, data changes, view changes, view changes, data also changes; core:
About VUE two-way data binding, its core is Object.defineProperty() method, get set method.
Simply put, this method is used to define a value. When calling, we use the get method in it, and when we assign a value to this property, we use the set method in it;

18. The life cycle of vue2

A Vue instance has a complete life cycle, that is, a series of processes from the beginning of creation, initialization of data, compilation of templates, mounting of Dom→rendering, update→rendering, unloading, etc. We call this the life cycle of Vue. In layman's terms, it is the process of Vue instance from creation to destruction, which is the life cycle.
beforeCreate: the mount element el and data of the vue element are both undefined and not yet initialized;
created: the data object data of the vue instance is available, but el is not yet;
beforeMount: the $el and data of the vue instance are initialized, but still pending Loaded on the previous virtual dom node, data.message has not been replaced;
mounted: the vue instance is mounted, and data.message is successfully rendered.
Before and after update: the beforeUpdate and updated methods will be triggered when data changes;
before and after destruction: beforeDestory and destroyed, after executing the destroyed method, the change to data will not trigger the periodic function, indicating that the vue instance has released event monitoring and dom binding, but The dom structure still exists;

19. The role of the vue2 life cycle:

There are multiple event hooks in his life cycle, which makes it easier for us to form a good logic when controlling the process of the entire vue instance.
Some usage methods of life cycle hooks:
beforeCreate: loading event, triggered when the instance is loaded.
created: initialization complete event, asynchronous request.
mounted: mount the element, get the dom node
uptaded: process the data uniformly
beforeDestory: confirm that the event stops.
nextTick: Operate the dom immediately after updating the data.

20. How to upgrade vue2 to vue3?

If you are upgrading the previous vue2 project to vue3, first uninstall the old version of vue-cli and install the latest version. After the installation is complete, check the version of vue. Then you need to pay attention to the changes or obsolete features of vue3 in the project that need to be modified. like:

$children is removed by vue3, and $ref needs to be replaced by $children.

filters were removed and changed to computed.

$destory is removed and needs to be deleted.

New changes to slots.

Vuex usage changed.

vue-router usage changes and more.

21.Which priority is higher between v-if and v-for?

In vue2 the priority of v-for is higher, but the priority has changed in vue3. v-if has higher precedence.

When v-for and v-if appear at the same time in vue2, they can be placed in a tag.
Writing this way in vue3 will cause an error, because v-if has a higher priority, and it will cause an error when it is written to a tag for rendering

22. What is script setup?

scrtpt setup is a grammatical sugar of vue3, which simplifies the writing of combined API and has better running performance. Features of syntactic sugar using script setup:

Properties and methods do not need to be returned and can be used directly.

When a component is introduced, it will be automatically registered without manual registration through components.

Use defineProps to receive the value passed by the parent component.

useAttrs to get attributes, useSlots to get slots, and defineEmits to get custom events.

By default, no attributes will be exposed to the outside world, and defineExpose can be used if necessary.

23. What are the common APIs of vue3

Vue3 supports tree-shaking of webpack5, so now all APIs need to be imported before use:

ref：

Commonly used: ref(), isRef(), unRef(), toRef(), toRefs(), shallowRef()

Note: toRef(), toRefs() are used when you still want the data to be responsive when deconstructing

reactive：

Commonly used: reactive(), isReactive(), shallowReactive(), isProxy(), toRaw()
readonly: read-only, cannot be modified
computed:

//写法1：接受一个getter函数，并根据getter的返回值返回一个不可变的响应式ref对象
const a = computed(()=>{})
//写法2：接受一个具有get、set函数的对象，用来创建可写的ref对象
const b = computed({
 get: () =>{},
 set: (newValue) => {},
})

watch：

const obj = reactive( {a:{b:1}} )
const e = ref('e')
const f = ref('f')
watch( obj, (newValue,oldValue) => {})
watch( ()=>obj.a.b, (newValue,oldValue) => {}) //监听对象里的某个属性，必须用getter返回，即必须写成()=>obj.a.b的形式（直接写成obj.a.b会报错）
watch( ()=>_.cloneDeep(obj), (newValue,oldValue) => {}) //深拷贝过后,监听的newValue,oldValue才会是前后值不一样,否则newValue,oldValue打印值一样
watch( [e,f], (newValue,oldValue) => {})//vue3新增的写法，可同时监听多个ref数据，写成数组形式
const stop = watch(obj,()=>{}) 
stop()  //停止监听

watchEffect: Immediately execute a function passed in, while responsively tracking its dependencies, and re-run the function when its dependencies change (the data written in watchEffect will be collected as its dependencies, and watchEffect will only be triggered when these dependencies change )

const stop = watchEffect(() =>{},{flush:'post'})   //对写在回调函数里的所有数据监听
stop()  //停止监听

24. What is Teleport in Vue3? What does it do?

Teleport in Vue3 is a new directive to control where to render. What it does is move a component's content around in the DOM without changing the component's parent.

25. What is Suspense in Vue3? What does it do?

Suspense in Vue3 is a new component in Vue3, which is used to implement lazy loading and error handling. Adding Suspense to the component allows the asynchronous component to render the loading state, and if there are errors when the asynchronous component loads, it can also handle these errors.

26. What is a responsive system? What's new with the reactive system in Vue3?

A reactive system allows views to be updated when state changes. Responsive system updates in Vue3 include Proxy, Reflect, WeakMap, etc.

27. What is the Vue3 Composition API? What does it do?

Vue3 Composition API is a new feature in Vue3, its function is to decompose the logic in the component into reusable composable functions. By using the Composition API, you can better organize your code and manage state.

28.3. Vue3 life cycle

1. Options API life cycle

2. Composition API life cycle

29. How to view composition API and options API

1. Composition API Better code organization, better logic reuse, better type push
2. Small projects, simple business logic, using Options API
3. For medium and large projects with complex business logic, use Composition API
4. Composition API is designed to solve complex business logic
5. Similar to React Hooks

30. Explain ref toRef and toRefs?

1. ref
   1. Generating Reactive Data of Value Types
   2. Can be used for templates and reactive
   3. Modify the value by .value
2. toRef
   1. A prop for a reactive object (reactive wrapper)
   2. Create a ref with responsive
   3. Both maintain a reference relationship
3. toRefs, to avoid all state exports in the template
   1. Convert responsive objects (reactive encapsulation) into ordinary objects
   2. Each prop of the object is the corresponding ref
   3. Both maintain a reference relationship
4. Best way to use
   1. Use reactive to respond to objects, and use ref to respond to value types
   2. Return toRefs(state) or toRef(state, 'prop') in setup
   3. The variables of ref are named with xxxRef
   4. When the composite function returns a responsive object, use toRefs

31. Why do you need toRef toRefs

1. 初衷：不丢失响应式的情况下，把对象数据进行分解和扩散
2. 前提：针对的事响应式对象，不是普通对象
3. 注意：不创造响应式，而是延续响应式

32. How to get component instance in setup?

1. There is no this in setup and other Composition APIs
2. You can still use this in the Options API
3. In the Composition API, you can use the getCurrentInstance method to obtain

33.Comparison between Composition API and React Hooks

1. The former setup (lifecycle create) will only be called once, while the latter function will be called multiple times
2. The former does not need useMemo, useCallback, because setup is only called once
3. The former does not need to consider the calling order, while the latter needs to ensure that the order of hooks is consistent

34. What are the event modifiers in Vue3?

The event modifiers in Vue3 are basically the same as Vue2, including stop, prevent, capture and self.

35. How to implement dynamic components in Vue3?

Vue3 uses elements and the v-bind:is attribute to implement dynamic components. For example, .

36. The difference between Object.defineProperty and Proxy

The difference between Object.defineProperty and Proxy is as follows:

1. Proxy can directly monitor objects instead of properties;
2. Proxy can directly monitor changes in arrays;
3. Proxy has up to 13 interception methods, not limited to apply, ownKeys, deleteProperty, has, etc. Object.defineProperty does not have
4. Proxy returns a new object, we can only operate the new object to achieve the goal, and Object.defineProperty can only traverse the object properties and directly modify

37. What are the instructions in Vue3?

Instructions in Vue3 include v-if, v-for, v-bind, v-on, v-html, v-model, v-show, v-slot, v-text, etc.

38. Why does vue3 need to use markRaw for imported components?

In vue2, is is switched by component name, and in vue3, setup is switched by component instance. Put the component instance directly into the reactive agent, and Vue will issue a warning. Inform us that we can skip the proxy proxy by shallowRef or markRaw. Reactive proxying of component instances is pointless and a waste of performance

markRaw: Marks an object so that it cannot be a responsive object.
toRaw: converts a responsive object (responsive defined by reactive) to a normal object.
shallowRef: only handles the response of basic data types, not the response of objects.
shallowReactive: only handles the response (shallow response) of the outermost properties of the object.

<template>
	<component :is="currentComponent"></component>
</template>

<script setup>
import A from '../components/A.vue'
import B from '../components/B.vue'
let tabList = reactive([
	{name:'组件A',com:markRaw(A)},
	{name:'组件B',com:markRaw(B)},
]);

39. How does Vue3 perform state management?

Vuex is used for state management in Vue3, Vuex needs to be installed first, and Vuex should be registered with the app.use() method in the root Vue instance. Then use the store option in the component to create and access Vuex's state.

40. Why does VUE3 use a combined API?

Since vue2 has limitations:

The logical expansion of components leads to poor readability of components;

Inability to reuse code across components;

vue2 has limited support for TS

41. What are the advantages of composition API?

The composition API organizes code based on logical dependencies, improving readability and maintainability

Less code, better reuse of logic code

No new syntax is introduced, just plain functions

exceptionally flexible

The tool syntax prompt is friendly, because it is a simple function, it is easy to realize syntax prompt and automatic compensation

Better Typescript support

In the complex function component, the code can be organized according to the characteristics, and the code has strong cohesion

Code reuse between components

42. Explain the setup in Vue 3

The setup function receives two parameters, props and context.

1. props: the value is an object, including: passed from outside the component. The received properties are declared inside the component. It should be noted that props in Vue3 are read-only, that is, the value of props cannot be modified in the setup function. If you need to modify the passed data, you can use a reactive object or ref.

2. context: context object.

attrs: The value is an object, including attributes passed from outside the component, but not declared in the props configuration. Equivalent to this.$attrs

slots: received slot content, equivalent to this.$slots

emit: A function that distributes custom events, equivalent to this.$emit

43. provide and inject

1. Provide and inject are a pair of new APIs for providing data in the parent component and then injecting data in the child component.

2. provide: is an object, or a function that returns an object. It contains things to be given to future generations, that is, attributes and attribute values.

3. inject: an array of strings, or an object. The attribute value can be an object, containing from and default default values.

//在父组件中，使用provide提供数据：
//name：定义提供 property的 name。
//value ：property的值。
 setup(){
    provide('info',"值")
  }
​
//在子组件中，使用inject注入数据
//name：接收 provide提供的属性名。
//default：设置默认值，可以不写，是可选参数。
setup(){
    const info = inject("info")
    inject('info',"设置默认值")
    return {
        info
    }
  }
​
//需要注意的是，provide和inject只能在setup函数中使用，而且provide提供的数据只能在其子组件中使用。如果要在兄弟组件中共享数据，可以使用一个共享的对象或者使用Vuex等状态管理库。

44.shallowReactive 与 shallowRef

1. shallowRef: Responsive type that only handles basic data types

2. shallowReactive: Responsive (shallow responsive) that only deals with the outermost properties of the object

3. Responsive data processing with shallow functions: only the data of the first-level object is processed, and the data nested further down, the operation data is ineffective

4. shallowReative and shallowRef can improve performance in some special application scenarios. The former is aimed at objects and is used for shallow response data processing, while the latter only handles the response of basic data types and does not perform object processing. Responsive processing.

45.readonly 与 shallowReadonly

Both readonly and shallowReadonly allow responsive data to only have the ability to read. The latter is shallow read-only, that is, it only works on the first layer of data objects, and deep nesting, when processing with shallowReadonl() , the deep data support is modified

1. readonly: Make a responsive data read-only (deep read-only), make a responsive data read-only, receive a responsive data, process it through readonly, then the newly assigned data will not allow modification

2. Accept an object (whether responsive or normal) or a ref, and return a read-only proxy of the original value

3. ShallowReadonly: Make a responsive data read-only (shallow read-only), receive a responsive data, after shallowreadonly processing, become a read-only, only consider the first layer data of the object, and cannot be modified , but the deep data in the first level of nesting supports modification

4. Let a responsive data become read-only (shallow read-only).

46. ​​Father to son in vue3, son to father

1. From father to son:

1. Pass on the subcomponent tag of the parent component: the data name passed to the subcomponent = 'data to be passed'

2. Receive through props in the subcomponent and use it in the template

2, child and father:

1. The subcomponent triggers the event through the second parameter of the setup function, context.emit, to realize the transmission from the child to the parent

47. What is the difference between ref and reactive?

1. Simply put, ref is usually used to define 基本类型data, and reactive is used to define 对象（或者数组）type data

Note: ref can also be used to define object (or array) type data, which will be automatically converted to a proxy object through reactive internally.

2. In terms of use: ref operates on data 需要.valuevalues, which is not required in template templates.

reactive 不需要.valuetakes the value
3. In terms of data transfer:

Destructuring assignment will cause reactive to lose responsiveness, but {ref(1), ref(2)} will not

4. Principle angle:

ref implements responsiveness (data hijacking) through the get and set of Object.defineProperty().

reactive implements responsiveness (data hijacking) by using Proxy, and manipulates the data inside the source object through Reflect.

48. Judgment of vue3 responsive data?

isRef: checks if a value is a ref object

isReactive: checks if an object is a reactive proxy created by reactive

isReadonly: checks if an object is a readonly proxy created by readonly

isProxy: checks if an object is a proxy created by a reactive or readonly method

49. How to understand toRef

Function: Create a ref object whose value points to an attribute in another object.

Syntax: const name = toRef(person,'name')

Application: When you want to provide a property in the responsive object for external use alone.

Extension: toRefs has the same function as toRef, but multiple ref objects can be created in batches, syntax: toRefs(person)

50. What new components does vue3 have?

1. Fragment
in Vue2: the component must have a root tag

In Vue3: Components can have no root tags, and multiple tags will be included in a Fragment virtual element internally

Benefits: Reduce label levels, reduce memory usage

2. Teleport
What is Teleport? —— Teleport is a technology that can move our component html structure to a specified location.

<teleport to="移动位置">
    <div v-if="isShow" class="mask">
        <div class="dialog">
            <h3>我是一个弹窗</h3>
            <button @click="isShow = false">关闭弹窗</button>
        </div>
    </div>
</teleport>

3. Suspense
renders some additional content when waiting for asynchronous components, so that the application has a better user experience

Steps for usage:

Import components asynchronously

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

Use Suspense to wrap components, and configure default and fallback

<template>
    <div class="app">
        <h3>我是App组件</h3>
        <Suspense>
            <template v-slot:default>
                <Child/>
            </template>
            <template v-slot:fallback>
                <h3>加载中.....</h3>
            </template>
        </Suspense>
    </div>
</template>

51. To be supplemented

• I will write here today~
• Friends, (￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ See you tomorrow~~
• Everyone be happy every day

Everyone is welcome to point out where the article needs to be corrected~
Learning is endless, cooperation is win-win

Welcome the little brothers and sisters passing by to put forward better opinions~~