Recently, I have paid attention to the front-end interview questions and I can share them with you. If some explanations are not comprehensive or wrong, I can correct them and communicate.
Question 1: Vue Responsive Principle
1. The data attribute is converted into a getter, setter and records the corresponding dependencies, and the corresponding dependencies will be notified when they change
2. Each component instance has a corresponding watcher instance, and the watcher instance will depend on the corresponding setter
3. When the data changes, the setter will be called, the setter will notify the corresponding watcher, and the corresponding watcher will update the view
Question 2: What is the principle of v-model two-way binding
Answer: The principle of v-model two-way binding is mainly realized through data hijacking and vue publish subscriber mode
The main reason is that the implementation of two-way binding mainly depends on Object.defineProperty(). Through this function, all properties can be hijacked. In dep, when the data changes, the watcher will be notified, and the watcher will update the view.
Publish subscriber mode, for example, you go to the bookstore to buy a book, but the book is gone, but you can leave a phone number, wait until the book arrives to notify you, then the customer who leaves the phone number is a subscriber, and the bookstore will reserve the phone number when the book arrives The people in the booklet will be notified one by one, this is the publisher mode
Question 3: Why does v-for need to add a key
Answer: v-forWhen updating the rendered element list, the default 就地复用strategy is used; when the list data is modified, it will judge whether a value is modified according to the key value. If it is modified, the item will be re-rendered, otherwise the previous element will be reused. ;
https://www.jianshu.com/p/4bd5e745ce95 This article is very good
Problem 3: Text out of bounds omitted
//单行显示
overflow : hidden;
text-overflow : elipsis;
write-space :nowrap;
width : 100px;
//多行显示
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;Question 4: The difference between vue computer and watch
answer:
Computed property computed:
1. Support caching, only when the dependent data changes, the calculation will be recalculated
2. Asynchronous is not supported, it is invalid when there are asynchronous operations in computed, and cannot monitor data changes
3.Computed attribute values will be cached by default, and computed attributes are cached based on their responsive dependencies, that is, calculated based on the data declared in data
4. If an attribute is calculated by other attributes, this attribute depends on other attributes, it is a many-to-one or one-to-one, generally computed
5. If the computed attribute value is a function, then the get method will be used by default; the return value of the function is the attribute value of the attribute; in computed, the attribute has a get and a set method, and when the data changes, the set method is called .
Listening property watch:
1. Caching is not supported, and data changes will directly trigger corresponding operations;
2. watch supports asynchronous;
3. The monitoring function receives two parameters, the first parameter is the latest value; the second parameter is the value before input;
4. When an attribute changes, the corresponding operation needs to be performed; one-to-many;
5. There are two methods in it:
immediate: true
表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
deep: true
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。Question 5: Why is the data in vue a function not an object
If two instances refer to the same object, when the properties of one instance change, the properties of the other instance will also change. Only when the two instances have their own scope will they not interfere with each other. This is due to the characteristics of JavaScript. In a component, data must exist in the form of a function, not an object. The data in the build is written as a function, and the data is defined in the form of the return value of the function, so that every time the component is reused, a new data will be returned, which means that each component instance has its own private data space, and they only Be responsible for the data they maintain without causing confusion. And simply written in the form of an object, that is, all component instances share the same data, so changing one will change all.
Question 6: The method of v-router routing jump
<router-link :to="{name: '路有名'}"></router-link>
<router-link :to="{path: '路有路径'}"></router-link>
2. query传参
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
3. params传参
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失Question 7: What are inline and block elements, and where is the difference
answer:
HTML block elements occupy a single line and can be sized. Margin and padding properties can be set
HTML block elements do not occupy a single line and cannot be controlled in size. Only the left and right properties of margin and padding can be set
Question 8: What are the methods to clear the float
The four most commonly used methods of clearing floats, as well as their advantages and disadvantages
Question 9: How to understand js this
How to understand the problem pointed to by this in JS - Tutupipi - 博客园
Question 10: What is the difference between primitive types and reference types
1. Primitive data types include: Number.String. Boolean. Null. Undefine.
2. Reference data types include: Object.
Array. Belongs to frequently used data. Reference data types are stored in the heap, which takes up a large space and is not fixed in size.
4. Different ways of passing values: basic data types are passed by value, and the value of a basic data type cannot be changed. Reference data type: passed by reference, the value of the reference type can be changed.
5.1 The difference between Number (2) and
Number (1) is the basic data type, and Number (1) is the packaging object type.
Question 11: How to deep clone an object
Question 12: Are promises synchronous or asynchronous?
promiss is synchronous, its then and catch methods are asynchronous
Question 13: Event Loop
Event Loop_Wangzai Little Fist I Blog-CSDN Blog_Event Loop
The event loop includes
synchronous tasks: executed on the main thread
Asynchronous tasks: now execute in the task queue (divided into macro tasks and micro tasks)
Macro tasks: stript (whole code), setTimeOut, setInterval, I/O, UI interaction, setImmdiate
Microtasks: Promise's then, catch, finally and process's nextTick are all microtasks
If promise and nextTick exist at the same time, execute nextTick first
Sync Tasks > Microtasks > Macrotasks
Question 14: How to prevent bubbling
Event bubbling:
From the most specific element to the less specific (inside out)
When the sub-element (event source) event is triggered, the event will be passed along the containment relationship to the upper level in turn, and each level can perceive the event until the root element (root) is triggered
Method 1: Add event.stopPropagation() to the corresponding function
Method 2: Determine whether event.target and event.currentTarget are equal
event.target: refers to the element that actually triggers the event
event.currentTarget: Refers to the element that is bound to the event listener (the parent element that triggers the event element)
At this time, it is judged that the two are equal, and the corresponding processing function is executed; when the event bubbles to the upper level, event.currentTarget becomes the upper level element, and at this time, it is judged that the two are not equal, and no response processing logic is performed.
Method 3: event.preventDefault() During the event processing, the event bubbling is not blocked, but the default behavior is blocked (it only executes all pop-up boxes, but does not execute hyperlink jumps)
Question 15: The difference between arrow functions and ordinary functions
Arrow function
1. When there is only one parameter, the parameter does not need to add parentheses. If there are no parameters or 2 or more parameters, parentheses must be added. 2. When there is only one return statement, you can omit {}
and return, and it will automatically If you add return, you must add {} and return when returning multiple statements.
3. When the arrow function returns an object, you must add parentheses outside the object.
The difference between the this point of the arrow function and the ordinary function
1. The this point of the ordinary function:
points to its caller. If there is no caller, it points to the window by default.
2. The point of the arrow function:
points to the object where the arrow function is defined, instead of The object it is in when it is used, points to the parent's this by default
To sum up: the arrow function does not have its own this, its this is inherited, and it points to the object it is in when it is defined by default
The difference between arrow functions and ordinary functions
1. Arrow functions are anonymous functions, and ordinary functions can be anonymous functions or named functions.
2. Arrow functions cannot be used as constructors, and the new keyword cannot be used.
3. Arrow functions have no prototype, that is, no The prototype attribute
4, call, apply, and bind cannot change the this point of the arrow function, but can change the this point of the ordinary function
5. The arrow function does not have an arguments object. If there is an outer function, the argument of the outer function is inherited. Yes, no The outer function will report an error, and the arrow function uses the rest parameter (the form is: ...rest)
6. The arrow function does not have a Generator, and the yield keyword cannot be used.
7. The arrow function does not have its own
link to this original text: https://blog. csdn.net/weixin_42178670/article/details/123966265
Regarding the actual example of this pointing to the problem, this article has introduced it very clearly
Question 15: NextTick usage and principle
1. nextTick is a method to wait for the next DOM update refresh
2. Vue has an asynchronous update strategy, which means that if the data changes, Vue will not update the DOM immediately, but will open a queue and save the component update function in the queue. All data changes that occur in the same event loop will be asynchronous Batch updates. This strategy causes our modification of the data to not be immediately reflected on the DOM. At this time, if you want to get the updated DOM state, you need to use nextTick
3. During development, there are two scenarios where we will use nextTick
- When you want to get the DOM in created
- Obtain the updated state of the DOM after the responsive data changes, such as the updated height of the hoped-to list.