Front-end interview question 2 (continuously updated)

What is webpack? What is its function? What is the default entry file?

What is webpack?

• At the beginning of the birth of webpack, it mainly wanted to solve the problem of code splitting.
• webpack is a static module bundler  for modern JavaScript applications .

What is the role?

Code conversion, file optimization, code splitting, module merging, automatic refresh, code verification, automatic release

• module packaging. The files of different modules can be packaged and integrated, and the references between them can be guaranteed to be correct and executed in order. Use packaging to ensure the clarity and readability of our project structure.
• compile compatible. In the past, we always had to write a bunch of browser-compatible codes by hand, which made people's scalp tingle, but today this problem has been greatly weakened. Through the mechanism, the code webpackcan Loaderbe compiled polyfilland converted.less, .vue, .jsx . Files in a format that browsers cannot recognize allow us to use new features and new grammars during development to improve development efficiency.
• Capability expansion. Through webpackthe mechanism, we can further realize a series of functions such as on-demand loading and code compressionPlugin on the basis of realizing modular packaging and compiling compatibility , helping us to further improve the degree of automation, engineering efficiency and the quality of packaging output.

What is the default entry file?

The default entry file of webpack is  src/index.jsthat we can  modify the entry file by webpack.config.jsconfiguring properties in it  .entry

module.exports = {
     
     
    entry: './public/index.js'
}

#默认入口文件
 ./src/index.js
#默认出口文件
./dist/main.js

What is the webpack packaging command? Where does the packaged file exist by default?

• package commandnpm run build

(This command will tell webpackthe packaging tool to execute the script of the object package.jsoninside , that is to say, what is actually executed ).scriptsbuildwebpack --config webpack.prod.js

• Packaged files exist by default:根路径/dist/main.js

What are the loaders of webpack? What is the function? What is the function of babel?

What are the loaders of webpack? And their functions

In the process of page development, we often load content other than js files. At this time, we need to configure the response loader to load

Common loaders are as follows:

• style-loader: add css to the inline style tag style of DOM
• css-loader : allows css files to be introduced through require and returns css code
• less-loader: handle less
• sass-loader: handle sass
• postcss-loader: use postcss to process CSS files
• autoprefixer-loader: Handle CSS3 attribute prefixes, which has been deprecated, it is recommended to use postcss directly
• file-loader: Distribute files to output directory and return relative path
• url-loader: Similar to file-loader, but can return a Data Url when the file is smaller than the set limit
• html-minify-loader: Minify HTML
• babel-loader: Use babel to convert ES6 files to ES5

What is the role of babel?

Babel is a node command line tool that converts es6 syntax into es5 syntax that browsers can parse

What are the plugins of webpack (HtmlWebpackPlugin and webpack-dev-server)? What are their functions?

common plugins

BannerPlugin: Add a banner at the top of each generated chunk

CopyWebpackPlugin: copy a single file or an entire directory into the build directory

DefinePlugin: Allows global variables to be configured at compile time

ContextReplacementPlugin: Override the inference context of the requier expression

IgnorePlugin: Exclude certain modules from the bundle

HtmlWebpackPluginwebpack-dev-serverWhat is the role of and ?

The role of HtmlWebpackPlugin : simply create HTML files for server access

The role of webpack-dev-server :

• webpack-dev-server is a small node.js Express server officially provided by webpack. Use it to provide web services for resource files generated by webpack packaging
• **Mainly provide two functions:** Serve static files, automatic refresh and hot replacement

Request forwarding is realized by configuring the proxy, that is, when the domain name of the interface changes, we do not need to modify the interfaces one by one, just modify the domain name of the configuration item.

By configuring historyFallback to true, the problem of not being able to request a page is solved. If you access an address other than the root path, you will eventually turn to request the root path.

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-QFxRB6Am-1657025508557)(https://segmentfault.com/img/remote/1460000018695137/view?w=1392&h =1724)]

What is a Progressive Framework? What are the advantages?

Vue is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up .

• ==What is a progressive framework: ==It is the functional features that we want to use or can use, and some functions that we don't want to use can be used first. VUE does not force us to accept and use all its features at once.
• advantage:When the scale of our project gradually becomes larger, we may gradually use front-end routing, vuex, centralized state management, and finally realize a highly engineered front-end project . We can gradually introduce these functional features , and of course we don’t need them.

What is front-end engineering? What are the benefits?

Front-end engineering refers to: in the development of enterprise-level front-end projects, standardize and standardize the tools, technologies, processes, and experience required for front-end development. Finally, when it comes to the details, it is to realize the "four modernizations" of the front end: modularization, componentization, standardization, and automation.

The benefits of front-end engineering are mainly reflected in the following two aspects:

① Front-end engineering enables front-end development to be "self-contained", covering all aspects of front-end projects from creation to deployment. ( Greatly improve development efficiency )

② Maximize the development efficiency of the front-end, and reduce the coordination and communication costs brought about by technology selection, front-end and back-end joint debugging, etc. ( Reduce the development difficulty of large projects )

What are the advantages and disadvantages of single page applications? How can the disadvantages be solved?

Single page application:

A single-page application confines all activities to one web page, and only loads the corresponding HTML, JavaScript, and CSS when the web page is initialized. Once the page load is complete, SPA will not reload or jump the page due to user actions. Instead, JavaScript is used to dynamically change the content of HTML, so as to realize the interaction between UI and users. By avoiding page reloads, SPAs can provide a smoother user experience.

advantage:

1. The user experience is good and fast, and content changes do not require reloading the entire page
2. Good separation mode of front-end and back-end work
3. Reduce server pressure
4. The immediacy of a desktop app, the portability and accessibility of a website

shortcoming:

1. The first screen loads slowly

   Solution:

   • Vue-router lazy loading
   • Load components asynchronously
   • server-side rendering
   • Accelerate with CDN

2. Bad for SEO

   Solution:

   • server-side rendering
   • Routing adopts h5 history mode
   • page pre-rendering

3. Not suitable for developing large projects

What is the MVVM pattern? What is the MVC pattern?

MVVM pattern

The MVVM pattern is a software architectural pattern, which is the abbreviation of (Model-View-ViewModel). Its core is VM, which is the bridge between the view and the model, and it realizes the mutual mapping between the view and the model.

In MVVM , changes to the model cause changes to the view, and changes to the view cause changes to the model.

MVC pattern

The MVC pattern is a paradigm of software design, a method of organizing code.

M 是 model 模型
V 是 view 视图
C 是 control 控制器

Controllers are used to organize different views and different models together.

What will happen if the key uses an index

key值用index可能会造成数据错乱

Under what circumstances, the data of the array or object is changed, and the view is not updated? What is the solution? (2 types)

The mechanism of vue to realize two-way data binding is data hijacking, that is, there is an Object.defineProperty() method on all objects, which is realized by listening to the set and get methods, and the array does not have these two methods, so the view will not be updated .

1.使用 $set() 方法手动设置;

	$set(targetObj,key,value)//接受三个参数,(目标对象,属性名/index,属性值)
	eg:$set(list,0,'aaa')//把数组第0项修改为'aaa'
	
2.使用 $forceUpdate() 方法强制更新;	

	eg: list[0]='aaa';
		$forceUpdate()

Vue can monitor the method of array changes:

push() - pop() - shift() - unshift() - splice() - sort() - reverse()

What is virtual DOM? How does the diff algorithm compare the old and new virtual DOM (starting from the root element)?

Virtual DOMIt is an ordinary JavaScript object, which contains three properties tag: , props, and children.The essence is the JS object that saves the key information of DOM

What are the benefits of virtual DOM?

1. Improve the performance of DOM update, operate the real DOM infrequently, find the changed part in memory, and then update the real DOM (patch)

How does the diff algorithm compare the old and new virtual DOM?

• peer comparison
• If the root element changes: delete and rebuild the entire DOM tree
• The root element has not changed, but the attributes have changed: DOM reuse, only update attributes
• The root element has not changed, but the content of the child elements has changed: 1. No key - update in place 2. Key - compare by key

What is the key value of v-for? What is its function? Using index for key may cause data confusion

pay attention to: The value of the key attribute in v-for should be unique, use id if there is an id, and use an index if there is no id

benefit: It can cooperate with virtual DOM to improve update performance, play the role of identity authentication, and avoid problems caused by v-for "in-place update" strategy.

The function of key is mainly to compare whether each node in the virtual DOM is the same node more efficiently;

Official statement: The key in v-for is mainly used in Vue's virtual DOM algorithm to identify VNodes when comparing old and new nodes. If no key is used , Vue uses an algorithm that minimizes dynamic elements and tries to modify/reuse elements of the same type in-place as much as possible. When using key , it will rearrange the order of elements based on the change of key, and will remove elements whose key does not exist.
Child elements with the same parent must have unique keys. Duplicate keys will cause rendering errors.

What is the essence of v-model?

v-model Essentially nothing more than syntactic sugar. It is responsible for listening to user input events to update data, and doing some special processing for some extreme scenarios.

Syntactic sugar is simply a convenient way of writing,

v-model="foo" 等价于 :value="foo" 加上 @input="foo = $event"


:value='num' 和 @input="num = $event.target.value"

v-model is not only syntactic sugar but also has certain side effects

The side effects are as follows: if v-model is bound to a property that does not exist on the responsive object, then vue will quietly increase this property and make it responsive.

v-model="foo" 等价于 :value="foo" 加上 @input="foo = $event"


:value='num' 和 @input="num = $event.target.value"

v-model is not only syntactic sugar but also has certain side effects

The side effects are as follows: if v-model is bound to a property that does not exist on the responsive object, then vue will quietly increase this property and make it responsive.

v-modelIt is a one-way data flow: the child component cannot change  prop the properties passed to it by the parent component. The recommended method is that it throws an event to notify the parent component to change the bound value by itself.