The best VUE summary ever - interview development depends on it

Vue framework article

The advantages of vue

Lightweight framework: Focused only on the view layer, is a collection of views that build data, only tens of KB in size;

Easy to learn: Chinese developed, Chinese documents, there is no language barrier, easy to understand and learn;

Two-way data binding: Preserves Angular features and makes data manipulation easier;

Componentization: React retains the advantages of encapsulation and reuse of HTML, and has unique advantages in building single-page applications.

Separation of view, data and structure: it makes it easier to change the data, without the need to modify the logical code, and only need to operate the data to complete the relevant operations;

Virtual DOM: DOM manipulation is very performance consuming. The native DOM manipulation node is no longer used, which greatly liberates DOM manipulation. However, the specific DOM operation is just changed in another way.

Faster operation: Compared with React, vUE also operates virtual DOM. In terms of performance, vue has a big advantage.

Can you elaborate on your understanding of the VUE lifecycle?

There are 8 stages: before/after creation, before/after load, before/after update, and before/after destruction.

Before/After creation: In the beforeCreate phase, the mount element EL and data object data of the VUE instance are both undefined and not initialized. In the Created phase, the vue instance’s data object data is available, el is undefined, and has not been initialized.

Before/After loading: In the beforeMount phase, the vue instance’s $EL and data are initialized, but the previously virtual DOM node is still mounted, and data.message has not been replaced. In mounted phase, vue instance is mounted and data.message is successfully rendered.

Before/After update: When data changes, the beforeUpdate and updated methods are triggered

Before/after destroy: Changes to data do not trigger periodic functions after destroy, indicating that the vue instance has been unbound from event listening and the DOM structure still exists

Why does data have to be a function in a VUE component?

The object is a reference type. When reusing components, data objects point to the same data object. When modifying data in one component, data in other reusable components will be modified at the same time. A function that returns an Object does not have this problem because it returns a new Object (an instance of Object) at a different reference address.

What is the difference between V-if and V-show in VUE?

V-if and v-show may look similar in that the label element is not visible when the condition is not set, but there is a difference between the two options:

1. V-if creates and destroys labels properly during condition switching, whereas V-show loads labels only once during initialization. Therefore, V-if is relatively more expensive than V-show.

2. V-if is lazy and will render the tag only if the condition is true; If the initial condition is not true, v-if will not render the tag. V-show renders tags regardless of whether the initial conditions are true or not, and it just does a simple CSS switch.

The difference between computed and Watch

Computed properties computed:

Support caching, only the dependent data changes, will be recalculated
Asynchronism is not supported. It does not work when there is asynchronous operation in computed, and data changes cannot be monitored
Computed attribute values are cached by default, and computed attributes are cached based on their reactive dependencies, that is, values computed from the data declared in data or passed by the parent component
If a property is computed by something else, that property depends on something else, it’s a many-to-one or one-to-one, usually computed
If the computed attribute value is a function, the default is to use the GET method; The return value of the function is the property value of the property; In computed, attributes have a GET and a set method, which are called when data changes.

Listening property Watch:

Does not support cache, data change, will directly trigger the corresponding operation;
Watch supports asynchrony;
The listening function takes two arguments, the first of which is the latest value; The second argument is the value before input;
When an attribute changes, you need to perform the corresponding operation. A couple more;
The listening data must be the data declared in data or the props passed by the parent component. When the data changes, other operations are triggered. The function takes two arguments:

Immediate: The callback function is executed immediately after the component is loaded

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
// execute the handler method immediately after declaring firstName in wacth immediate: true  } } Copy the code

Deep: Deep means to look deep, the listener will go down layer by layer, adding the listener to all the properties of the object, but this will be very expensive performance, any modification of any property in obj will trigger the handler in this listener

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
 immediate: true. deep: true  } } Copy the code

Optimization: We can use string listening

watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
 immediate: true. // deep: true  } } Copy the code

So vue.js will parse layer by layer until it encounters property A, and then sets a listener for a.

What is vue-loader? What are the uses for it?

A loader for vue files that converts to JS modules with template/js/style.

What is $nextTick?

Vue implements responsiveness rather than immediately changing the DOM after data changes, but updating the DOM according to a certain strategy.

NextTick executes a deferred callback after the next DOM update cycle, and when you use nextTick after modifying the data, you can retrieve the updated DOM during the callback

The role of v-for key

When Vue is updating a rendered element list with V-for, it defaults to a “reuse in place” strategy. If the order of data items is changed, instead of moving DOM elements to match the change in data items, Vue simply reuses each element here and ensures that it displays every element that has been rendered under a specific index.

To give Vue a hint that it can track the identity of each node to reuse and reorder existing elements, you need to provide a unique key attribute for each item. The type of the key attribute can only be string or number.

The special attribute of key is mainly used in the virtual DOM algorithm of Vue to identify VNodes when comparing old and new nodes. If keys are not used, Vue uses an algorithm that minimizes dynamic elements and tries to repair/reuse the same type of elements as much as possible. With a key, it rearranges elements based on the change in the key and removes elements where the key does not exist.

What is the principle of two-way data binding for Vue?

Vue. js adopts data hijacking combined with publiser-subscriber mode. It hijacks the setter and getter of each attribute through Object.defineProperty() to publish messages to subscribers when data changes and trigger corresponding listening callback. It is mainly divided into the following steps:

1. Perform recursive traversal of the observe data object, including the property of the child property object, with setters and getters. If you assign a value to that object, the setter will be triggered and the data will be monitored

2. Compile parses the template instruction, replaces variables in the template with data, initializes render page view, binds the corresponding node of each instruction to update function, adds subscribers to listen to data, receives notification once the data changes, updates the view

3. Watcher subscribers serve as a bridge between The Observer and Compile. Update () = dep = deP = deP = deP = deP = deP = deP = deP = deP = deP = deP

4. MVVM, as the entry of data binding, integrates Observer, Compile and Watcher, uses Observer to monitor its model data changes, and uses Compile to parse and Compile template instructions. Finally, Watcher is used to build a communication bridge between Observer and Compile to achieve data change -> view update; View Interactive Changes (INPUT) -> Bidirectional binding effect of data model changes.

Components by value

The father the son

Pass through props

Parent component: <child value ='Data passed' />

Sub-component: props['value'], receive data and use it after receiving the data in the same way as defined in dataCopy the code

Child the parent

Bind a custom event to the child component in the parent component. The child component fires the event and passes the value via $emit().

Parent component: < child-@receive ='receive' />

Child component: this.$emit('receive'.'Data passed')
Copy the code

Sibling components pass values

Let bus = new Vue()

A: Methods :{function {bus.$emit(‘ custom event name ‘, data)

B: created () {bus.$on(‘ A sends custom event name ‘, function)

Through vuex

Prop validation, and default values

We can specify the default value and type of the props when the parent passes values to the child components. Vue will warn if the passes are of incorrect data types

props: {
    visible: {
        default: true.        type: Boolean,
        required: true
 }, }, Copy the code

Describe the process of encapsulating vUE components

First, components can improve the development efficiency of the entire project. Abstract the page into several relatively independent modules, solve our traditional project development: low efficiency, difficult to maintain, reuse and other problems.

Then, create a component using the vue.extend method and register the component using the Vue.component method. Subcomponents need data, which can be defined in props. After modifying the data, the child component wants to pass the data to the parent component. You can use the emit method.

Template compilation of vue.js

The render function returns VNode (Vue’s virtual DOM node).

First, compile the template into an AST syntax tree using the Compile compiler. Compile is the return value of createCompiler. CreateCompiler is used to create compilers. Compile is also responsible for merging options.

The AST then generates the render function by generating (converting the AST syntax tree into a render funtion string). The render returns VNode, which is a Vue virtual DOM node containing (tag name, child nodes, text, etc.)

What is SCSS? What are the installation steps in vue.cli? What are the major features?

To precompile the CSS, perform the following steps:

Sass-loader, CSS-loader, Node-sass

Step 2: Find webpack.base.config.js in the Build directory and add an extension to the extends property

Step 3: Configure a Module property in the same file

Step 4: Then add the lang attribute to the component’s style tag, for example: lang= “SCSS”

The main features are:

You can use variables, for example ($variable name = value)
You can use a mixer, for example ()
Can be nested

How does vUE listen for changes to an object or array property

When you set the value of an item in an array or a property of an object directly in a project, you will notice that the page is not updated. This is because object.defineProperty () is restricted and changes cannot be listened for.

Solution:

This.$set(array/object you want to change, location /key you want to change, value you want to change)

this.$set(this.arr, 0, "OBKoro1"); // Change the arraythis.$set(this.obj, "c"."OBKoro1"); // Change the objectCopy the code

Call the following array methods

Splice (), push(), pop(),shiftUnshift (), sort(), reverse()Copy the code

The vue source code caches the array prototype chain, and then overwrites these methods. These methods will trigger observer data, meaning that the view will update automatically without any additional operations. The splice method is recommended for customization because splice can delete/add operations anywhere in the array

A commonly used event modifier

. Stop: Stops bubbles
. Prevent: Prevents the default behavior
.self: Only the binding element itself fires
.once: 2.1.4 This parameter is added only once
Passive: 2.3.0 New: The default action of rolling events is triggered immediately and cannot be used with. Prevent
The sync modifier

Since 2.3.0, vue has reintroduced the.sync modifier, but this time it only exists as a compile-time syntactic sugar. It is extended to a V-ON listener that automatically updates the parent component’s properties. Example code is as follows:

<comp :foo.sync="bar"></comp>
Copy the code

Will be extended to:

<comp :foo="bar" @update:foo="val => bar = val"></comp>
Copy the code

When a child component needs to update the value of foo, it needs to explicitly fire an update event:

this.$emit('update:foo', newValue)
Copy the code

How does vue get the DOM

$refs.domName = this.$refs.domName = this.$refs.domname = this.$refs.domName = this.$refs.domName = this.$refs.domName

<div ref="test"></div>

const dom = this.$refs.test
Copy the code

Can V-ON listen for multiple methods?

Yes, here’s an example:

<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">
Copy the code

The difference between assets and static

Both are used to store static resource files used in the project.

The difference between the two:

The files inside assets are packaged during the NPM Run build, which means they are compressed, formatted, and so on. It will also be put into static after packaging.

Files in static are not packaged.

Suggestion: Place unprocessed files such as pictures in assets and pack them to reduce volume. Some imported resource files such as iconfont. CSS can be placed in static because they have already been processed.

Slot slot

Many times, after wrapping a child component, we want to add DOM elements to the parent component, but whether and where the DOM is displayed depends on the location of the slot component in the child component.

Vue initialization page flash problem

In vUE development, before vUE initialization, div is not owned by VUE, so we can write code that is not parsed and see words like {{message}}. Although this is usually a short time, it is necessary to solve this problem.

First: add the following code to your CSS

[v-cloak] {
    display: none;
}
Copy the code

If the problem is not completely resolved, add style=”display: none;” to the root element. :style=”{display: ‘block’}”

Vue plug-in article

State Management (VUEX)

What is vuex

Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way. Vuex is also integrated into Vue’s official debugging tool, DevTools Extension, which provides advanced debugging functions such as zero-configuration time-travel debugging, status snapshot import and export, and so on.

How do I use Vuex

Step 1 Installation

npm install vuex -S
Copy the code

Step 2 Create a Store

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// Debug is not in production environmenttrue
const debug = process.env.NODE_ENV ! = ='production';
// Create a Vuex instance objectconst store = new Vuex.Store({ Strict :debug,// Enable strict mode even in non-production environments state:{  },  getters:{  },  mutations:{  },  actions:{  } }) export default store; Copy the code

Step 3 Inject vuex

import Vue from 'vue';
import App from './App.vue';
import store from './store';
const vm = new Vue({
    store:store,
 render: h => h(App) }).$mount('#app') Copy the code

There are several core attributes in VUex. What are they?

There are five core attributes, which are:

State A unique data source. Data in a Vue instance follows the same rules
Getters can be thought of as computed properties of the store. Just like computed properties, the return value of the getter is cached based on its dependency and recalculated only if its dependency value changes. Getters are exposed as store.getters objects, and you can access these values as properties.

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '... '.done: true },
      { id: 2, text: '... '.done: false }
 ]  },  getters: {  doneTodos: state => {  return state.todos.filter(todo => todo.done)  }  } })  store.getters.doneTodos // -> [{ id: 1, text: '... '.done: true }] Copy the code

The only way for mutation to change the state in Vuex’s store is to commit mutation, much like an event, triggered by the store.mit method

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
 increment (state) { // Change the state state.count++  }  } })  store.commit('increment') Copy the code

Action Actions are similar to mutation, except that the action commits mutation rather than directly changing the state, and can contain any asynchronous operation

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
 increment (state) {  state.count++  }  },  actions: {  increment (context) {  context.commit('increment')  }  } }) Copy the code

Module Because it uses a single state tree, all the application states are grouped into one large object. When the application becomes very complex, the Store object can become quite bloated. To solve these problems, Vuex allows us to split the Store into modules.

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}  const moduleB = {  state: () => ({ ... }),  mutations: { ... },  actions: { ... } }  const store = new Vuex.Store({  modules: {  a: moduleA,  b: moduleB  } })  Store.state. a // -> moduleA statusStore.state. b // -> moduleB statusCopy the code

Should the Ajax request code be written in the component’s methods or vuex’s Actions

If the requested data is not intended to be shared by other components, it does not need to be put into the VUEX state if it is only used within the requested component.

This is most likely needed if it is reused elsewhere. If it is, put the request into an action for reuse.

Can the data obtained from VUEX be changed directly?

The data obtained from vuEX cannot be changed directly. You need to change the data after a shallow copy of the object; otherwise, an error will be reported.

The data in the VUEX disappears after the page is refreshed

Use sessionStorage or localStorage to store data

Storage: sessionStorage. SetItem ('name'Json.stringify (value))Use: sessionStorage. The getItem ('name'Parse () -- The resulting value is a string, quoted with json.parse ();Copy the code

You can also introduce the vuex-persist plug-in as follows:

The installation

npm install --save vuex-persist
or
yarn add vuex-persist
Copy the code

The introduction of

import VuexPersistence from 'vuex-persist'
Copy the code

Start by creating and configuring an object

const vuexLocal = new VuexPersistence({
    storage: window.localStorage
})
Copy the code

Introduced the Vuex plugin

const store = new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
}) Copy the code

With the configuration above, jump between pages in Figure 3, and if a view is refreshed, the data will not be lost and will still exist, and you don’t need to manually access storage on every mutations.

What is the strict mode of Vuex, what does it do, and how to open it?

In strict mode, an error is thrown whenever a state change occurs that is not caused by a mutation function. This ensures that all state changes are tracked by the debugging tool.

In the vuex.store constructor option, as shown below

const store = new Vuex.Store({
    strict:true.})
Copy the code

How do I batch use Vuex’s getter property in a component

Use the mapGetters helper function to mix getters into a computed object using the object expansion operator

import {mapGetters} from 'vuex'
export default{
    computed:{
. mapGetters(['total'.'discountTotal'])
    }
} Copy the code

Mutation is repeated in the component

Use the mapMutations helper function, and use it in the component

import { mapMutations } from 'vuex'
methods:{
. mapMutations({        setNumber:'SET_NUMBER'.    })
} Copy the code

Then call this.setNumber(10) equivalent to call this.codestore.com MIT (‘SET_NUMBER’,10)

What is the difference between mutation and action

The action commits mutation rather than a direct state change. Mutation can change the state directly
Actions can contain any asynchronous operation. Mutation can only be a synchronous operation
Different submission methods

The action is in this store. Dispatch ('ACTION_NAME',data) to submit.Mutation is to use this.$store.commit('SET_NUMBER'To submit, 10)Copy the code

The mutation first parameter is state, and the action first parameter is context, which contains the following parameters

{
State, // is equivalent to 'store.state', or local in modulesRootState, // equivalent to 'store.state', exists only in modulesCommit, // equivalent to 'store.mit'Dispatch, // equivalent to 'store.dispatch'Getters, // equivalent to 'store.getters'RootGetters // is equivalent to 'store.getters' and exists only in modules}  Copy the code

How to use the value of state in Vuex on v-Model?

You need to convert it using computed attributes.

<input v-model="message">
// ...
computed: {
    message: {
        get () {
 return this.$store.state.message  },  set (value) {  this.$store.commit('updateMessage', value)  }  } }  Copy the code

Routing Page Management (VUe-Router)

What is a vue – the router

Vue Router is the official route manager of vue.js. Its deep integration with vue.js core makes building single-page applications a breeze. The features included are:

Nested routing/view chart
Modular, component-based routing configuration
Route parameters, queries, and wildcards
View transition effect based on vue. js transition system
Fine-grained navigation control
Links with automatically activated CSS classes
HTML5 historical mode or Hash mode is automatically degraded in IE9
Custom scroll bar behavior

How to use vue-router

Step 1 Installation

npm install vue-router -S

Copy the code

Step 2 Use the Vue Router component in main.js

Step 3 Configure routes

Define (routing) components

The routing component can be directly defined or imported into a defined component. Import the defined components here. The following

Define a route (Array of route objects)

Defines an array of routing objects. The path of an object is a custom path (that is, a path to find the corresponding component), and component refers to the corresponding component of the path. As follows:

Instantiate the Vue Router object

Call the constructor of the Vue Router to create an instance object of the Vue Router, passing in the array of routing objects defined in the previous step as the value of the parameter object. The following

Mount the root instance

Step 4 Use routing in app.vue

In app.vue, use the tag to display the corresponding component of the route. Use the tag to specify the corresponding component to be displayed when clicked. The to attribute specifies the route of the component. As follows:

How to define a vue-router dynamic route? How to get the passed dynamic parameters?

Add /:id to the path attribute in the index.js file in the Router directory. Get dynamic parameters using params.id of the Router object

Vue-router navigation hook

BeforeEach (to,from,next), determine permissions before a jump. There are three kinds:

Global navigation hooks: router. BeforeEach (to,from,next)
A hook within a component
Separate routing proprietary components

Vue route parameters are transmitted

The parameters passed in using the query method are accepted with this.$route.query

Arguments passed in params are accepted with this.$route.params

A router is a route

Route indicates the current router jump object, which can obtain name, path, query, and params

Router is an instance of VueRouter, and if you want to navigate to different urls, use router.push

Route TypeError: Cannot read property ‘matched’ of undefined error

Find new Vue() in the entry file main.js. You must use the router name. You cannot change router to router or any other alias

// Import routesimport router from './routers/router.js'

new Vue({
    el: '#app'.Router, // This name must use router render: h => h(App) });  Copy the code

Routes are loaded on demand

As the number of functional modules of the project increases, the number of files introduced increases dramatically. If nothing is done, the first screen can be quite slow to load, which is where route loading on demand comes in.

Webpack < 2.4{ 
    path:'/'.    name:'home'.    components:resolve=>require(['@/components/home'],resolve)
} Webpack > 2.4{  path:'/'. name:'home'. components:()=>import('@/components/home') }  Copy the code

The import() method was introduced in ES6, dynamic loading returns a Promise object, and the then method takes arguments to the loaded module. Similar to node.js’s require method, the main import() method is loaded asynchronously.

Router-link in Vue is useful on PC, but not on Android

Install Babel Polypill to fix Vue routing problem on Android

Invalid event registered on router-link in Vue2

Using the @ click. Native. Router-link blocks the click event. Native means listening directly for a native event

RouterLink does not work in Internet Explorer and Firefox

Use only the A tag, not the button tag
Use the button tag and the router. navigate method

Network Request (Axios)

Please refer to my other article for this module, which will not be cleaned up here (I am too lazy).

Learn axios encapsulation and the world is yours

Video Playing (video.js)

Please refer to my other article for this module, which will not be cleaned up here (I am too lazy).

Hand-held from scratch – encapsulates a VUE video player component

Vue common UI library

The mobile terminal

Mint – UI (http://mint-ui.github.io/#! / useful – cn)
Vant (https://youzan.github.io/vant/#/zh-CN/home)
VUX (https://vux.li/)

PC

Element – the UI (https://element.eleme.cn/2.13/#/zh-CN/component/installation)
Ant Design of Vue (https://www.antdv.com/docs/vue/introduce-cn/)
Avue (https://avuejs.com/)

Common WebPack configurations

Vue-lic3 Scaffolding (vue.config.js)

publicPath

Type: String

Default: ‘/’

The base URL when deploying the application package. By default, the Vue CLI assumes that your application is deployed at the root of a domain name, such as https://www.my-app.com/. If the application is deployed on a subpath, you need to specify the subpath with this option. For example, if your app is deployed at https://www.my-app.com/my-app/, set publicPath to /my-app/

The value can also be set to an empty string (“) or a relative path (“./ “), so that all resources are linked to a relative path, so that the output package can be deployed on any path, or can be used on file systems such as Cordova Hybrid.

productionSourceMap

Types: Boolean

Moren: true,

Not allowing project source mapping files to be generated during packaging can significantly reduce package size in production environments

Note what the Source map does: Processing of packaged code is an information file that stores location information. That is, every position in the transformed code corresponds to the position before the transformation. With this, when something goes wrong, the debugger will display the original code instead of the converted code. This undoubtedly brings great convenience to developers

assetsDir

The directory where generated static resources (js, CSS, IMG, fonts) are placed (as opposed to outputDir). The default is ”,

indexPath

Specify the output path of the generated index.html (relative to outputDir). It could be an absolute path. The default is’ index.html ‘

lintOnSave

Whether to use ESLint checks every time you save. This is syngrammatically strict and can be used by students who have their own requirements

css

css: {
// Whether to enable CSS separation plug-ins. The default is yestrueIf CSS style separation is not enabled, the packaged CSS is injected into the DOM with inline styles.    extract: true.    sourceMap: false// same as above    modules: false// Enable CSS Modules for all CSS and its preprocessed files.// This option does not affect '*.vue' files. },  Copy the code

devServer

Local development server configuration, here directly pasted my commonly used configuration, described in a way of comments

devServer: { 
// Configure the development server    host: "0.0.0.0".// Whether hot loading is enabled, which means whether you need to refresh the browser every time you update the code to see the new code effect    hot: true.// Service startup port port: "8080".// Whether to open the browser automatically The default value isfalse  open: false.// Configure the HTTP proxy proxy: {  "/api": {/ / if the address is http://192.168.0.118:9999/api1 ajax request then you can use in jajx/API/api1 path, it will parse request path/ / http://192.168.0.118:9999/api1, of course, on your browser to http://localhost:8080/api/api1; target: "http://192.168.0.118:9999".// Whether to allow cross-domain, this is in the development environment, but in the production environment, it is still handled by the background, so do not worry too much changeOrigin: true. pathRewrite: { // Set the extra path to' '  "api": ""  }  },  "/api2"{// Multiple proxies can be configured to match which one is used for parsing target: "http://api2". // ...  }  } },  Copy the code

pluginOptions

This is an object that does not perform any schema validation, so it can be used to pass any third-party plug-in options, such as:

{
// Define a global less file to put common style variables in so that you don't have to re-reference it every time you use it    'style-resources-loader': {
      preProcessor: 'less'.      patterns: [
 './src/assets/public.less'  ]  } }  Copy the code

chainWebpack

Is a function that takes a Webpack-chain-based ChainableConfig instance. Allows for more fine-grained changes to the internal WebPack configuration. Such as:

chainWebpack(config) { 
// Add a path alias. Suppose there are ten images in assets/img/menu/."/assets/img/menu/img1.png")
// It is too inconvenient to import in different levels, so it is useful to define a road alias as below    config.resolve.alias
// Add multiple aliases to support chain calls .set("assets", path.join(__dirname, "/src/assets"))  .set("img", path.join(__dirname, "/src/assets/img/menu")) // just require("img/img1.png"); Can be}  Copy the code

Reference:

1, summarize the Vue FAQ at https://blog.csdn.net/qq_27674439/article/details/99449197

2, try https://zhuanlan.zhihu.com/p/92407628 vue often meet

3, vuex website https://vuex.vuejs.org/zh/

4, Vuex interview questions summary https://juejin.cn/post/6844903993374670855

5, Vue CLI website https://cli.vuejs.org/zh/

History of good articles recommended:

After reading the salary increase is no longer a dream

2, 【 ten thousand word long article 】 the most complete JavaScript foundation summary ~ suggested collection

I know. What are macro tasks and micro tasks?

4, sharp code non weapon vscode

Interview guide takes you to the top of your life

Finally, if you like xiaobian, you can pay attention to xiaobian public number [little monkey Web growth road], know more dry goods. After paying attention to the background to reply to the knowledge system, more can receive xiaobian carefully prepared front-end knowledge system, future learning is no longer confused.

This article is formatted using MDNICE

The best VUE summary ever – interview development depends on it