Preface 🖼 ️

For the front end, VUejs are a constant test point. Basically, as long as a candidate’s CV has some reference to VUE, then the interviewer will look at it. So, for VUE, we need to do a basic learning from VUe2 to VUe3, in order to better deal with all kinds of difficult questions from interviewers.

In the following article, a summary and conclusion will be made from the basic knowledge of VUe2, the principle knowledge of VUE2, and then the basic knowledge and principle knowledge of VUE3. At the same time, related interview questions will be sorted out on Monday, so that you can have a better reference.

Let’s start with the explanation of this article

🎙️ 1. Vue2. X Basic knowledge preparation

Before looking at common interview questions, you need to have a systematic understanding of the basics of VUE. See 👇 below for details

About the above content, has been sorted into a blog post, stamp below the link to enter the study 👇

Summary of basic use and advanced features of VUE, peripheral plug-ins vuex and VuE-Router

Links: juejin. Cn/post / 697604…

📻 two, vue2. X basic knowledge often meet questions

Based on the above knowledge, we will subdivide it into frequent interview questions. See 👇 below for details

Let’s answer these questions one by one.

1, what is the use of each SRC folder and file in vue.cli project?

│ ├─ Assets │ ├─ Components │ ├─ Router │ ├─ Views │ ├─ App.vue │ Application │ Main Component │ main.js import fileCopy the code

2. How to use custom components in vue.cli? What problems have you encountered?

How to use:

incomponentsDirectory to create your component file (smithButton.vue);
Import in the desired page:import smithButton from '.. /components/smithButton.vue';
Injected into thevueOf the child component ofcomponentsProperties,components:{smithButton}
intemplateviewviewThe use of;
Process: Create component → import component → Inject component → Use component

Problems you will encounter:

SmithButton name, the use of smith-button, often used in the creation of camel name, but in the use of the need to convert the hump to – representation;

What problems do VUE components solve?

Vue components can improve the development efficiency of the entire project. The page can be abstracted into several relatively independent modules, which solves the problems of low efficiency, difficult maintenance and reusability of our traditional project development.

3. The difference between V-show and V-if

v-showthroughcssIn thedisplayTo control show and hide;
v-ifComponents are really rendered and destroyed, not show and hide;
Used when the display status is frequently changedv-show, or usev-if 。

4. Why is key used in V-for

You must use thekey, and cannot beindex 和 random ；
The reason is that, invue 的 diffIn the algorithm, through the pairtag 和 keyTo determine whether they are the same nodesameNodeIf the node is the same, the original node will be reused as much as possibleDOMNode.
usekeyThe benefits are: reduced rendering times, improved rendering performance.

5. Describe the Vue component lifecycle

(1) Life cycle of single component

Generally speaking, the component lifecycle is executed in the following order: mount phase, update phase, and destroy phase. The following is a breakdown of the life cycle of common components.

Lifecycle hook	introduce
beforeCreate	After instance initialization, data Observer and Event/Watcher events are called before configuration.
created	The page has not yet been rendered, but the instance of vue has been initialized.
beforeMount	Called before the mount begins: The associated render function is called for the first time.
mounted	The page has been rendered.
beforeUpdate	Called when data is updated, before the virtual DOM is re-rendered and patched. You can further change the state in this hook without triggering additional rerendering.
updated	This hook is called after the virtual DOM is re-rendered and patched due to data changes. When this hook is called, the component DOM has been updated, so you can now perform DOM-dependent operations.
activated	Called when the keep-alive component is activated.
deactivated	Called when the keep-alive component is disabled.
beforeDestroy	Called before instance destruction. At this step, the instance is still fully available.Common scenarios are as follows:Custom events need to be unbound, timed tasks such as setTimeout need to be destroyed, and self-bound Window or Document events need to be destroyed.
destroyed	Called after the Vue instance is destroyed. When called, everything indicated by the Vue instance is unbound, all event listeners are removed, and all subinstances are destroyed.

(2) Parent-child component life cycle relationship

Loading the rendering process

Parent beforeCreate-> Parent created-> parent beforeMount-> child beforeCreate-> child created-> child beforeMount-> Child Mounted -> parent MountedCopy the code

Child component update process

Parent beforeUpdate-> Child beforeUpdate-> Child updated-> Parent updatedCopy the code

Parent component update process

Father father beforeUpdate - > updatedCopy the code

Destruction of the process

Parent beforeDestroy-> Child beforeDestroy-> Child destroyed-> Parent destroyedCopy the code

6. How Vue components communicate (common)

There are three common communication modes for VUE components:

Father and son componentsprops 和 this.$emit ；
Custom eventsevent.$no 、 event.$off 和 event.$emit ；
vuex 。

Describe the process of component rendering and updating

The following diagram is important to know about the rendering and updating process of components. You can refine and interpret the whole process in the following figure from 1 to 6.

8. How does VUE handle refreshing data without losing it

rightvuexTo configure, willvuexState stored tolocalStorage;
Read when the page loadslocalStorageState information in;
When the page refreshesvuexInformation saved tolocalStorage;
In the pagevuexInformation usecomputedTo receive.

9. Realization principle of two-way data binding V-Model

Input element value = this.name;
This. Name = $event.target.value;
[Fixed] Re-render is triggered after data update
Core issue: Understand what the V-Model produces after the template is compiled.

10. What are the characteristics of computed tomography

With caching function, when data is unchanged will not be calculated;
Effectively improve performance.

Why does the component data have to be a function

Export looks like an object, but when compiled, the.vue file is a class.
In every place (data, method…) And so on is instantiating class;
We execute data at instantiation time;
If the data is not a function, the instance data of each component is the same and shared.
So we need it in a closure.

12. Which lifecycle should ajax requests be placed in

Mounted indicates that the entire rendering is complete and the DOM is loaded, so ajax requests should be placed in the Mounted lifecycle.
Js is single-threaded in nature, and Ajax is a mechanism for asynchronously fetching data and loading it asynchronously;
If it is placed before Mounted, it is useless.
The reason for this is that if you place ajax requests before Mounted, the JS rendering is not complete at this time. In addition, ajax requests are asynchronous. Therefore, data cannot be loaded before Mounted.

How do I pass all props of a component to a child component?

The parent component passes its properties to the child component via $props;
The child component then uses
to receive the parameters passed by the parent.
Note: Details are not of high priority

14. How to implement v-Model by yourself

The first step is to define a child component called CustomvModel.vue. The code is as follows:

<template>
    <! $emit sends data from child component to parent component -->
    <input type="text"
        :value="text1"
        @input="$emit('change1', $event.target.value)"
    >
    <! Input uses :value instead of v-model 2 to bind data. The above change1 and model.event should correspond to 3. Text1 above corresponds to the text1 property of the props below -->
</template>

<script>
export default {
    model: {
        prop: 'text1'.// corresponding to text1 for the props below
        event: 'change1'
    },
    props: {
        text1: String.default() {
            return ' '}}}</script>
Copy the code

Second, we use the child component above in the parent component:

<template>
    <div>
        <p>Vue advanced features</p>
        <hr>
        
        <! -- Custom v-model -->
        <p>{{name}}</p>
        <CustomVModel v-model="name"/>
    </div>
</template>

<script>
import CustomVModel from './CustomVModel'

export default {
    components: {
        CustomVModel
    },
    data() {
        return {
            name: 'Monday'}}}</script>
Copy the code

From the above code, we can see that the binding of the value property and the input event is the two syntactic sugars, and finally achieve two-way data binding.

Now let’s take a look at the browser display.

By looking at the figure above, we found that the result is the same as the actual V-model result. At this point, we have implemented a custom V-Model to manipulate two-way binding of data.

15, multiple components have the same logic, how to pull out?

In Ve2. X, when multiple components have the same logic, mixins can be used for logic extraction;
It is worth noting that mixins have the following problems:
- Variable sources are not clear, which is not conducive to reading.
- multiplemixinMay result inNaming conflicts.
- mixinAnd components may appearMany to many, the complexity is high.
Therefore, mixins should be used with caution, and vue3.x has created a Composition API to solve these problems in vue2.x.

16. When to use asynchronous components

Asynchronous components are needed when loading large components;
When vue-Router routes are loaded asynchronously, asynchronous components are required.
Asynchronous components can be used to optimize performance.

17, When to use keep-alive

Keep-alive can cache components so that they do not need to be repeatedly rendered;
Such as multiple static TAB page switching;
Keep-alive can optimize performance.

18. When to use beforeDestory

When untying the custom event.$off, use beforeDestory to destroy the event.
If a timer is bound to a time, you need to clear the timer when the timer operation ends.
Unbind custom DOM events, such as window scroll, beforeDestory life cycle to unbind them.

Note: If you do not do all three, you can easily cause memory leaks.

19. What is a scope slot

Everything in the parent component template will only compile in the parent scope;
Everything in a subcomponent template is compiled only in the subset scope;
The problem with a scope slot is that the parent component can access the child component’s data.

20. What is the difference between Action and mutation in VUEX

Async can be handled in action, mutation cannot.
Mutation does an atomic operation, that is, does an operation to compare atoms.
Action can integrate multiple mutations, which can be understood as a collection of collating multiple atomic operations.

21. Vue-router Indicates the common routing mode

A hash of the default
H5 History (Server support required)

The routing mode has been organized into a blog, specifically at the link below 👇

On the principle of front-end routing

Links: juejin. Cn/post / 699384…

22. How to configure vue-router asynchronous loading

invue-routerIn the useimportTo implement asynchronous loading.

23. How is scope implemented

(1) Implementation principle of Scoped:

toDOMThe node adds a non-repeating attributedata-v-5db9451aTo indicate uniqueness.
If there are other components inside the component, only the tags in the outermost component are assigned unique attribute fields, and the components referenced inside the component are not affected.

(2) The role of scoped in vue

Implement component privatization, currentlystyleStyle attributes belong only to the current module and do not pollute the world.
But there are a lot of difficulties when we use common components.

(3) Careful use:

Father components withoutscopedProperty that a child component hasscopedThe parent component cannot manipulate the child component.
The parent component hasscopedProperty, subcomponent Nonescoped. The parent component also cannot set the child component style. Because all the tags of the parent component will carrydata-v-5db9451aUnique flag, but the child component does not carry this unique flag attribute.
Both parent and child components are available, and similarly, styles cannot be set, which increases the amount of code to change.

24. Vue commonly used performance optimization methods

The rational use ofv-show 和 v-if
The rational use ofcomputed
v-forWhen to addkeyAnd avoid andv-ifAt the same time use
Custom events,DOMTimely event destruction
Use asynchronous components wisely
The rational use ofkeep-alive
dataNot too deep, as flat as possible
usevue-loaderDo template compilation (precompilation) in the development environment
The rational use ofkeep-alive
webpackLevel optimization
useSSR

📟 3. Vue2. X principle knowledge preparation

Before understanding common interview questions, it is necessary to have a systematic understanding of the principles of vue2. X. See 👇 below for details

About the above content, has been sorted into a blog post, stamp below the link to enter the study 👇

译文1: Hand on hand to teach you to analyze the vUE response type principle, monitoring data is no longer confused

Link 1: juejin.cn/post/697827…

译文2: How much do you know about virtual DOM? Read the Diff algorithm in depth

Link 2: juejin.cn/post/697862…

What is going on behind the compiling of templates? Template is short on paper and long on paper

Link 3: juejin.cn/post/697896…

📠 four, vUE principle knowledge often meet questions

Based on the above knowledge, we will subdivide it into frequent interview questions. See 👇 below for details

These questions will be answered one by one.

1. Understanding of MVVM

The MVVM stands for model-view-viewModel.

A View is a View, which is the DOM.

A Model is a Model, which can be understood as data in a Vue component.

So between these two, we’re going to do it through the ViewModel. The ViewModel can do a lot of things, such as listening events, listening instructions and so on. When the data in the Model layer is modified, the ViewModel can be used to render the data to the View View layer. Conversely, when the View layer fires DOM events, the ViewModel can be used to enable the Model layer to modify the data.

This is the data-driven View in Vue, which modifies the data in the Model layer to drive it into the View.

2. What is the core API for monitoring data changes

The so-calledvueIs a componentdataChanges to the data in the view immediately trigger an update. The first step in implementing data-driven views requires understanding one of the cores of implementing responsivenessAPI, i.e.,Object.defineProperty 。
throughObject.defineProperty, we can realize the dataget 和 setOperation, i.e.,To get the dataandModify the dataOperation, so as to achieve responsive monitoring of data.

How does vUE listen for array changes

To give the Object.defineProperty() API the ability to listen on arrays, we can do this. The specific code is as follows:

// Trigger to update the view
function updateView() {
    console.log('View Update')}// Redefine the array prototype
const oldArrayProperty = Array.prototype
// Create a new object, the prototype points to oldArrayProperty, and extending the new method does not affect the prototype
const arrProto = Object.create(oldArrayProperty);
['push'.'pop'.'shift'.'unshift'.'splice'].forEach(methodName= > {
    arrProto[methodName] = function () {
        updateView() // Triggers a view update
        oldArrayProperty[methodName].call(this. arguments)// Array.prototype.push.call(this, ... arguments)}})// Redefine attributes to listen
function defineReactive(target, key, value) {
    // Deep monitor
    observer(value)

    / / core API
    Object.defineProperty(target, key, {
        get() {
            return value
        },
        set(newValue) {
            if(newValue ! == value) {// Deep monitor
                observer(newValue)

                // Set the new value
                // Note that value is always in the closure, and after this is set, the latest value will be retrieved when we get it
                value = newValue

                // Trigger to update the view
                updateView()
            }
        }
    })
}

// Listen for object properties
function observer(target) {
    if (typeoftarget ! = ='object' || target === null) {
        // Not objects or arrays
        return target
    }

    // Contaminate the global Array prototype (if defined directly inside it, it will contaminate the global)
    // Array.prototype.push = function () {
    // updateView()
    / /...
    // }

    if (Array.isArray(target)) {
        target.__proto__ = arrProto
    }

    // Redefine attributes (for in can also iterate over arrays)
    for (let key in target) {
        defineReactive(target, key, target[key])
    }
}

// Prepare data
const data = {
    name: 'monday'.age: 20.info: {
        address: 'shenzhen' // Deep listening is required
    },
    nums: ['Play basketball'.'Come out and play'.'Play table tennis']}// Listen for data
observer(data)

/ / test
data.info.address = 'Shanghai' // Deep monitor
data.nums.push('神游') // Listen for arraysCopy the codeCopy the code

The browser displays the following output:

We can see that the corresponding views for both data are updated. By redefining the array stereotype, we let Object.defineProperty() implement the ability to listen on an array.

4. Please describe the principle of responsiveness

Overview of responsive principle:

Any oneVueComponents generate onerenderFunction.
afterrenderThe function will generate onevnode 。
At the same time, in executionrenderFunctiondataThe inside of thegetterWhen triggered, a dependency is generated.
The so-called dependence, is indataWhich variable is triggered, which variable will be observed.
After that, you need to check to see if the triggered variable is the one that was previously observed as a dependency, and if so, firesetterModify data; If not, listen directly.
Finally, if it is determined that it was previously re-observed as a dependency, execute itre-renderRe-render operation, and proceedpatch(vnode, newVnode) 。

5. Describe a DOM structure using vNode

Use V-Node to simulate the DOM structure of the HTML code shown below.

HTML code:

<div id="div1" class="container">
    <p>
        vdom
    </p>
    <ul style="font-size:20px;">
        <li>a</li>
    </ul>
</div>Copy the codeCopy the code

Use JS to simulate the DOM structure of the above code:

{
	tag: 'div'.props: {className: 'container'.id: 'div1'
    },
    children: [{tag: 'p'.chindren: 'vdom'
        },
        {
            tag: 'ul'.props: {style: 'font-size: 20px' },
            children: [{tag: 'li'.children: 'a'
                }
                / /...]]}}Copy the code

6. Time complexity of DIFF algorithm

The time complexity of the tree is zeroO(n³)Therefore, we tried to optimize its time complexityFrom O (n³) to O (n)To achieve the operationvdomNode, so this optimization process is actually what we’re talking aboutdiffAlgorithm.
So,diffThe time complexity of the algorithm isO(n) 。

7. Brief the process of DIFF algorithm

First of all, compare the node itself to determine whether it is the same node. If not, delete the node to create a new node for replacement.
If the node is the same, run thepatchVnode, to determine how to process the child node of this node, first judge the situation that one party has child node and one party does not have child node (if the newchildrenIf there is no child node, remove the old child node);
The comparison is performed if both have child nodesupdateChildrenTo determine how to operate on the children of these old and new nodes (diffThe core).
When matching, the same child nodes are found and compared recursively.

Note: In diff, only children of the same level are compared, and cross-level node comparisons are abandoned, which makes the time complex to reduce the value O(n) from O(n^3), that is, the core diff algorithm is only needed for same-level comparisons when both old and new children have multiple children.

What is the principle of vUE template compilation

vueAfter the template is compiled, it is converted to onerenderFunction, and then continue executionrenderFunction that returns one after executionvnode ；
After gettingvnodeAnd then, based onvnodeOn the basis of the executionpatch 和 diff 。

9. Why does vue render asynchronously and what is the use of $nextTick?

vueComponent-level updates that update the current component if the data in the component changes.
But imagine if every time the data changes, the component has to be re-rendered, which is not very performance friendly.
Therefore, to prevent components from being updated as soon as the data is updated, asynchronous rendering is required for processing.
The core method of asynchronous rendering isnextTick ， $nextTickCan be found inDOMAfter the update,Trigger the callback.

10. What is SPA single page application?

SPA stands for Single Page Application. A single page Web application is an application with only one Web page. A single-page application (SPA) is a Web application that loads a single HTML page and dynamically updates that page as the user interacts with the application. The browser starts by loading the required HTML, CSS, and JavaScript, and everything is done on this page, all controlled by JavaScript.

Nowadays, in order to meet the rapid development of single-page Web applications, various front-end component technology stacks emerge in an endless stream. In recent years, vUE and React have emerged as the two most popular technology stacks through iteration.

11. What is the difference between hash and history?

(1) the hash

Hash changes trigger web redirects, or browser advances and retreats.
hashYou can changeurl, but does not trigger a page reload (hash changes are logged inwindow.historyIn), the page is not refreshed. That is, all page jumps are done on the client side. So this is not a one-offhttpRequest, so this pattern is not goodSEOOptimization.hashCan only be modified#After the section, so can only jump to with the currenturlWith the documenturl 。
hashthroughwindow.onhashchangeTo listen inhashTo achieve no refresh jump function.
hashWill never be submitted toserverEnd (can be understood as only in the front end to live and die).

(2) the history

The newurlCan be with the currenturlHomologous arbitraryurl, can also be with the presenturlIt’s the same address, but one of the problems that this would cause is that it would putRepeat this operationWrite to the stack.
throughhistory.stateTo add any type of data to a record.
You can set it extratitleProperty for later use.
throughpushState 、 replaceStateTo achieve no refresh jump function.
usehistoryMode: When the current page is refreshed, the browser re-initiates the request. ifnginxNo match gets the currenturl, will appear404The page.
And forhashIn terms of patterns, it looks like it’s changedurl, but will not be included inhttpIn the request. So, it’s kind of usedInstructs browser actions, does not affect the server side. Therefore, changehashIt doesn’t really changeurl, so the page path is the same as before,nginxThey won’t intercept.
Therefore, in usehistoryMode when requiredAllows the address to be accessible through the server, if not set, it is easy to cause404In the situation.

12. Hash and history

to BSystem recommendedhash, relatively simple and easy to use, and becausehash 对 urlSpecification insensitive;
to CThe system can be considered for selectionH5 history, but need to beServer support;
If you can use simple ones first, don’t use complex ones. Consider costs and benefits.

🖨️ v. Vue3. X Knowledge preparation

For the VUe3 module, I will combine the basic knowledge and principles together. See 👇 below for details

About the above content, has been sorted into a blog post, stamp below the link to enter the study 👇

Learn about the basic new features of VUE3

Link 1: juejin.cn/post/697640…

Knock on the blackboard! Vue3 key! New features of Composition API: Ref, toRef, toRefs

Link 2: juejin.cn/post/697667…

Get a wave of vue3. X advanced new features

Link 3: juejin.cn/post/697604…

Is the responsive principle of VUE2 “obsolete”? Continue with the vuE3 responsive principle Proxy

Link 4: juejin.cn/post/697936…

⌨️ vi, vue3. X Often meet questions

Based on the above knowledge, we will subdivide it into frequent interview questions. See 👇 below for details

Let’s answer these questions one by one.

1. What are the advantages of VUE3 and VUE2?

vue3 比 vue2Speaking,Better performance.The code is smallerAnd there areBetter TS support.
And, more strikingly,vue3 有Better code organization, there areBetter logic extraction abilityAnd there isMore and more new features.
Among them, the most prominent is the familiarComposition API 和 Options API 。

2. Describe the vuE3 life cycle

The life cycles of Vue2 and Vue3 are compared below.

Vue2 Lifecycle (Options API)	Vue3 Lifecycle (Composition API)	meaning
beforeCreate	setup	After instance initialization, data Observer and Event/Watcher events are called before configuration
created	setup	The page has not yet been rendered, but the instance of vue has been initialized.
beforeMount	onBeforeMount	Called before the mount begins: The associated render function is called for the first time.
mounted	onMounted	The page has been rendered.
beforeUpdate	onBeforeUpdate	Called when data is updated, before the virtual DOM is re-rendered and patched. You can further change the state in this hook without triggering additional rerendering.
updated	onUpdated	This hook is called after the virtual DOM is re-rendered and patched due to data changes. When this hook is called, the component DOM has been updated, so you can now perform DOM-dependent operations.
beforeDestory	onBeforeUnmount	Called before instance destruction. At this step, the instance is still fully available.
destroy	onUnmounted	Called after the Vue instance is destroyed.

3. What do you think of Composition API and Options API

There are several suggestions for using the Composition API and Options API:

The two are not recommended to share, otherwise it will easily cause confusion;
This is recommended for small projects or projects with simple business logicOptions API ；
It is recommended for medium – and large-sized projects or projects with complex logicComposition API, compared withOptions APISpeaking,Composition APIIt is better for large projects. Logic is removed, code is reused, and large projects are better maintained.

4. How to understand ref, toRef and toRefs

(1) What is ref

refIt can be generatedValue typesReactive data (that is, basic data types);
refCan be used toThe templateandreactive;
refthrough.valueTo modify the value (be sure to add.value);
refNot only can be used forresponsiveCan also be used for templatesDOMElements.

(2) What is toRef

ToRef responds to Object, which is a prop property of a reactive Object (Reactive encapsulation).
ToRef and Object keep reference relationship, that is, when one changes, the other changes as well.
If toRef is used for ordinary objects (non-reactive objects), the output does not have a reactive formula. The following code looks like this:

// Common objects
const state = {
	age: 20.name: 'monday'
}
// A responsive object
const state = reactive({
    age: 20.name: 'monday'
})
Copy the code

(3) What is toRefs

withtoRefThe difference is,toRefsIs for all properties of the entire object. The goal is to transform a responsive object (reactiveEncapsulate) to a normal object.
Every property in a normal objectpropThey all correspond to oneref 。
toRefsAnd the objectObjectbothKeep references, that is, after one changes, the other also changes.

5. What are the important features of VUE3 upgraded?

createApp
emits(Communication between parent and child components)
Multi-event processing
Fragment
remove.sync
Asynchronous components
Remove the filter
Teleport
Suspense

6. How does Composition API achieve logical reuse of code?

composition APIEncapsulate by pulling the logic out of the code and referencing the encapsulated content directly toThe life cycleInside, the logic reuse effect of code has been achieved.

7. How does Vue3 achieve responsiveness?

usingreactiveRegister responsive objects, yesFunction return valuePerform operations.
usingProxydata-hijackingget , set , deleteProperty , has , own 。
usingWeakMap , Map , SetTo implement dependency collection.
Disadvantages:Use a large number ofES6New feature, poor compatibility of older browsers.

8. What is the difference between Watch and watchEffect?

You can listen in on bothdataAttribute change;
watchNeed to beSpecify which properties to listen for;
whilewatchEffectBased on its properties,Automatic monitoringThe change.

How do I get component instances from SETUP?

In VUe2, the Options API could use this to get an instance of a component, but this is now deprecated in vue3. This is not available in setup and other Composition apis, but it provides a getCurrentInstance to get the current instance.

10. Why is VUE3 faster than VUe2?

The Proxy response type
PatchFlag
hoistStatic
cacheHandler
SSR optimization
tree-shaking

11. What is vite?

viteIt’s a front endPackaging tools, it isvueA project initiated by the author;
viteWith the help ofvueThe influence, rapid development, andwebpackThere is a certain competitive relationship;
Advantage:viteMake the programNo packaging is required in a development environmentAnd start very fast.

Contrast Composition API with React hooks

The formersetupIs called only once, whereas the latter function is called multiple times.
The former withoutuseMemo anduseCallback(that is, cache data and cache functions), becausesetupOnly called once.
The former need not worry about the order of call, while the latter need to be guaranteedhooksIn the same order.
The formerreactive+refThan the latteruseStateBe difficult to understand.

📸 7. Conclusion

From the basic knowledge of VUe2. X, to the principle knowledge of VUe2. X, and finally to the learning of the new features and principle knowledge of VUE3.

Finally, this part of the content has been sorted into PDF, the way to obtain the eggs in the egg, you need to help partners o!

🐣 Egg One More Thing

🏷️ previous recommendation

Learning the principle of vue2. X and vue3. X

Vue.js basics 👉 Basics portal
Vue.js principle knowledge 👉 principle knowledge column portal

Interview column PDF version:

Follow the public account on wechatMonday labClick the navigation bar belowBrief Interview ColumnView the keyword ~

Update address:

Offer comes to the interview column

🏷 ️ set pieces

If this article is useful to you, be sure to leave a footprint
That’s all for this article! See you next time! 👋 👋 👋

“Offer is coming” from basic to advanced principle, from VUe2 to VUe3, 48 knowledge points will help you consolidate vuejS knowledge system

Preface 🖼 ️

🎙️ 1. Vue2. X Basic knowledge preparation

📻 two, vue2. X basic knowledge often meet questions

1, what is the use of each SRC folder and file in vue.cli project?

2. How to use custom components in vue.cli? What problems have you encountered?

3. The difference between V-show and V-if

4. Why is key used in V-for

5. Describe the Vue component lifecycle

(1) Life cycle of single component

(2) Parent-child component life cycle relationship

6. How Vue components communicate (common)

Describe the process of component rendering and updating

8. How does VUE handle refreshing data without losing it

9. Realization principle of two-way data binding V-Model

10. What are the characteristics of computed tomography

Why does the component data have to be a function

12. Which lifecycle should ajax requests be placed in

How do I pass all props of a component to a child component?

14. How to implement v-Model by yourself

15, multiple components have the same logic, how to pull out?

16. When to use asynchronous components

17, When to use keep-alive

18. When to use beforeDestory

19. What is a scope slot

20. What is the difference between Action and mutation in VUEX

21. Vue-router Indicates the common routing mode

22. How to configure vue-router asynchronous loading

23. How is scope implemented

24. Vue commonly used performance optimization methods

📟 3. Vue2. X principle knowledge preparation

📠 four, vUE principle knowledge often meet questions

1. Understanding of MVVM

2. What is the core API for monitoring data changes

How does vUE listen for array changes

4. Please describe the principle of responsiveness

5. Describe a DOM structure using vNode

6. Time complexity of DIFF algorithm

7. Brief the process of DIFF algorithm

What is the principle of vUE template compilation

9. Why does vue render asynchronously and what is the use of $nextTick?

10. What is SPA single page application?

11. What is the difference between hash and history?

(1) the hash

(2) the history

12. Hash and history

🖨️ v. Vue3. X Knowledge preparation

⌨️ vi, vue3. X Often meet questions

1. What are the advantages of VUE3 and VUE2?

2. Describe the vuE3 life cycle

3. What do you think of Composition API and Options API

4. How to understand ref, toRef and toRefs

(1) What is ref

(2) What is toRef

(3) What is toRefs

5. What are the important features of VUE3 upgraded?

6. How does Composition API achieve logical reuse of code?

7. How does Vue3 achieve responsiveness?

8. What is the difference between Watch and watchEffect?

How do I get component instances from SETUP?

10. Why is VUE3 faster than VUe2?

11. What is vite?

Contrast Composition API with React hooks

📸 7. Conclusion

🐣 Egg One More Thing

🏷️ previous recommendation

🏷 ️ set pieces

Related Posts

Learn to develop a vscode extension in 15 minutes

Method of uniAPP parent traditional child component

Belatedly webpack4.0+ actual combat