Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the Vue interview questions in the front end". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what are the Vue interview questions in the front end"?

1. Talk about your understanding of the MVVM development model.

MVVM is divided into Model, View and ViewModel.

Model represents the data model, and the data and business logic are defined in the Model layer

View represents the UI view and is responsible for the presentation of data

ViewModel is responsible for monitoring data changes in Model and controlling view updates, dealing with user interaction.

Model and View are not directly related, but are connected through ViewModel. There is a two-way data binding relationship between Model and ViewModel. Therefore, when the data in Model changes, the refresh of the View layer will be triggered, and the data changed in View due to user interaction will also be synchronized in Model.

This mode enables automatic data synchronization between Model and View, so developers only need to focus on the maintenance of data, rather than operating dom themselves.

2. What are the instructions of Vue?

V-html, v-show, v-if, v-for, etc

3. What's the difference between v-if and v-show?

V-show simply controls how the element is displayed, switching the display attribute back and forth between block and none, while v-if controls whether the DOM node exists or not. When we often need to switch the show / hide of an element, using v-show will save more performance overhead; when we only need to show or hide once, it makes more sense to use v-if.

4. A brief introduction to the responsive principle of Vue

When a Vue instance is created, vue traverses the properties of the data option, converts them to getter/setter with Object.defineProperty, and tracks related dependencies internally, notifying them of changes when the properties are accessed and modified.

Each component instance has a corresponding watcher program instance, which records the properties as dependencies during component rendering, and then when the setter of the dependency is called, it notifies watcher to recalculate, causing its associated components to be updated.

5. How to implement a two-way data binding within a component in Vue?

Suppose there is an input box component that synchronizes the data in the parent component page when the user enters it

Specific idea: the parent component passes the value to the child component through props, and the child component notifies the parent component to modify the corresponding props value through $emit. The specific implementation is as follows:

Import Vue from 'vue' const component = {props: [' value'], template: ``, data () {return {}}, methods: {handleInput (e) {this.$emit ('input', e.target.value)} new Vue ({components: {CompOne: component}) El:'# root', template: ``, data () {return {value: '123'}})

As you can see, when you enter data, the data in the parent and child components changes synchronously:

We do two things in the parent component, one is to pass props to the child component, and the other is to listen for input events and synchronize our own value properties. So can these two steps be further streamlined? The answer is yes, you just need to modify the parent component:

Template: ``

V-model will actually help us with the above two steps.

6. How to monitor the change of an attribute value in Vue?

For example, now you need to monitor the changes in obj.an in data. To monitor changes in object properties in Vue, you can do this:

Watch: {obj: {handler (newValue, oldValue) {console.log ('obj changed')}, deep: true}}

The deep attribute represents a deep traversal, but writing this will monitor all property changes of the obj, which is not what we want, so make some changes:

Watch: {'obj.a': {handler (newName, oldName) {console.log (' obj.a changed')}

There is another way to do this through computed, just:

Computed: {A1 () {return this.obj.a}}

Using the properties of the computed property, when the dependency changes, a new value is recalculated.

7. What happens when you add a new property to an object property in data in Vue, and how do you solve it?

Example:

{{value}} add obj.b export default {data () {return {obj: {a: 'obj.a'}, methods: {addObjB () {this.obj.b =' obj.b' console.log (this.obj)}

Click button to find that the obj.b has been successfully added, but the view has not been refreshed:

The reason is that when the Vue instance is created, the obj.b is not declared, so it is not converted into a responsive property by Vue, and the view update will not be triggered naturally. In this case, you need to use the global api $set () of Vue:

AddObjB () {/ / this.obj.b = 'obj.b' this.$set (this.obj,' baked, 'obj.b') console.log (this.obj)}

The $set () method is equivalent to manually processing the obj.b as a responsive property, and the view changes as well:

8. The difference between delete and Vue.delete delete array

Delete is just that the deleted element becomes the key value of other empty/undefined elements or remains the same.

Vue.delete deletes the array directly and changes the key value of the array.

Var a = [1 this.$delete 2 this.$delete 3 console.log 4] delete a [1] console.log (a) console.log (b)

9. How to optimize the slow loading speed of the first screen of SPA applications?

The common JS library is introduced outside the script tag to reduce the size of app.bundel, let the browser download resource files in parallel, and improve the download speed.

When routing is configured, pages and components are introduced by lazy loading to further reduce the size of the app.bundel and load the corresponding js file when a component is called

Add a loading picture on the first screen to enhance the user experience

10. How does the front end optimize the performance of the website?

1. Reduce the number of HTTP requests

When the browser communicates with the server, it mainly communicates through HTTP. The browser and the server need to shake hands three times, and each handshake takes a lot of time. And the number of concurrent requests for resource files by different browsers is limited (different browsers allow concurrent requests). Once the number of HTTP requests reaches a certain number, resource requests will be in a waiting state, which is very fatal, so reducing the number of HTTP requests can greatly optimize the performance of the website.

CSS Sprites: commonly known as CSS wizard in China, this is a solution to reduce HTTP requests by merging multiple images into one image. The image content can be accessed through the CSS background attribute. This scheme can also reduce the total number of bytes of the picture.

Merge CSS and JS files: there are many engineering packaging tools at the front end, such as grunt, gulp, webpack and so on. To reduce the number of HTTP requests, you can use these tools to merge multiple CSS or multiple JS into a single file before republishing.

Using lazyLoad: commonly known as lazy loading, you can control the content on the web page without loading or making a request at the beginning, and load the content immediately when the user operation really needs it. This controls the number of one-time requests for web resources.

1. Control the priority of loading resource files

When loading HTML content, the browser parses the HTML content from top to bottom. When parsing to the link or script tag, the href or src corresponding link content will be loaded. In order to * display the page to the user, you need to load the CSS in advance and not be affected by JS loading.

Normally, CSS is at the head and JS is at the bottom.

1. Make use of browser cache

The browser cache stores the network resource locally and waits for the next request for the resource. If the resource already exists, there is no need to re-request the resource to the server and read the resource locally.

two。 Reduce rearrangement (Reflow)

The basic principle: the rearrangement is that the change of DOM affects the geometric attributes (width and height) of the element, the browser will recalculate the geometric attributes of the element, which will invalidate the affected part of the render tree, and the browser will verify the visibility attributes of all other nodes on the DOM tree, which is also the reason for the inefficiency of Reflow. If Reflow is too frequent, CPU usage will rise sharply.

Reduce Reflow, and if you need to add styles during DOM operations, try to increase the class attribute instead of manipulating styles through style.

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Reduce DOM operation

Icons are replaced with IconFont

11. What process does the web page go through from entering the URL to rendering?

It can be roughly divided into the following seven steps:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Enter the URL

Send it to the DNS server and get the ip address of the web server corresponding to the domain name

Establish a TCP connection with the web server

The browser sends a http request to the web server

The web server responds to the request and returns data for the specified url (or error message, or redirected new url address)

Browser downloads the data returned by the web server and parses the html source file

Generate DOM tree, parse css and js, render the page until the display is complete

12. What is the difference between the dom object acquired by jQuery and the native dom object?

The dom obtained natively by js is an object, and the jQuery object is an array object, which is actually an array collection of selected elements, so they are different object types and are not equivalent.

Native DOM objects are converted to jQuery objects:

Var box = document.getElementById ('box'); var $box = $(box)

JQuery objects are converted to native DOM objects:

Var $box = $('# box'); var box = $box [0]

13. How jQuery extends custom methods

(jQuery.fn.myMethod=function () {alert ('myMethod');}) / / or: (function ($) {$.fn.extend ({myMethod: function () {alert (' myMethod');}})}) (jQuery)

Use:

$("# div"). MyMethod (); at this point, I believe you have a deeper understanding of "what are the Vue interview questions in the front end?" 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.