After graduation, I have been working in a small company in Hefei. There are no old drivers and no technical atmosphere, so I have to explore the road of technology alone. The boss will only draw a cake to satisfy hunger, the future a confused see no hope. As a result, I resolutely resign, in the New Year at the start of the occasion came to Hangzhou, the Internet companies here should be dozens of times hefei… In the first three days, I interviewed several companies. Some are small, some are startups, and some have already developed well. Today, I will make a summary of the recent interview topics and make a copy for myself. Since MY technical stack is mainly Vue, most of the topics are related to Vue development.

1. Talk about your understanding of the MVVM development model

MVVM is divided into Model, View and ViewModel. Model stands for data Model, where both data and business logic are defined; View represents the UI View, responsible for the display of data; ViewModel is responsible for monitoring data changes in the Model and controlling the update of the view, and handling user interaction operations; The Model and View are not directly related, but through the ViewModel to be connected, Model and ViewModel have two-way data binding relationship. So when data changes in the Model, it triggers a refresh of the View layer, and data changes in the View due to user interactions are synchronized in the Model. This mode automatically synchronizes the data between the Model and View, so developers can only focus on the maintenance of the data instead of manipulating the DOM themselves.

2. What are the commands of Vue?

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

3. What’s the difference between V-if and V-show?

V-show controls only how elements are displayed, switching the display attribute back and forth between block and None; V-if controls the presence or absence of the DOM node. When we need to switch the show/hide of an element frequently, using V-show is more cost-effective in terms of performance; Using V-if makes more sense when you only need to show or hide once.

4. Briefly describe the responsivity principle of Vue

When a Vue instance is created, Vue iterates over the properties of the data option, turning them into getters/setters with Object.defineProperty and internally tracking the dependencies, notifying the properties of changes when they are accessed and modified. Each component instance has a corresponding Watcher program instance, which records properties as dependencies during component rendering and then, when setters for dependencies are called, tells Watcher to recalculate, causing its associated components to be updated.

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

The parent component uses $emit to send the props value to the child component, and the child component uses $emit to notify the parent component to modify the props value.

import Vue from 'vue' const component = { props: ['value'], template: ` <div> <input type="text" @input="handleInput" :value="value"> </div> `, data () { return { } }, methods: { handleInput (e) { this.$emit('input', e.target.value) } } } new Vue({ components: { CompOne: component }, el: '#root', template: ` <div> <comp-one :value1="value" @input="value = arguments[0]"></comp-one> </div> `, data () { return { value: '123'}}})Copy the code

As you can see, the data in the parent component changes synchronously as the data is entered:

We do two things in the parent component, pass props to the child component, and listen for the input event and synchronize its value property. So can these two steps be simplified? The answer is yes, you just need to modify the parent component:

template: ` <div> <! --<comp-one :value1="value" @input="value = arguments[0]"></comp-one>--> <comp-one v-model="value"></comp-one> </div> `Copy the code

The V-Model will actually do the above two steps for us.

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

For example, we now need to monitor changes in obj.A in data. To monitor object property changes in Vue, you can do this:

watch: {
      obj: {
      handler (newValue, oldValue) {
        console.log('obj changed')
      },
      deep: true
    }
  }
Copy the code

The deep property represents a deep traversal, but this will monitor all property changes in obj, which is not what we want, so we need to modify it:

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

Another way to do this, with computed, is to:

computed: {
    a1 () {
      return this.obj.a
    }
}
Copy the code

This is implemented by taking advantage of the nature of computed properties, where a new value is recalculated when a dependency changes.

7. What happens when a new attribute is added to an object attribute in data in Vue? How to solve this problem?

Example:

<template> <div> <ul> <li v-for="value in obj" :key="value"> {{value}} </li> </ul> <button @click="addObjB"> add obj. B </button> </div> </template> <script> export default {data () {return {obj: {a: 'obj.a' } } }, methods: { addObjB () { this.obj.b = 'obj.b' console.log(this.obj) } } } </script> <style></style>Copy the code

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

$set(); $set(); $set(); $set();

addObjB () {
      // this.obj.b = 'obj.b'
      this.$set(this.obj, 'b', 'obj.b')
      console.log(this.obj)
    }
Copy the code

The $set() method manually handles obj.b as a responsive property, and the view changes as well: \

8. Delete and vue. delete delete the difference between arrays

Delete simply changes the deleted element to empty/undefined and the other elements’ keys remain the same. Vue.delete directly deletes the array and changes its key value.

Var a=[1,2,3,4] var b=[1,2,3,4] delete a[1] console.log(a) this.$delete(b,1) console.log(b)Copy the code

9. How to optimize the slow loading speed of SPA app’s first screen?

  • To reduce the size of app.bundel, let the browser download resource files in parallel, improve the download speed;
  • When routing is configured, pages and components are introduced in a lazy way to further reduce the size of app.bundel, and the corresponding JS file is loaded when a component is called.
  • Add a front-screen loading diagram to improve user experience;

10. How to optimize the site performance at the front end?

  1. Reduce the number of HTTP requests

When the browser communicates with the server, it communicates primarily through HTTP. There are three handshakes between the browser and the server, and each handshake takes a lot of time. In addition, different browsers have limited number of concurrent requests for resource files (different browsers allow concurrent requests). Once the number of HTTP requests reaches a certain number, there will be a waiting state for resource requests, which is very fatal. Therefore, reducing the number of HTTP requests can greatly optimize website performance.

  • CSS Sprites: Commonly known as CSS Sprites in China, this is a solution to reduce HTTP requests by combining multiple images into one image. You can access image content through CSS background properties. This scheme also reduces the total number of bytes in the image.

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

  • Using lazyLoad: commonly known as lazy loading, you can control the content on the web page in the beginning without loading, do not need to send requests, wait until the user operation really need to load the content immediately. This controls the number of one-time requests for web resources.

  1. Controls the loading priority of resource files

When the browser loads THE HTML content, it parses the HTML content from top to bottom. When it parses the link or script tag, it will load the corresponding link content of href or SRC. In order to display the page to the user in the first time, it needs to load the CSS in advance and not be affected by JS loading. In general, CSS is at the top and JS is at the bottom.

  1. Using browser Cache Browser cache is used to store network resources locally and wait for the next request for the resources. If the resources already exist, the server does not need to request the resources again and directly reads the resources locally.
  2. Reflow Reduction principle: Rearrangement is when changes to the DOM affect the geometry of the element (width and height). The browser recalculates the geometry of the element, invalidating the affected part of the rendering tree. The browser validates the visibility property of all other nodes in the DOM tree, which is why Reflow is inefficient. If Reflow is too frequent, CPU usage will rise sharply.

Reduce Reflow, and if you need to add styles during DOM manipulation, use the add class attribute instead of manipulating styles via style.

  1. Reduce DOM manipulation
  2. Replace ICONS with IconFont

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

It can be roughly divided into the following 7 steps:

  1. Enter the url;
  2. Send the IP address to the DNS server and obtain the IP address of the Web server corresponding to the domain name.
  3. Establish TCP connection with web server.
  4. The browser sends an HTTP request to the Web server;
  5. The Web server responds to the request and returns data (or an error message, or a redirected new URL address) for the specified URL;
  6. The browser downloads the data returned by the Web server and parses the HTML source file.
  7. Generate DOM trees, parse CSS and JS, render the page until the display is complete;

12. JQuery obtainedDom objectHow are they different from native DOM objects?

The DOM obtained by JS is an object, and the jQuery object is an array object. In fact, it is an array collection of selected elements, so they are different object types and not equivalent.

  • Native DOM object to jQuery object:
var box = document.getElementById('box');
var $box = $(box);
Copy the code
  • JQuery object to native DOM object:
var $box = $('#box');
var box = $box[0];
Copy the code

13. How does jQuery extend custom methods

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

Use:

$("#div").myMethod();
Copy the code

At present, the company interview questions are relatively basic, but for some students who only pursue knowledge and do not study its principles may not be so easy. Therefore, we should not only pursue the breadth of learning, but also pursue the depth.

OK, I hope I can get the desired offer as soon as possible.

Human authentication – SegmentFault