A rare TS Study Guide (1.8W words)

Introductory tutorial

What is the never type?

What advantages does TypeScript have over JavaScript?

A vUE that summarizes itself

Parent component lifecycle execution sequence review in Vue

What is Vuex?

When the interviewer asks us about vuex, we should not just say “Vuex is a state management model developed for vuue. Js application”, and try not to let the interviewer continuously ask (always ask yourself that you do not know and then say that you are not enough to take a salary cut), we should explain from four aspects at once:

1. What is vuex?

2. Core concepts of VUEX (vuEX attributes, VUEX data transfer process)

3. Why vuex?

4. Working principle of VUEX

For question 1, we can follow the description on the official website. Vuex is a state manager developed specifically for vuue.js applications (it uses centralized storage to manage the state of all components of the application and rules to ensure that the state changes in a predictable way).Copy the code

For question 2, vuEX has five core attributes: State, getter, mutation, Action and Module state: stores data and stores state; After the store is registered in the root instance, use this.$store.state to access the store. Corresponding to data in VUE; The vUE component reads data from the Store. If the data changes, the component will update accordingly. Getter: can be thought of as a computed property of the store. Its return value is cached based on its dependencies and is recalculated only if its dependencies change. Mutation: The only way to change the state in Vuex's store is to commit mutation. Action: Contains any asynchronous operation that changes the state indirectly by submitting mutation. Module: Splits the store into modules, each with state, mutation, action, getters, and even nested submodules.Copy the code

The data transfer process of VUEX is as follows:Copy the code

We need to invoke Dispatch to trigger methods in actions when a component makes data changes. Every method in Actions has a commit method, and when the method is executed, commit triggers the mutations method to modify the data. Every function in mutations will have a state parameter, so that the data of state can be modified in mutations, and when the data is modified, it will be transmitted to the page. The data on the page also changes.Copy the code

As for the third problem, 1. Since the method of parameter transmission will be very tedious for multi-layer nested components, and it is powerless to transfer state between sibling components. We often use parent-child components to reference multiple copies of state directly or through events to change and synchronize. These patterns are very fragile and often result in unmaintainable code. So we need to extract the shared state of the components and manage it in a global singleton. In this mode, our tree of components forms a giant "view" where any component can get state or trigger behavior no matter where it is in the tree! In addition, by defining and isolating concepts in state management and enforcing compliance with certain rules, our code becomes more structured and maintainable. 2. Vuex can also solve the creation, maintenance and change of shared variables between pages.Copy the code

For question four,

Bytedance interviewer: Explain how Vuex works (just a few lines of code)

Juejin. Im/post / 684490…