In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
This article mainly explains "what are the front-end basic interview questions of vue". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "what are the front-end basic interview questions of vue"?
Vue value transfer method vue value
The value passed by father and son is accepted using props
The father writes the event function, the child $emit triggers the value
Brother transfer value $bus transfer station
If the relationship between components is far away, it is the value vuex that many components use.
Provide, inject injection mode
Vuex is a global state data management. To put it simply, its data is similar to global variables. Any component can use it.
Using vuex in a project
1. Download the vuex package and import use.
Import Vuex from 'vuex'Vue.use (Vuex)
2. You need to write the global data in new.
/ / storenew Vuex.Store ({state: {count:1 / / this count is the global data}, mutations: {}, actions: {}})
3. Need to mount to new vue
New Vue ({router,store Render: h = > h (App)}. $mount ('# app') send request home component ah count value: {{$store.state.count}} Let the global data under the global count+1 M1 {{$store.state.m1.m1Name}} Click to modify the data of a module / / to be used in the component The global data / / 1 is directly $store.state in the html range. The name / / 2 is in the js range this.$store.state. Name / / @ is an alias to / src// import HelloWorld from'@ / components/HelloWorld.vue'import {mapMutations, mapActions, mapState} from 'vuex'export default {name:' Home', components: {/ / HelloWorld}, data () {return {list: [{id:1,src:' http://122.51.238.153/images/1.jpg'}, {id:2 Src:' http://122.51.238.153/images/2.jpg'}, {id:3,src:' http://122.51.238.153/images/3.jpg'}, {id:4,src:' http://122.51.238.153/images/4.jpg'}]}, created () {console.log ('created') console.log (' store') This.$store)}, mounted () {console.log ("home's mounted")}, methods: {/ / this sentence means to directly deconstruct the loginMutation / / under the global M1 module and put the loginMutation on the this and help you write the commit / / is equivalent to helping you simplify the code. MapMutations ('M1, ['loginMutation']) / / is not directly written by modules. MapMutations (['loginMutation']) add () {/ / console.log (' add',this) / / console.log ('add') This.$route.meta) / / this.$store.commit ("m1/loginMutation") / / or the following mapMutations is equivalent to writing commit this.loginMutation () / / this.$store.commit ("m1/loginMutation") / / and the idea just now is to add a module prefix M1 / this.$store.dispatch ("m1/loginAction")} Async getAll () {/ / http://localhost:8080/ request http://122.51.238.153/getok.php / / let res=await this.$http.get ("http://122.51.238.153/getok.php") / / console.log ('res',res) let res=await this.$http.get (" / api/getok.php ") console.log (' res',res)} AddCount () {/ / Let global data count+1 / / 1 normal / / dispatch triggers action / /-"commit triggers mutation / / -" when mutation modifies global data / / 2 other cases can skip action directly but must mutation modify / / console.log ('$store' This.$store) / / this.$store.dispatch ('countAction') this.$store.commit ("countMutation")}
This step is written to death. You can write down the download and use the scaffolding to choose vuex directly.
What is the logic of his use?
The data written by state in store is global data that can be used by all components.
Use logic
Manipulate state data for global vuex
Normally, you must dispatch (action)-- > action to commit to trigger mutation-- "mutation before you can modify state global data.
Action--- > mutation--- > modify state
In other cases, you can skip action and directly commit mutation-- "modify state global data."
How to manage data reasonably by vuex and the difference between mutations and actions
Analysis: this question examines the management of data and the design of data structure in vuex, as well as the difference between mutations and actions
* * answer * *: first of all, a particularly important principle should be made clear, that is, not all data should be put in vuex, because vuex has a famous saying: if you don't know why you use vuex, don't use it!
So what kind of data needs to be put in vuex? First of all, this data must be frequently used by multiple components. If it is only used by one component, there is no need to use vuex and vuex at all.
For example: a website user's nickname, account, information, and system-level information like this may be displayed and used in the business at any time. If stored in a component, you need to obtain N times, so * * system-level data * * needs to be placed in vuex, so system-level data can not be placed all the time, in order to make the data look more hierarchical. It can be designed as follows
{/ / system message system: {user: {}, setting: {}}
With the above structure, we can see at a glance where we should get the system data, that is, setting data.
If some business data also need to be shared, it is best to classify it according to the specific business meaning of the module, such as the following
{/ / system message system: {user: {}, setting: {}}, product: {productList: [], / / Commodity Information list productOrders: [] / / Commodity order list}}
As shown in the code above, we can clearly distinguish the data of each module, so that it will not lead to confusion in data management.
The difference between mutations and actions
Unlike redux, which has only one action, vuex brings out a separate mutations. It believes that the updated data must be synchronized, that is, only when the submit data method is called, the data can be modified in the mutation.
So what do we do if we want to make an asynchronous request? Here vuex provides a module specifically for asynchronous requests, action. Of course, synchronous operations can also be done in action, but the division of labor is more clear, and all data operations, whether synchronous or asynchronous, can be done in action.
Mutation is only responsible for receiving status, and synchronously completes * * data snapshot * *
So it can be assumed that
State = > responsible for storing state
Mutations = > responsible for synchronizing status updates
Actions = > is responsible for obtaining processing data (if there is an asynchronous operation, it must be processed in action and then to mutation) and submitted to mutation for status update.
Vuex modular module management, note when using
Analysis: this question examines the modular solution as the data maintained by vuex becomes more and more complex
* * parsing * *: using a single state tree, all the states of the application will be * * concentrated on a larger object * *. With the increasing requirements of the project, the state tree will become more and more bloated, which increases the complexity of state tree maintenance, and the code becomes heavy and long. So we need * * modules * * to separate * * into different modules for our state tree, each module has its own state,getters,mutations,actions; and allows sub-module; to be nested within each module as follows:
Store ├── index.js # where we assembled the module and exported the store local ├── actions.js # root-level action ├── mutations.js # root-level mutation ├── state.js # root-level state └── modules ├── module1.js # state tree of module 1 └── module2.js # module 2 state tree
In the above design, each vuex sub-module can define state/mutations/actions
It should be noted that we used the * * vuex helper function * * mapMutations/mapActions to introduce global mutations and actions, and our Vuex submodule is module1,module2. The aciton / mutation of these modules are also registered globally
That is, if loginMutation is defined in module1 and loginMutation is defined in module2, mutation conflicts.
If you repeat your name, you will make a mistake.
If you don't want to conflict and each module manages its own action and mutation, you need to give our sub-module an attribute * * namespaced: true**
So how to use the action and mutations of submodules in the component
/ / you can pass the module's space name string as the first argument to the above function. In this way, all bindings will automatically use the module as the context methods: {. MapMutations ('M1 loginMutation', ['loginMutation']), add () {console.log (' add') This) / / this.$store.commit ("m1/loginMutation") / / or the following mapMutations is equivalent to writing commit / / this.loginMutation ()}} / / which means to deconstruct the loginMutation / / under the global M1 module directly / / put the loginMutation on the this and help you write the commit / / is equivalent to helping you simplify. Code. MapMutations ('M1' ['loginMutation']), / / is not directly written by modules. MapMutations ([' loginMutaton])
Store.js
Import Vue from 'vue'import Vuex from' vuex'Vue.use (Vuex) / / 1 download vuex import use / / 2 new Vuex.Store// 3 mount to new vue export default new Vuex.Store ({state: {/ / what is written here is that all components can have global data / / name: value / / if my 1000 global data may be renamed count:100} Mutations: {countMutation (state) {/ / state is the global state console.log ('mutation triggered', state) state.count++}}, actions: {/ / action corresponding function countAction (obj) {console.log ('action triggered', obj) / / obj object contains commit obj.commit ("countMutation")}} / / modules global data can be managed by modules in store / / it can be used to distinguish the data of each different module / / 15:10 lesson modules: {/ / Module: {a set of state action mutation} M1: {namespaced: true / / Open Namespace vernacular he is under M1 and will not affect others / / module content (module assets) state: {/ / the state in the module is already nested The use of the `namespaced` attribute does not affect it m1Name: "I am the m1Name of M1 module"}, actions: {loginAction () {console.log ('M1 action')} / /-> dispatch ('M1 dispatch')} Mutations: {loginMutation () {console.log ('loginMutation- executed')} / /-> commit ('M1 _ count:1')}}, home: {namespaced: true, state: {count:1}}, about: {namespaced: true, state: {count:100} Actions: {},}})
Although Vuex is a common state, the common state can be divided into several sub-state modules, namely moduels.
A solution when our state tree is too large and complex. But the author believes that once vuex is used, it is almost assumed that the project is more complex.
Reference documentation
Https://vuex.vuejs.org/zh/guide/modules.html
Steps to encapsulate Vue components
What are the components? A component is a piece of functional code-vernacular is a piece of html + js + css that you can reuse
Package Multicast Picture-1 New vue component 2 Vue.component Registration component 3 use label signing in other components
Parameters: you can pass in data and accept it using props, such as array timer time, etc.
Analysis: this question examines the proficiency of Vue component-based development
Parsing: first of all, what is the nature of the component?
A component is a unit of HTML structure + data logic + style operation unit.
The components of Vue inherit from the Vue object, and all the properties and methods in the Vue object can be inherited automatically.
The element of the component template = > as the template structure of the page
Script = > as part of data and logic
Style = > as the style part of the component
In order to encapsulate a component, we must first make clear the specific business and requirements of the component, what kind of experience characteristics, what kind of interaction, what kind of data to deal with.
After clarifying the above requirements, proceed with the structural design and construction of the template, that is, the html structure, and first complete the static html structure.
When the structure is completed, start the design and development of the data structure. The data structure is generally stored in the data property of the component or the data structure of vuex state sharing.
Data design completion / structure completion, then complete the combination of data and modules, and make the static structure * * dynamic * * by using the characteristics of instructions and interpolation expressions in vuejs.
The part of the presentation is completed, and then the * * interactive part * * is completed, that is, the processing and operation of logic and data are completed by using the hook functions and event drivers of the component life cycle.
Finally, the components are completed, tested and used.
Common component properties = > data/ methods/filters/ components/watch/created/mounted/beforeDestroy/computed/props
Common component instruction: v-if/v-on/v-bind/v-model/v-text/v-once
Whether the data in Vue is expressed in the form of function or object
Analysis: this question examines the existence form of data parsing: when we initially learn the code written when Vue instantiation looks like this, the data in the above code is an object, but when we develop components, we require that data must be a function with a return value.
New Vue ({el:'# app', data: {name: 'hello world'}}) export default {data () {return {name:' Zhang San'}
Why does a component require a function with a return value? Because when our component instantiates, it will directly act the data data on the view, and instantiate the component, which will cause our component's data data to be shared.
For example, there are two new cars now. If you step on the accelerator, not only will your car go forward, but the other car will rush forward just like you!
This obviously does not meet our programming requirements. We want the data within the components to be independent and unresponsive, so we adopt the form that return {} each component instance returns a new object instance to ensure the uniqueness of each component instance.
At this point, I believe you have a deeper understanding of "what are the front-end basic interview questions of vue?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.