Components are one of the most powerful features of Vue.js, and the scope of component instances is independent of each other, which means that data between different components cannot be referenced to each other. Generally speaking, components can have the following relationships: Image As shown in the above figure, A and B, B and C, B and D are all father son relationships, C and D are sibling relationships, and A and C are intergenerational relationships (possibly multiple generations apart). How to choose effective communication methods for different usage scenarios? This is the theme we are going to explore. This article summarizes several ways of communication between Vue components, such as props, $emits/$on, Vuex, $parent/$children, $attrs/$listeners, and provide/object. It provides easy to understand examples to explain the differences and usage scenarios, hoping to be helpful to our friends. Please poke at Github's blog for the code in this article. If you get it on paper, you'll end up feeling shallow. Let's start typing the code more! Method 1: props/$exit Parent component A is passed to child component B through props, and B to A is implemented through $exit in component B and v-on in component A.
Parent component passes values to child components Next, we will use an example to illustrate how the parent component passes values to the child component: how to obtain data users from the parent component App. vue in the child component Users. vue: ["Henry", "Bucky", "Emily"] //App. vue Parent Component
//The former has a custom name that is easy for subcomponents to call, while the latter needs to pass the data name
Summary: The parent component passes data down to the child components through props. Note: There are three forms of data in the component: data, props, and computed
Sub component passes values to parent component (through event form) Next, we will use an example to illustrate how a child component passes values to its parent component: when we click on "Vue. js Demo", the child component passes values to the parent component, and the text changes from "passing a value" to "passing a value from the child to the parent component", achieving the transfer of values from the child component to the parent component. Before child components pass values to parent components // 子组件
方法五、provide/inject 1.简介 Vue2.2.0新增API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。一言而蔽之：祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。 provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。
} } 可以看到，在 A.vue 里，我们设置了一个 provide: name，值为 浪里行舟，它的作用就是将 name 这个变量提供给它的所有子组件。而在 B.vue 中，通过 inject 注入了从 A 组件中提供的 name 变量，那么在组件 B 中，就可以直接通过 this.name 访问这个变量了，它的值也是 浪里行舟。这就是 provide / inject API 最核心的用法。
Tips: This article is the most complete introduction to the asynchronous promise and Async/Await blogs, which are original and self transforming. Welcome to communicate with the front-end experts and point out any issues 1、 Why is there Async/Await? We all know that Promise's solution already exists, why should ES7 propose a new Async/Await standard? The answer is actually obvious: Although Promise breaks out of the strange circle of asynchronous nesting and is expressed more clearly in chain form, we also found that when there are a large number of asynchronous requests and the process is complex, we will find them filled with screens, which looks very difficult. The emergence of Async/Await in ES7 is to solve this complex situation. Firstly, we must understand Promise. 2、 Promise Introduction 2.1 Promise Example What is Promise, and many people should know the basic concepts? Take a look directly at the following code (the examples in the entire article are based on the setDelaySecond and setDelay functions, please remember): Const setDelay=(millisecond)=>{ Return new Promise (resolve, reject)=>{ If (typeof millisecond!='number ') reject (new Error ('parameter must be of type number'); SetTimeout()=>{ Resolve (output after I delayed ${millisecond} milliseconds) }Millisecond }) } We encapsulate a Promise in a function and return a Promise, which is more standardized. You can see that the defined Promise has two parameters, resolve and reject. Resolve: Transforms asynchronous execution from pending (request) to resolving (successful return), which is a function execution return. Reject: As the name suggests, 'reject' means changing from a request to a 'failure'. It is a function that can execute and return a result, but we recommend returning an error, 'new Error()'. For the above example, you can reject ('return a string ') and return it as you please, but we still recommend returning an Error object to make it clearer that it is' failed' and more standardized. 2.2 Promise then and catch We obtain our return value through Promise's prototype method then: SetDelay (3000) . then (result)=>{ Console. log (result)//Output "I output after a delay of 2000 milliseconds" }) Output the following value: 'I output after a delay of 2000 milliseconds'. What if something goes wrong? Then use catch to capture: SetDelay ('I am a string ') . then (result)=>{ Console. log (result)//No entry }) . catch ((err)=>{ Console. log (err)//Output error: "Parameter must be of type number" }) Isn't it very simple? Okay, now I'll increase the difficulty a bit. What would happen if multiple Promises were executed? 2.3 Promise Interdependence We are writing a promise: Const setDelaySecond=(seconds)=>{ Return new Promise (resolve, reject)=>{ If (typeof seconds!='number '| | seconds>10) reject (new Error (' parameter must be of type number and less than or equal to 10 '); SetTimeout()=>{ Console. log (` First, the setDelaySeconds function output was delayed by ${seconds} seconds, resulting in a total delay of ${seconds+2} seconds') Resolve (setDelay (2000))//This depends on the previous promise }, seconds * 1000) }) } What happens when the next dependent resolve returns another Promise? Let's execute:
setDelaySecond(3).then((result)=>{ console.log(result) }).catch((err)=>{ console.log(err); }) Tips: This article is the most complete introduction to the asynchronous promise and Async/Await blogs, which are original and self transforming. Welcome to communicate with the front-end experts and point out any issues 1、 Why is there Async/Await? We all know that Promise's solution already exists, why should ES7 propose a new Async/Await standard? The answer is actually obvious: Although Promise breaks out of the strange circle of asynchronous nesting and is expressed more clearly in chain form, we also found that when there are a large number of asynchronous requests and the process is complex, we will find them filled with screens, which looks very difficult. The emergence of Async/Await in ES7 is to solve this complex situation. Firstly, we must understand Promise. 2、 Promise Introduction 2.1 Promise Example What is Promise, and many people should know the basic concepts? Take a look directly at the following code (the examples in the entire article are based on the setDelaySecond and setDelay functions, please remember): Const setDelay=(millisecond)=>{ Return new Promise (resolve, reject)=>{ If (typeof millisecond!='number ') reject (new Error ('parameter must be of type number'); SetTimeout()=>{ Resolve (output after I delayed ${millisecond} milliseconds) }Millisecond }) } We encapsulate a Promise in a function and return a Promise, which is more standardized. You can see that the defined Promise has two parameters, resolve and reject. Resolve: Transforms asynchronous execution from pending (request) to resolving (successful return), which is a function execution return. Reject: As the name suggests, 'reject' means changing from a request to a 'failure'. It is a function that can execute and return a result, but we recommend returning an error, 'new Error()'. For the above example, you can reject ('return a string ') and return it as you please, but we still recommend returning an Error object to make it clearer that it is' failed' and more standardized. 2.2 Promise then and catch We obtain our return value through Promise's prototype method then: SetDelay (3000) . then (result)=>{ Console. log (result)//Output "I output after a delay of 2000 milliseconds" }) Output the following value: 'I output after a delay of 2000 milliseconds'. What if something goes wrong? Then use catch to capture: SetDelay ('I am a string ') . then (result)=>{ Console. log (result)//No entry }) . catch ((err)=>{ Console. log (err)//Output error: "Parameter must be of type number" }) Isn't it very simple? Okay, now I'll increase the difficulty a bit. What would happen if multiple Promises were executed? 2.3 Promise Interdependence We are writing a promise: Const setDelaySecond=(seconds)=>{ Return new Promise (resolve, reject)=>{ If (typeof seconds!='number '| | seconds>10) reject (new Error (' parameter must be of type number and less than or equal to 10 '); SetTimeout()=>{ Console. log (` First, the setDelaySeconds function output was delayed by ${seconds} seconds, resulting in a total delay of ${seconds+2} seconds') Resolve (setDelay (2000))//This depends on the previous promise }, seconds * 1000) }) } What happens when the next dependent resolve returns another Promise? Let's execute:
A promise must be in one of three states: pending, fulfilled, or rejected. Promise其实是有三种状态的：pending，resolve，rejected，那么我们一直在讨论resolve和rejected这2个状态，是不是忽视了pending这个状态呢？pending状态顾名思义就是请求中的状态，成功请求就是resolve，失败就是reject，其实他就是个中间过渡状态。
let message = '我是声明值'
let result = await message;
console.log(result);
console.log('我由于上面的程序还没执行完，先不执行“等待一会”');
return result
} demo().then(result=>{ console.log('输出',result); }) Output: I declare the value I won't execute 'wait for a moment' because the above program has not been completed yet Output I am a declared value Just one thing to note here: then execution is always final. 3.4 Actual combat of async/await advantages Now let's take a look at the actual combat: Const setDelay=(millisecond)=>{ Return new Promise (resolve, reject)=>{ If (typeof millisecond!='number ') reject (new Error ('parameter must be of type number'); SetTimeout()=>{ Resolve (output after I delayed ${millisecond} milliseconds) }Millisecond }) } Const setDelaySecond=(seconds)=>{ Return new Promise (resolve, reject)=>{ If (typeof seconds!='number '| | seconds>10) reject (new Error (' parameter must be of type number and less than or equal to 10 '); SetTimeout()=>{ Resolve (I delayed the output by ${seconds} seconds, please note that the unit is seconds) }, seconds * 1000) }) } For example, the above two delay functions (written above), for example, I want to delay for 1 second first, then delay for 2 seconds, then delay for 1 second, and finally output "complete". This process, if written using then's method, would be like this (nested hell writing without sending when going out and turning right): SetDelay (1000) . then (result=>{ Console. log (result); Return setDelaySecond (2) }) . then (result=>{ Console. log (result); Return setDelay (1000) }) . then (result=>{ Console. log (result); Console. log ('Done ') }) . catch (err=>{ Console. log (err); }) At first glance, isn't it quite complicated? If there is more logic, it may be more tiring to watch. Now let's try async/await (async()=>{ Const result=await setDelay (1000); Console. log (result); Console. log (await setDelaySecond (2)); Console. log (await setDelay (1000)); Console. log ('Completed '); }) () Look! Is there no redundant long chain code, and the semantics are very clear and comfortable? So, when you see this, you must have noticed that the catch above is not implemented in async? Next, let's analyze how async/await handles errors? 3.5 async/await error handling Because the async function returns a Promise, we can catch errors outside. Const demo=async()=>{ Const result=await setDelay (1000); Console. log (result); Console. log (await setDelaySecond (2)); Console. log (await setDelay (1000)); Console. log ('Completed '); } Demo (). catch (err=>{ Console. log (err); }) Capture errors in the catch of the async function and treat them as a Pormise. If you don't want to use this method, you can use try Catch statement: (async()=>{ Try{ Const result=await setDelay (1000); Console. log (result); Console. log (await setDelaySecond (2)); Console. log (await setDelay (1000)); Console. log ('Completed '); }Catch (e){ Console. log (e)// Error caught here } }) () Of course, you don't need to catch outside at this time. Usually, our try The number of catches will not be too many, but the most. If there are too many, it indicates that your code definitely needs to be refactored, and it must not have been written very well. Another point is try Catch is usually only used when needed, and sometimes it is not necessary to write errors in the catch. Someone might ask, I try Catch seems to only wrap around code blocks. If I need to split and process them separately, and don't want to crash the entire process due to one error, then should I write a bunch of tries Catch? I'm just uncomfortable, I just don't want to write try What about catch? Here is a great solution for reference only: We know that the word 'await' must be followed by a promise. Can we write it like this? (async()=>{ Const result=await setDelay (1000). catch (err=>{ Console. log (err) }); Console. log (result); Const result1=await setDelaySecond (12). catch (err=>{ Console. log (err) }) Console. log (result1); Console. log (await setDelay (1000)); Console. log ('Completed '); }) () Output in this way: I delayed the output by 1000 milliseconds Error: The parameter must be of type number and be less than or equal to 10 At Promise (test4. html: 19) At new Promise () At setDelaySecond (test4. html: 18) At test4. html: 56 Undefined I delayed the output by 1000 milliseconds Completed Is it great that even if there are errors, they won't affect subsequent operations? Of course not, do you think this code is also very ugly? It's messy and awkward to write, and it follows catch. So we can improve by encapsulating the code function that extracts errors: //To function Function to (promise){ Return promise. then (data=>{ Return [null, data]; }) . catch (err=>[err])// Return writing for es6 } The return is an array, with the first being an error and the second being an asynchronous result, using the following: (async()=>{ //The writing method of ES6 returns an array (if you find it unfamiliar with the writing method of ES5). The first is the error message, and the second is the asynchronous return data of then. It should be noted that duplicate variable declarations may cause problems (for example, if using let or const, please change the variable name). [err, result]=await to (setDelay (1000)) //If err exists, there is an error, and if you don't want to continue executing, throw an error If (err) throw new Error ('An error occurred and I no longer want to execute it '); Console. log (result); [err, result1]=await to (setDelaySecond (12)) //If you still want to execute, don't throw an error If (err) console. log ('An error occurred and I want to continue executing ', err); Console. log (result1); Console. log (await setDelay (1000)); Console. log ('Completed '); }) () 3.6 Asynchronous/await interrupt (termination program) Firstly, we need to clarify that Promise itself cannot be aborted. Promise itself is just a state machine that stores three states (pending, resolved, rejected). Once a request is made, it must be closed loop and cannot be cancelled. Previously, being in the pending state was only a state of suspending a request, not canceling. This situation is generally not allowed to occur, but is only used to temporarily suspend the chain process. The essence of interruption (termination) is just hanging in the chain, not essentially canceling the Promise request, which cannot be done, and Promise does not have a cancel state. Unlike the chain writing method of Promise, it is easy to interrupt a program in async/await because the semantics are very obvious. In fact, just like the general function writing method, when you want to interrupt, you can simply return a value, null, empty, or false. See example: Let count=6; Const demo=async()=>{ Const result=await setDelay (1000); Console. log (result); Const result1=await setDelaySecond (count); Console. log (result1); If (count>5){ Return 'I have exited and will not proceed with the following'; //Return; //Return false// These writing methods are all acceptable //Return null; } Console. log (await setDelay (1000)); Console. log ('Completed '); }; Demo (). then (result=>{ Console. log (result); }) . catch (err=>{ Console. log (err); }) The essence is to directly return a Promise, which is equivalent to returning Promise. resolve ('I have exited and will not proceed below '). Of course, you can also return a' reject ': return Promise. reject (new Error ('reject'), which will enter the error message. The async function essentially returns a Promise! 4、 Points to pay attention to during asynchronous operations in actual combat We often use the two writing methods mentioned above, and may also mix them. Sometimes, we may encounter some situations. Here is an example to illustrate: 4.1 Promise to Obtain Data (Serial) Then Writing Notes It goes without saying that parallelism is very simple, simply issuing requests through a loop or using Promise. all. What should we do if we need to serialize a request? We need to implement a program that delays the output values by 1 second in sequence for a total of 5 seconds. Firstly, the Promise loop is relatively cumbersome: We often make mistakes! Just not valuing the impact of function names and function execution on the program Let's not talk about loops, let's give an example of an error. Now we have a delay function Const setDelay=(millisecond)=>{ Return new Promise (resolve, reject)=>{ If (typeof millisecond!='number ') reject (new Error ('parameter must be of type number'); SetTimeout()=>{ Resolve (output after I delayed ${millisecond} milliseconds) }Millisecond }) } We want to achieve the goal of "looping through the serial execution of the Promise function with a delay of one second", and the expected result should be: outputting the output after I delay for 1000 milliseconds every other second, after a total of 3 cycles syncPromise(arr).then(result=>{ console.log(result); console.log('ok'); }) //Or add methods to the Promise class Promise. syncAll=function syncAll(){ Return syncPromise }//You can use it directly in the future Promise. syncAll (arr). then (result=>{ Console. log (result); Console. log ('Completed '); }) The Great God also summarized a writing method for reduce, which is actually a process of iterating through arrays:
}Promise. resolve ('Program Start ') p. Then (result)=>{ Console. log ('Finished ', result); }) Both are feasible in the circular field of Promise. 4.3 async/await loop for obtaining data (serial) Now let's introduce the practical application of Niubi's async/await. Do you have to look at the above code? Indeed, I also think it's troublesome. So, can there be any improvement if using async/await? This is the meaning of its appearance: Simulate the loop of the above code: (async ()=>{
arr = [timeout(2000), timeout(1000), timeout(1000)]
for (var i=0; i < arr.length; i++) {
result = await arr[i]();
console.log(result);
}
})() ... Is that all? Yes... That's it, isn't it particularly convenient!!!! Semanticization is also very obvious!! In order to maintain consistency with the above style, no error handling has been added here, so remember to add your try during actual combat Catch statement to catch errors. 4、 Postscript I have always wanted to summarize Promise and async/await, but I may not have summarized enough in many aspects. I have tried my best to expand the space, and there may be new knowledge points and summary points that will be updated in the future (to be continued). However, the beginner's level is basically sufficient. We often say that the emergence of async/await eliminated Promise, which can be said to be a big mistake. On the contrary, it is precisely because of Promise that there is an improved version of async/await. From the above analysis, it can be seen that the two are complementary and indispensable. To learn async/await well, one must first be proficient in Promise. The two are inseparable, and there are different opinions and suggestions for improvement. Welcome to guide! Front end white, everyone communicates with each other, peace!
{{ this will not be compiled }} 显示的是{{ this will not be compiled }} {{msg}} 即使data里面定义了msg这里仍然是显示的{{msg}} 26.v-cloak 场景:在网速慢的情况下,在使用vue绑定数据的时候，渲染页面时会出现变量闪烁 用法:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
// template 中
{{value.name}}
// css 中 [v-cloak] {
display: none;
} 这样就可以解决闪烁,但是会出现白屏,这样可以结合骨架屏使用
27.v-once 场景:有些 template 中的静态 dom 没有改变,这时就只需要渲染一次,可以降低性能开销
Write in front The documentation on slots in Vue is very short, and the language is concise. In addition, the differences in frequency and order of use between Vue and commonly used options such as methods, data, and computed may cause developers who are new to slots to easily feel like "forget it, learn later, you can already write basic components", so they closed the Vue documentation. In fact, the concept of a slot is very simple. Let's talk about it in three parts. This section is also written in the order of the Vue documentation. Before entering the third section, let students who have not yet been exposed to a slot have a simple concept of what a slot is: a slot, also known as a slot, is an HTML template for a component. Whether this template is displayed or not, and how it is displayed is determined by the parent component. In fact, the two core issues of a slot are highlighted here, which are whether to display it and how to display it. Due to the fact that slots are a template, any component can be divided into two categories from the perspective of template types: non slot templates and slot templates. Non slot templates refer to HTML templates, which refer to 'div, span, ul, table', etc. The display and hiding of non slot templates and how they are displayed are controlled by the plugin itself; The slot template is a slot, which is an empty shell because its display and hiding, as well as the final HTML template display, are controlled by the parent component. However, the position of the slot display is determined by the child component itself. The slot is written in which block of the component template, and the template passed from the parent component will be displayed in which block in the future. Single slot | Default slot | Anonymous slot Firstly, there is a single slot, which is the official name for Vue, but it can also be called the default slot, or as opposed to a named slot, we can call it an anonymous slot. Because it does not need to set the name attribute. A single slot can be placed anywhere in a component, but like its name, there can only be one such slot in a component. Correspondingly, there can be many named slots, as long as the name (name attribute) is different. Below is an example to demonstrate. Parent component:
<div class="father">
<h3>This is the parent component</h3>
<child>
<div class="tmpl">
<span>menu1</span>
<span>menu2</span>
<span>menu3</span>
<span>menu4</span>
<span>menu5</span>
<span>menu6</span>
</div>
</child>
</div>
Sub components:：
<div class="child">
<h3>This is the sub component</h3>
<slot></slot>
</div>
In this example, because the parent component has written an HTML template in, the anonymous slot template for the child component is as follows. That is to say, the anonymous slot of the sub component has been used, which is used by the template below.是被下面这块模板使用了。
menu1menu2menu3menu4menu5menu6
The final rendering result is shown in the figure:
Note: All demos have been styled for easy observation. Among them, the parent component is filled with a gray background, and the child components are filled with light blue. Named slot Anonymous slots do not have a name attribute, so they are anonymous slots. Therefore, adding a name attribute to a slot becomes a named slot. Named slots can appear N times in a component. Appear in different locations. The following example is a component with two named slots and a single slot. These three slots are displayed by the parent component in the same CSS style, with slight differences in content. Parent component:
The displayed results are shown in the figure: As can be seen, the parent component is associated with a named slot through the slot attribute on the HTML template. HTML templates without slot attributes are associated with anonymous slots by default. Scope slot Finally, there is our scope slot. This is a bit difficult to understand. Officially, it is called a scope slot. In fact, compared to the previous two slots, we can call it a slot with data. What does it mean? The first two are both written in the template of the component Anonymous slot Named slot However, the scope slot requires binding data on the slot. That is to say, you need to write it like this.
} As we mentioned earlier, whether the slot is displayed or not depends on whether the parent component has written a template under the child, as shown below. html template
Once written, the slot always needs to display something in the browser, which is what HTML should look like. If not written, the slot is just an empty shell, with nothing. OK, when we say there is an HTML template, that is, when the parent component inserts a template into the child component, what style should be inserted? This is determined by the parent component's HTML+CSS, but what is the content in this style? Because the scope slot is bound to a set of data, the parent component can be used. Thus, the situation becomes like this: the style of the parent component is the final say, but the content can show the slot binding of the child component. Let's compare the differences between a scope slot and a single slot and a named slot. Because a single slot and a named slot do not bind data, the template provided by the parent component should include both style and content. In the example above, the text you see, "Menu 1" and "Menu 2", are all provided by the parent component itself; And for the scope slot, the parent component only needs to provide a set of styles (provided that the data bound to the scope slot is confirmed). In the following example, you can see that the parent component provides three styles (flex, ul, and direct display), but does not provide data. The data is all based on the person name array bound by the child component slot itself. Parent component:
This is the parent component
<-- First use: Display data using flex -->
{{item}}}
<-- Second use: Display data in a list -->
{{item}}
<-- Third use: Display data directly -->
{{user. data}}
<-- Fourth use: Do not use the data it provides, and the scope slot reverts to an anonymous slot --> I am the template
} The results are shown in the figure: Github The above three demos are placed on GitHub, and you can go and get them if you need them. It is very convenient to use and is based on the Vue cli construction project. Address point here last If this article is helpful for you to understand slot and scope slot, please don't be stingy with your likes. Programming is valued in practice, take action now!
Look at the interview questions, just to fill in any gaps and see what aspects you still don't understand. Remember not to think that memorizing interview questions means everything is fine. It's best to understand the underlying principles so that you can have a smooth conversation during the interview. Otherwise, a slightly skilled interviewer can tell at a glance whether they have real talent and knowledge or have just memorized this interview question. (These are all basic vue interview questions, so there's no need to waste time looking down.) 1、 What is your understanding of MVVM? MVVM is the abbreviation for Model View View Model. A Model represents a data model, and business logic for data modification and operation can also be defined in the Model. View represents the UI component, which is responsible for transforming the data model into a UI for presentation. ViewModel listens to changes in model data, controls view behavior, and handles user interaction. Simply understood, it is an object that synchronizes View and Model, connecting Model and View. In the MVVM architecture, there is no direct connection between View and Model, but rather interaction through ViewModel. The interaction between Model and ViewModel is bidirectional, so changes in View data are synchronized to the Model, and changes in Model data are immediately reflected on the View. ViewModel connects the View and Model layers through bidirectional data binding, and the synchronization between View and Model is completely automatic without human intervention. Therefore, developers only need to focus on business logic, do not need to manually operate DOM, and do not need to pay attention to data state synchronization issues. Complex data state maintenance is completely managed by MVVM. Bg2015020110.png 2、 Vue's lifecycle Before creating, data observation and initialization events have not yet started Created (after creation) completes data observation, property and method operations, initializes events, and the $el attribute has not yet been displayed Before Mount is called before the start of the mount, and the relevant render function is called for the first time. The instance has completed the following configuration: compile the template and generate HTML from the data and template in the data. Please note that the HTML has not been attached to the page at this time. Mounted (after loading) is a newly created VM in EL$ El, and mount it to the instance. The instance has completed the following configuration: replace the DOM object pointed to by the el attribute with the compiled HTML content above. Complete the HTML rendering in the template to the HTML page. Perform ajax interaction during this process. BeforeUpdate is called before the data is updated, which occurs before the virtual DOM is re rendered and patched. You can further change the state in this hook without triggering additional re rendering processes. Updated is called after the virtual DOM is re rendered and patched due to data changes. When called, the component DOM has been updated, so DOM dependent operations can be performed. However, in most cases, changing the state during this period should be avoided as it may result in an infinite loop of updates. This hook is not called during server-side rendering. BeforeDestroy is called before the instance is destroyed. The instance is still fully available. Destroyed is called after the instance is destroyed. After the call, all event listeners will be removed and all child instances will also be destroyed. This hook is not called during server-side rendering. What is the Vue lifecycle? Answer: The process from creation to destruction of Vue instances is the lifecycle. The lifecycle of Vue is a series of processes, including creating, initializing data, compiling templates, mounting Doms, rendering, updating, rendering, and destroying. What is the role of the Vue lifecycle? Answer: It has multiple event hooks in its lifecycle, making it easier for us to form good logic when controlling the entire Vue instance process. How many stages are there in the Vue lifecycle? Answer: It can be divided into a total of 8 stages: before/after creation, before/after loading, before/after updating, and before/after destruction. Which hooks will trigger the first page load? Answer: The following beforeCreate, created, beforeMount, and mounted will be triggered. In which cycle has DOM rendering been completed? Answer: The DOM rendering is already completed in mounted. 3、 The principle of Vue implementing bidirectional data binding: Object. defineProperty() The main way to achieve bidirectional data binding in Vue is to use a combination of data hijacking and publisher subscriber mode, using Object. defineProperty() to hijack the setters and getters of various properties, and publish messages to subscribers when data changes, triggering corresponding listening callbacks. When passing a regular Javascript object to a Vue instance as its data option, Vue will traverse its properties and convert them to getters/setters using Object. defineProperty. Users cannot see getters/setters, but internally they allow Vue to track dependencies and notify changes when attributes are accessed and modified. The bidirectional data binding of Vue uses MVVM as the entry point for data binding, integrating Observer, Compile, and Watcher. Through Observer, it listens for data changes in its own model, parses compilation template instructions through Compile (used in Vue to parse {{}}), and finally uses Watcher to build a communication bridge between Observer and Compile, achieving data changes ->view updates; View interaction change (input) ->bidirectional binding effect of data model change. Implementing Simple Bidirectional Binding with JavaScript
Parent component and child component passing values The parent component passes to the child component: the child component receives data through the props method; Child component passing to parent component: $exit method passing parameters
Data transfer between non parent-child components, and value transfer between sibling components EventBus is the creation of an event center, equivalent to a transit station, that can be used to transmit and receive events. The project is relatively small, so this is more suitable. (Although many people recommend using VUEX directly, it depends on the requirements. Technology is just a means, achieving the goal is the king's way.) 5、 Route Implementation of Vue: Hash Mode and History Mode Hash mode: In the browser, the symbol '#', followed by the characters' # ', is called a hash, which is read using window. location. hash; Feature: Although hash is in the URL, it is not included in HTTP requests; Used to guide browser actions, useless for server security, hash will not reload the page. In hash mode, only the content before the hash symbol will be included in the request, such as http://www.xxx.com Therefore, for the backend, even if full coverage of the route is not achieved, a 404 error will not be returned. History mode: History adopts the new features of HTML5; And two new methods are provided: pushState (), replaceState () to modify the browser history stack, and to listen for state changes in popState events. In the history mode, the front-end URL must be consistent with the actual URL that initiates the request from the backend, such as http://www.xxx.com/items/id . If the backend lacks routing processing for/items/id, it will return a 404 error. In the official website of Vue Router, it is described as follows: "However, to play this mode well, backend configuration support is also required... So, you need to add a candidate resource on the server that covers all situations: if the URL cannot match any static resources, you should return to the same index. html page, which is the page that your app depends on 6、 What is the difference between Vue, Angular, and React? (The versions are constantly updated, and the following differences may not be very accurate. I only use Vue in my work and am not very familiar with Angular and React.)
Differences from AngularJS Similarities: Both support instructions: built-in instructions and custom instructions; Both support filters: built-in filters and custom filters; Both support bidirectional data binding; None of them support low-end browsers. Differences: AngularJS has a high learning cost, such as adding the Dependency Injection feature, while Vue.js itself provides a relatively simple and intuitive API; In terms of performance, AngularJS relies on dirty checking of data, so the more Watchers, the slower; Vue.js uses dependency tracking based observation and asynchronous queue updates, and all data is independently triggered.
Differences from React Similarities: React adopts a special JSX syntax, and Vue. js also advocates writing. Vue special file formats in component development, with some conventions for file content, both of which need to be compiled and used; The central idea is the same: everything is a component, and component instances can be nested; Provide reasonable hook functions that allow developers to customize requirements; They do not have built-in column count AJAX, Route, and other functions in the core package, but are loaded as plugins; Mixins feature is supported in component development. Differences: The Virtual DOM used by React will perform dirty checks on the rendered results; Vue.js provides instructions, filters, and more in the template, making it very convenient and fast to operate the Virtual DOM. 7、 Hook function for Vue routing The homepage can control navigation jumps, beforeEach, afterEach, etc., and is generally used for modifying page titles. Some redirect functions that require login to adjust the page. Before Each mainly has three parameters to, from, and next: To: The target routing object that the route is about to enter, From: route The current navigation is about to leave the route Next: Function must call the method resolve hook. The execution effect depends on the calling parameters of the next method. Can control webpage redirection. 8、 What is vuex? How to use it? Which functional scenario uses it? The states that are only used for reading are concentrated in the store; The way to change the state is to submit mutations, which is a synchronized thing; Asynchronous logic should be encapsulated in actions. Introduce the store in main.js and inject it. Created a new directory store Export. Scenarios include: in a single page application, the status between components, music playback, login status, and adding to the shopping cart Picture description State Vuex uses a single state tree, meaning that each application will only contain one store instance, but a single state tree and modularity do not conflict. The stored data status cannot be directly modified. Mutations The methods defined by mutations dynamically modify the state or data in Vuex's store. Getters Computational attributes similar to Vue are mainly used to filter some data. Action Actions can be understood as transforming the data processing methods in mutations into asynchronous data processing methods, which in simple terms are asynchronous operations on data. The view layer distributes actions through store.dispath.
} } }) modules When the project is particularly complex, each module can have its own state, mutation, action, and getters, making the structure very clear and easy to manage.
el: '#app',
data: {
},
// Create instructions (can have multiple)
directives: {
// Instruction Name
dir1: {
inserted(el) {
// The first parameter in the instruction is the DOM of the currently used instruction
console.log(el);
console.log(arguments);
// Operate on DOM
el.style.width = '200px';
el.style.height = '200px';
el.style.background = '#000';
}
}
}
}) 2.Global Directives
Vue.directive('dir2', {
inserted(el) {
console.log(el);
}
}) 3.Use of instructions
十、How can Vue customize a filter? html code：
{{msg| capitalize }}
JS code:
var vm=new Vue({
el:"#app",
data:{
msg:''
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}) Global Definition Filter
Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) The filter receives the value of the expression (msg) as the first parameter. The capitalization filter will receive the value of msg as the first parameter.
11、 What is your understanding of keep alive? Keep alive is a built-in component of Vue that can preserve the state of the included components or avoid re rendering. After version 2.1.0 of Vue, keep alive added two new attributes: include (cache of included components) and exclude (exclude components are not cached and have a higher priority than include). Usage method <keep alive include='include_ Components' exclude='exclude_ Components <-- Whether this component is cached depends on the include and exclude attributes -->
Parameter Interpretation Include - String or regular expression, only components with matching names will be cached Exclude - Strings or regular expressions, any components with matching names will not be cached The properties of include and exclude allow components to cache conditionally. Both can use "," to separate strings, regular expressions, and arrays. When using regexes or arrays, remember to use v-bind. Usage examples <-- Comma separated string, only components a and b are cached. --> Keep alive include="a, b">
<-- Regular expression (requires the use of v-bind, all matching rules will be cached) --> Keep alive: include="/a | b/">
<-- Array (requires the use of v-bind, everything contained will be cached) --> Keep alive: include="['a ','b']">
12、 An interview question that can be answered in just one sentence
CSS only works on the current component Answer: Write scoped in the style tag, for example:
Differences between v-if and v-show Answer: V-if is rendered according to the conditions, and V-show is the block or none of display;
Differences between $route and $router Answer: $route is the "routing information object", including path, params, hash, query, fullPath, matched, name, and other routing information parameters. And $router is the "routing instance" object, which includes the jump method, hook function, and so on of the route. What are the two cores of vue.js? Answer: Data driven, component system
Several Common Instructions for Vue Answer: V-for, V-if, V-bind, V-on, V-show, V-else
What are the commonly used modifiers for Vue? Answer:. prevent: Submitting an event will no longer overload the page Stop: Prevent click events from bubbling Self: Triggered when an event occurs on the element itself rather than a child element Capture: Event listening, which will be called when an event occurs Can V-on bind multiple methods? Answer: Yes What is the role of key values in Vue? Answer: When Vue.js uses v-for to update the rendered element list, it defaults to using the "in place reuse" strategy. If the order of the data items is changed, Vue will not move DOM elements to match the order of the data items, but will simply reuse each element here and ensure that it displays each element that has been rendered under a specific index. The main function of key is to efficiently update the virtual DOM.
What are the computational properties of Vue? Answer: Placing too much logic in a template can make it too heavy and difficult to maintain. In situations where complex data processing is required and may be used multiple times, it is recommended to use the method of calculating attributes as much as possible. Benefits: ① Clear data processing structure; ② Depends on data, updates data, and automatically updates processing results; ③ This points to the VM instance within the calculation attribute; ④ When calling the template, simply write the calculation property name; ⑤ The commonly used method is the getter method, which can obtain data or use the set method to change the data; ⑥ Compared to methods, regardless of whether the dependent data remains unchanged, methods will be recalculated. However, when the dependent data remains unchanged, computed is obtained from the cache and will not be recalculated.
Single page applications such as Vue and their advantages and disadvantages Answer: Advantages: Vue's goal is to achieve responsive data binding and composite view components through the simplest possible API, with a responsive data binding system at its core. MVVM, data-driven, componentized, lightweight, concise, efficient, fast, and modular friendly. Disadvantage: It does not support lower version browsers, and only supports IE9 at the minimum; Not conducive to SEO optimization (if you want to support SEO, it is recommended to use the server to render components); The first time loading the homepage takes a relatively long time; You cannot use the browser's navigation buttons and need to implement forward and backward actions yourself.
How to define dynamic routing for vue router? How to obtain the value passed in Answer: In the index.js file in the router directory, add/: id to the path attribute and use the params. id of the router object to obtain it. During Vue interviews, frequently asked interview questions/Vue knowledge points are organized
front-end real factory interview questions Learning ES6 Notes - ES6 Grammar Commonly Used in Work