vue overview

Advantages of Vvue:

Lightweight framework: only focus on the view layer, it is a collection of views to build data, the size is only instant Kb
Easy to learn: Chinese development, Chinese documents, no language barriers, easy to understand and learn
Two-way data binding: retains the characteristics of angular, and is simpler in data manipulation
Componentization: retains the advantages of react, realizes the encapsulation and reuse of html, and has unique advantages in building single-page applications
View: Data and structure are separated, making data changes easier, no logic code changes are required, and related operations can be completed only by manipulating data
Virtual DOM: dom is very performance-consuming, no longer using native dom operation nodes, which greatly liberates dom operations, but the specific operation is still dom, but it is another way
Faster running speed: Compared with react, it also operates virtual dom. In terms of performance, vue has great advantages

Talk about your understanding of SPA single page, what are its advantages and disadvantages

SPA only loads the corresponding HTML, JS and CSS when the web page is initialized
Once the page is loaded, the SPA will not reload or jump the page due to user actions
The change of the page is to use the routing mechanism to realize the transformation of the HTML content, avoiding the reloading of the page

advantage:

The user experience is good, the content change does not need to reload the entire page, avoiding unnecessary jumps and repeated rendering
Reduce unnecessary jumps and repeated rendering, which relatively reduces the pressure on the server
Separation of front-end and back-end responsibilities, clear structure, front-end interaction logic, back-end responsible for data processing

shortcoming:

Takes a long time to load for the first time
The forward and backward functions of the browser cannot be used. Since the single-page application displays all the content in one page, it is impossible to forward and backward
Not conducive to search engine retrieval: Since all content is dynamically replaced and displayed on one page, it has its natural weakness in SEO

How to solve the slow loading speed of the first screen of SPA

First screen time: refers to the time from when the browser responds to the URL input by the user to when the content on the first screen is rendered. At this time, the entire page does not necessarily have to be rendered completely, but it needs to display the content required by the current window.

Reasons for the slow loading of the first screen:

Network delay problem
Whether the resource file size is too large
Whether the resource has repeatedly sent requests to load
When loading the script, the rendering content is blocked

Several Common SPA First Screen Optimization Methods

Reduce entry file size
Static resource local cache
UI framework loaded on demand
Compression of image resources
Components are repackaged
Enable Gzip packaging
use SSR

There is a blog written about SPA that is very detailed. If you are interested, you can take a look at it: Explain what SPA
Vue does during initialization (new Vue(options))

Processing configuration items: When initializing the root component, the option merge operation was performed, and the global configuration was merged into the local configuration of the root component; when each sub-component was initialized, some performance optimization was performed, and some deep-level attributes on the component configuration object were placed in the vm.$options option to improve code execution efficiency
Initialize the relationship properties of the component instance, such as parent, children, root, refs, etc.
Handle custom events
Call the before Create hook function
Initialize the inject configuration item of the component, get the configuration object in the form of ref[key]=val, then perform responsive processing on the configuration object, and proxy each key to the vm example
Data responsive, processing props, methods, data, computed, watch and other options
Parse the provide object on the component configuration item and mount it to the vm_provided attribute
Call the created hook function
If it is found that there is an el option in the configuration, the $mount method will be called automatically. That is to say, with the el. option, there is no need to manually call the $mount method. Anyway, if the el option is not provided, $mount must be called
Next enter the mount phase

Understanding of MVVM

MVVM consists of three parts: Model, View, and ViewModel: the Model layer represents the data model, and the business logic of data modification and operation can also be defined in the Model; the View represents the UI component, which is responsible for converting the data model into a UI display; the View Model is a Synchronize View and Model objects

Under the MVVM architecture, there is no direct connection between View and Model, but through ViewModel. The interaction between Model and ViewModel is bidirectional, so changes in View data will be synchronized to Model, while changes in Model data It will also be immediately reflected on the View.

ViewModel connects the View and Model layers through two-way data binding, and the synchronization between the View and the model is completely automatic without any intervention. Therefore, developers only need to pay attention to the business logic and do not need to manually operate the DOM. Synchronization of data state, complex data state maintenance is completely managed by MVVM

Vue data two-way binding principle

To realize MVVM data two-way binding, it adopts the method of data hijacking combined with publisher-subscriber mode. Object.defineProperty() is used to add setters and getters to each property and hijack the monitoring. When the data changes, it publishes a message to the subscriber and triggers The corresponding listener callback.

A few things must be done:

Implement a data listener Observer, which can monitor all the properties of the data object. If there is any change, you can get the latest value and notify the subscribers
Implement a command parser Compile, scan and parse the command of each element node, replace the data according to the command template, and bind the corresponding update function
Implement a watcher as a bridge connecting Observer and Compile, able to subscribe and receive notifications of each attribute change, execute the corresponding callback function of the instruction, and update the view

Vue's responsive principle

What is responsive, that is, when the data changes, the view will be re-rendered, and the matching will be updated to the latest value

Object.defineProperty sets the get. and set. methods for each property in the object. Each declared property will have a dedicated dependency collector subs. When a page uses a certain property, it will trigger Object.defineProperty- get function, the watcher of the page will be placed in the dependency collector subs of the property, and when the data changes, the notification update: when the data changes, the Object.defineProperty-set function will be triggered, and the data will traverse its own dependency collector subs, notify the watcher one by one, and the view starts to update;

Vue 3.x responsive data principle:

Vue3.x uses Proxy instead of object.defineProperty. Because proxy can directly monitor the changes of objects and arrays, and has as many as 13 interception methods, and as a new standard, it will be continuously optimized by browser manufacturers; proxy will only proxy The first layer of the object, how does vue3 handle it

Determine whether the current Reflect.get return value is an Object, and if so, then use the reactive method as a proxy, thus realizing in-depth observation. When monitoring the array, get/set may be triggered multiple times, so how to prevent multiple triggers? We can judge whether the key is the attribute of the current proxy object target itself, or whether the old value is equal to the new value. Only when one of the above two conditions is met can the trigger be executed

Why does Vue 3.0 use proxy API instead of defineProperty API

The biggest reason for the limitation of definePropety API is that it can only monitor singleton properties. The responsive implementation in Vue2.x is formally based on the descriptor in objectProperty. It traverses and recurses the properties in data, and sets a value for each property. getter/setter. This is why vue can only respond to attributes defined in data
The monitoring of the Proxy API is aimed at an object, so all operations on this object will enter the monitoring operation, which can fully proxy all attributes, which will bring great performance improvement and better code; Proxy can be understood as , set up a layer of "interception" before the target object, and the outside world's access to the object must first pass through this layer of interception, so a mechanism is provided to filter and rewrite the outside world's access
Reactive is lazy. In Vue2.x, for an object with deep property nesting, if you want to hijack its deep internal changes, you need to recursively traverse the object, execute Object.defineProperty, and make each layer of object data responsive. There is no doubt that there will be a lot of performance consumption. In Vue3.0, using the Proxy API cannot monitor 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 responses In simple terms, it can be said that it implements responsiveness on demand and reduces performance consumption.

Pros and Cons of Proxy and Object.defineProxy

Proxy can directly listen to objects instead of properties
Proxy can monitor changes in arrays
Proxy has 13 interception methods: not limited to apply, ownKeys, deleteProperty, has, etc., which Object.defineProperty does not have
Proxy returns a new object, we can only operate the new object to achieve the purpose, and Object.defineProperty can only traverse the object properties and modify directly
As a new standard, Proxy will be continuously optimized by browser manufacturers, which is the performance bonus of the legendary new standard.
Advantages of ObjectProperty: good compatibility, support for IE9, and Proxy has browser compatibility problems, and cannot be smoothed with polyfill, so the author of Vue declares that it needs to wait until the next major version (3.0) to use Proxy to recreate

Why is the data of a component in Vue a function, and in a new Vue instance, data can be an object directly

We know that each .vue file is a Vue component, and a Vue component is actually a Vue instance. Instances in Js are created through constructors, and each constructor can create many pomegranates, so each instance will continue the method or property on the prototype. Vue's data data is actually an attribute on the Vue prototype, and the data exists in memory. In order to ensure the independence of data on each instance, Vue stipulates that functions must be used instead of objects. Because of the use of objects, the data used on each instance (component) affects each other, which is of course not what we want. An object is a reference to a memory address. If an object is defined directly, this object will be used between components, which will cause data between components to affect each other. After using the function, the data() function is used, and this in the data() function points to the current instance itself, so it will not affect each other. The instance of new Vue will not be reused, so there is no problem of referencing objects.

Can the attribute of data in Vue have the same name as the method in methods? Why?

The data attribute in Vue can have the same name as the method in methods, but the method in methods will be overwritten by the data attribute, and an error message will appear in the debugger, but it will not affect the execution. The reason for this is: the internal execution order of the initState function defined by the source code is: props>methods>data>computed>watch

The difference between created and mounted in Vue

In the created phase, the instance has been initialized, but it has not been mounted on el, so we cannot get the corresponding node, but at this time we can get the data in data and methods in vue;

In the mounted stage, the template of vue is successfully mounted on el. At this time, a complete page can be displayed in the browser, so at this stage, the node can be called;

The difference between computed and methods in Vue

Computed and methods have the same point: if they are displayed as template data, both can realize the corresponding function, the only difference is that the method defined by methods needs to be executed

The difference between computed and methods:

Competed will be cached based on response data, while methods will not be cached
Before diff, check whether the data in data has changed. If there is no change, the computed method will not be executed, but the method in methods will be executed
computed is a property call, and methods is a function call

The role of key in virtual DOM

Simply put: the key is the unique identifier of the virtual DOM object, and the key plays an extremely important role in updating the display.
To put it more complicated: when the data in the state changes, react will generate a new virtual DOM based on the new data, and then React will perform a diff comparison between the new virtual DOM and the old virtual DOM.
The comparison rules are as follows: If the same key as the new virtual DOM is found in the old virtual DOM, if the content in the virtual DOM has not changed, the previous real DOM will be used directly; if the content in the virtual DOM has changed, a new real DOM will be produced. Then replace the previous real DOM in the page. If the same key as the new virtual DOM is not found in the old virtual DOM, a new real DOM is created based on the data, and then rendered to the page.

Using index as key may cause problems

If the data is destroyed by operations such as adding in reverse order/deleting in reverse order, unnecessary real DOM updates will be generated. Although there is no problem with the interface, if there are too many data, the efficiency will be too low;
If the structure also contains the DOM of the input class, it will generate an error DOM update, and the interface has problems
If there is no reverse order operation on the data, it is limited to rendering the table for display, and there is no problem using index as the key

Detailed explanation of watch usage in Vue

In Vue, watch is used to monitor data changes, which can be written as objects behind the monitored data, including handler methods, immediate and deep
immediate means whether to execute the handler when the watch is bound for the first time, the value is true means that when the watch is declared, the handler method is executed immediately, and the value is false, it is the same as the general use of the watch, only when the data changes Execute the handler.
When it is necessary to monitor the changes of an object, the ordinary watch method cannot monitor the changes of the internal properties of the object. Only the data in data can monitor the changes. At this time, the deep property is needed to monitor the object deeply, and the value is true

Understanding and use of mixins in Vue

Mixins are a very flexible way of distributing reusable functionality in Vue components. A mixed object can contain any component options. When a component uses a mixed object, all the options of the mixed object will be mixed into the options of the component itself. After mixins are introduced into the component, the internal content of the component such as data and other methods, methods and other attributes Merge with the corresponding content of the parent component. It is equivalent to that after the introduction, various attribute methods of the parent component have been expanded.

There is a very good blog, you can refer to it: mixins

Slots in Vue: The magical weapon in Vue, slot slot!

Why Vue uses asynchronous rendering

Vue is a component-level update. If the data in the current component changes, it will update the component. When the data changes, the component needs to be re-rendered once, and the performance is not high. In order to prevent the component from being updated as soon as the data is updated, an asynchronous rendering is made. (The core method is nextTick)
The principle of source code implementation: when the data changes, the notify method will be called, the watcher will be traversed, and the update method will be called to notify the watcher to update. At this time, the watcher will not execute immediately. In the update, the queueWatcher method will be called to put the watcher into a queue , the queueWatcher will deduplicate according to the watcher. Multiple attributes depend on a watcher. If there is no watcher in the queue, the watcher will be added to the queue, and then the flushSchedulerQueue method will be executed asynchronously through nextTick to refresh the watcher queue. The flushSchedulerQueue will start to trigger a before method, which is actually beforeUpdate, and then watcher.run() will start to actually execute the watcher. After the execution of the page, the rendering will be completed, and the updated hook will be called after the update is completed.

How Vue's asynchronous update mechanism is implemented

The core of Vue's asynchronous update mechanism is implemented by using the browser's asynchronous task queue. The microtask queue is preferred, followed by the macrotask queue.
When the responsive data is updated, the dep.notify method will be called to notify the watcher collected in dep to execute the update method, and watcher.upadte will put the watcher itself into a watcher queue (global queue array). Then put a method to refresh the watcher queue (flushSchedulerQueue) into a global callbacks array through the nextTick method. If there is no function called flushCallbacks in the asynchronous task queue of the browser at this time, execute the timeFunc function and put the flushCallbacks function into the asynchronous task queue. If there is already a flushCallbacks function in the asynchronous task queue, wait for it to be executed before adding the next flushCallbacks function. The flushCallbacks function is responsible for executing all flushSchedulerQueue functions in the callbacks array. The flushSchedulerQueue function is responsible for refreshing the watcher queue, that is, executing the run method of each watcher in the queue array to enter the update phase, such as executing the component update function or executing the callback function of the user watch.

Understanding of $nextTick

Usage of $nextTick: Execute a delayed callback after the next DOM update cycle ends. Use this method immediately after modifying the data to get the updated DOM.
The principle of implementation, why: Vue's implementation of responsiveness is not to change the DOM immediately after the data changes, but to update the DOM according to a certain strategy. Vue is executed asynchronously when updating the DOM. As long as it detects data changes, Vue will open a queue and buffer all data changes that occur in the same event loop. If the same watcher is triggered multiple times, it will only be pushed into the queue once. This deduplication during buffering is very important for unnecessary computation and DOM manipulation. However, in the next event loop 'tick', Vue flushes the queue and performs the actual (to deduplicate) work. So in order to wait for Vue to finish updating the DOM after the data changes, you can use Vue.nextTick(callback) immediately after the data changes, so that the callback function will be called after the DOM update is completed.
Usage scenario: After you update the data, you need to operate the rendered DOM in time.

Custom directives for Vue

Vue In addition to the default built-in instructions for core functions, Vue also allows registration of custom instructions
Custom instructions are used to operate: DOM, although Vue advocates the concept of data-driven views, not all situations are suitable for data-driven, custom instructions are an effective supplement and extension, not only can be used to define any DOM operation, and is reusable.
Two ways to add custom directives: global directives and local directives
Global directive: Register a global directive through the Vue.directive() function
Local instruction: Add a local instruction to the component through the directives property of the component.
There are several well-written blogs, if you are interested, you can take a look at the detailed explanation: custom instructions
Scenarios used: such as v-image: the default avatar for login

Why avoid using v-if and v-for together

In vue 2.x version, when v-if is used together with v-for, v-for has a higher priority than v-if
In vue 3.x version, when v-if is used together with v-for, v-if has a higher priority than v-for
The official clearly points out: Avoid using v-if and v-for together, and never use these two instructions on an element at the same time
Solution to this solution: you can first filter the data in the calculation data, and then perform traversal rendering; there is no problem with the operation and implementation, and the page will be displayed normally, but it will bring unnecessary performance consumption.

Similarities and differences between v-show and v-if

The same point: Both v-show and v-if can control the display and hiding of elements.
Differences: The implementation method is different. The essence of v-show is to control the hiding by setting the display setting in css to none; v-if is to dynamically add or delete DOM elements to the DOM tree; v-show will be compiled, and the initial value is false. Just set the display to none, but it also compiles; the initial value of v-if is false, it will not compile;
v-show is only compiled once, and the latter is actually to control css, while v-if is constantly destroyed and created. If you want to switch a node frequently, v-show has better performance
Scenarios used in actual development: button permission control v-if; selection box filter conditions control button display and hiding: v-show;

Why does Vue listen to events in HTML

You may have noticed that this way of event listening goes against the longstanding tradition of separation of concerns. But don't worry, because all Vue.js event handling methods and expressions are strictly bound to the ViewModel of the current view, it will not cause any maintenance difficulties.
Actually, using v-on or @ has several benefits:
You can easily locate the corresponding method in the JavaScript code by glancing at the HTML template, because you don't need to manually bind events in JavaScript, your ViewMode code can be very pure logic, completely decoupled from the DOM, and easier to test. When a ViewModel is destroyed, all event handlers are automatically removed, you don't have to worry about cleaning them up

Vue.set changes properties in arrays and objects

In a component instance, only the data initialized in data is responsive. Vue cannot monitor the addition or deletion of object properties. Properties not declared in data are not responsive, so data changes but not in page rendering;
Solution: Use the Vue.set(object,key,value) method to add response properties to nested objects.
Vue.set(object,key,value) alias vm.$set
What does vm.$set(obj,key,value) do: Because Vue cannot detect the new property of the object or add an element to the array through the index, so there is vm.set, which is an alias of Vue.set; vm.set is used to add a new property to a reactive object, make sure the new property is also responsive, and trigger a view update.
Add a responsive data to the object: call the defineReactive method to provide the reactive data for the object, and then execute dep.notify to notify the dependency and update the view.
Add a new responsive data to the array: through the splice method

Talk about the understanding of the Vue life cycle

Vue life cycle: In layman's terms, the process of Vue instance from creation to destruction, eight hook functions
beforecreate (before the initialization interface) created (after the initialization interface)
beforemount (before rendering interface) mounted (after rendering interface)
beforeupdate (before updating data) updated (after updating data)
beforedestory (before uninstalling components) destroyed (after uninstalling components)
It is worth mentioning that when you are asked this question, you can explain what the eight hook functions do.

Which hooks will be triggered on the first page load: beforeCreate, created, beforemount, mounted

What are the methods of Vue component communication

From father to son: props. Parent components pass data down to child components via props. There are three forms of subcomponent data: props, data, computed
Father to son/grandson: provide and inject. The parent component defines the provide method return that needs to be shared with the attributes of the descendant components, and the descendant components use the inject option to receive the specified attributes that we want to add to this instance;
From son to father: $emit. The child component sends a message to the parent component through the $emit() event, and the parent component receives data through the v-on binding event;
Father-son, brother, cross-level: eventBus. This method uses an empty Vue instance as the central event bus (event center), uses it to (emit) trigger events and (on) listen to events, and realizes the communication between any components ingeniously and clearly
Communication plugin: PubSub.js
Vuex: vuex is the state manager of vue, and the stored data is responsive. You only need to put the shared value in vuex, and other required components can be obtained and used directly;

The difference between router and route

As an instance of VueRouter, router is equivalent to a global router object, which contains many properties and sub-objects, such as history object. Frequently used jump links can use this.$router.push, which is the same as router-link jump.
route is equivalent to the routing object that is currently jumping, and you can get name, path, params, query, etc. from it

Vue-router has several hook functions

Global routing: There are two main types of global routing navigation hooks: pre-guard (beforeEach), post-hook (afterEach)
Routing-only hooks: navigation hooks exclusive to a single route, which are defined directly on the configuration route
Navigation hooks in components: There are three main types of navigation hooks in components: beforeRouteEnter, beforeRouteUpdate, and beforeRouteLeave. They are defined directly inside the routing component.
Detailed routing can be seen

Vue-router routing jump mode

Declarative (label jump)
Programmatic (js jump)

Vue-router routing parameters

ruoter-link Carry out page button routing jump parameter transfer: routing configuration parameter transfer in router; parent component home click to transfer parameter; child component homeDetails accept parameter transfer
There is a better blog you can refer to.
this.$router.push for programmatic routing jump transfer parameters: routing configuration parameters in router; parent component home click to pass parameters; child component homeDetails accepts parameters. Among them, the routing configuration parameters are passed through params, there are two ways: routing configuration; name routing configuration or query routing configuration;
There is a better blog you can refer to.

Understanding of keep-alive

First of all, <keep-alive> is a built-in component of Vue. It can keep the state in memory during component switching, preventing repeated rendering of the DOM.
Second, the reason it is implemented, when <keep-alive> wraps dynamic components, will cache inactive component instances instead of destroying them.

What is Vuex, what does it do, and how to use it

Vuex is a mechanism to realize component global state (data) management, which can facilitate the sharing of component data.
Vuex centrally manages shared data, which is easy to develop and maintain later
Vuex can realize data sharing between components and improve development efficiency
Vuex The data stored in Vuex is responsive and can keep pages and data in sync in real time
Important core attributes of Vuex include: state, mutations, action, getters, modules
state :vuex uses a single state tree, that is, each application will only contain one store instance, but a single state tree does not conflict with modularity. The state of the stored data cannot be modified directly, it needs to be passed through mutations.
mutations: The defined method dynamically modifies the state or data in the store of Vuex
action: It can be understood as changing the method of processing data in mutations into a method of asynchronously processing data, simply speaking, it is asynchronously operating data. The View layer distributes actions through store.dispath.
getters: Computed properties similar to vue, mainly used to filter some data
modules: When the project is particularly complicated, each module can have its own state, mutation, action, and getters to make the structure very clear and easy to manage; there is a better blog to read
Usage scenario: If the application is simple enough, it is best not to use vuex, a simple store mode is enough; when you need to build a medium-to-large single-page application, use vuex to better manage the state outside the component.

What is the difference between Vuex and pure global objects

Vuex's state store is reactive. When the vue component reads the state from the store, if the state in the store changes, the corresponding component will be efficiently updated accordingly. The state in the store cannot be changed directly. The only way to change the state in the store is to explicitly submit (commit) mutation, which allows us to easily track each state change, so that we can implement some tools to help us improve Get to know our app well.

Why can't asynchronous operations be done in mutations of Vuex

Because after the mutation is executed, it will correspond to a new state change, so devtools can save the big brother snapshot, and then time-travel can be realized. If the mutation supports asynchronous operations, there is no way to know when the state is updated, and it is impossible to track the state well, which makes debugging difficult.

What is axios, what are its features and common syntax

axios is a promise-based HTTP library that can be used in the browser and node.js.
The most popular ajax request library for the front end.
react/vue officially recommends using axios to send ajax requests
Features:
A promise-based asynchronous ajax request library that supports all promise APIs
Both browser and node can be used, and XMLHttpRequest is created in the browser
Support for request/response interceptors
Support Request Cancellation
Can convert request data and response data, and automatically convert the response content into JSON type data
Batch multiple requests
The security is higher, and the client supports defense against XSRF, which means that each of your requests has a cookie to get the key. According to the same-origin policy of the browser, fake websites cannot get the key in your cookie. In this way, The background can easily identify whether this request is a user's misleading input on a fake website, so as to adopt the correct strategy
Common syntax:
axios(config): the general/most essential way to send any type of request
axios(url[,config]): You can specify the url to send a get request
axios.request(url[,config]): equivalent to axios(config)
axios.get(url[,config]) send get request
axios.delete(url[,config]) send delete request
axios.post(url[,data,config]) send post request
axios.put(url[,data,config]) send put request
The default global configuration requested by axios.defaults.XXX
axios.interceptors.request.use() ; add a request interceptor
axios.interceptors.response.use(); Add response interceptor
axios.create([config]); creates a new axios (it does not have the functions below)
axios.Cancel(); Error object used to create a cancellation request
axios.CancelToken(); Token object used to create a cancellation request
axios.isCancel(); Is it an error to cancel the request
axios.all(promises) is used to execute multiple asynchronous requests in batches
axios.spread() : A method used to specify a callback function that receives all successful data

Do you know anything about SSR? What problems does it mainly solve?

Server-Side Rendering We call it SSR, which means server-side rendering; it refers to the page processing technology that completes the splicing of the HTML structure of the page by the server side, sends it to the browser, and then binds the status and events to it to become fully interactive page process.
Advantages: Easy for SEO, search engines give priority to crawling the HTML structure of the page. When using SSR, the server has already generated HTML related to the business, which is conducive to SEO; first-screen rendering, users do not need to wait for all js.loading of the page to complete See the page view (the pressure comes to the server, so it is necessary to weigh which ones are rendered by the server and which ones are handed over to the client)
Disadvantages: Complexity, the complexity of this or that project, the performance will be affected; the server load becomes larger, compared with the front-end and back-end separated servers that only need to provide static resources, the server load is greater, so use it with caution.

Vue. How to do permission management, how to control the permission at the button level

have a better blog
In the actual project: the company has a permission management system, access, configuration permissions, introduced in the code, button permissions are used together with v-if through custom instructions

Vue project front-end development environment requests server-side interface crossing problem

For vue-cli 2.x version, configure the server proxy in the config folder
For the vue-cli 3.x version, the front-end configuration server proxy is set in vue.config.js: for example, the corresponding attribute value of target is: the host + port you are going to send the request to the back-end server; the meaning is: equivalent to the The host + port that the front-end sends the request is automatically replaced with the mounted host and port, so that there will be no cross-domain problems between the front-end and front-end host ports;
ws: Indicates the webScoket protocol
changeOrigin: true; Indicates whether the original domain name will be changed, this must be true; this way there will be no cross-domain problems.

What VUE performance optimizations have been done:

Coding stage: minimize the data in data, the data in data will add getters and setters, and the corresponding watchers will be collected; v-if and v-for are not used together; anti-shake, throttling; use lazy loading of routes, asynchronous components; The third module is imported on demand; pictures are lazy loaded; long lists are scrolled to the visible area and loaded dynamically; the key is guaranteed to be unique; SPA pages use keep-alive cache components; if you need to use v-for to bind events to each element, use it event proxy
SEO optimization: server-side rendering SSR; pre-rendering;
Packaging optimization: compressed code; Tree Shaking/ScopeHoisting; use cdn to load the third template; multi-threaded packaging happypack; splitChunks to extract public files; sourceMap optimization
Have you ever learned about vue 3.x? Can you tell me the difference between vue 2.x and vue 2.x?

have a nice blog

What is the difference between the composition API used by Vue 3.0 and the options API used by Vue 2.x

options API: Contains an object options describing component options (data, methods, props, etc.); API develops complex components, and the code of the same functional logic is split into different options; using mixin to reuse common code also has problems: such as naming conflicts , the source of the data is not clear
Compositon API: A new set of APIs added by Vue 3. It is a function-based API that can organize the logic of components more flexibly; it solves the problem that the options API is not easy to split and reuse in large-scale projects.

Problems encountered in elment-ui:

el-cascader multi-select style is not normal in IE

cascade selector height issue
Lines appear in fixed columns of Table

Guess you like