1. The role of key value in Vue
- 1. When vue is rendering, it will first compare the new DOM with the old DOM. If the dom structure is consistent, vue will reuse the old dom. (At this time, data rendering may be abnormal)
- 2. Use key to add a unique identifier to dom, let vue force update dom
2. Vue component pass value
father to son
- 1. Subcomponent props defines variables
- 2. When the parent component uses the child component, pass the value to the props variable through the inline attribute
- Features: One-way data flow
child's father
- 1. Subcomponent: $emit triggers the parent's event
- 2. The parent is using the component to use @custom event name = parent's method (the child brings the value out)
- Features: event monitoring
non-parent-child component
- vuex EventBus (just understand)
3. [Required] How many stages is the vue life cycle divided into?
Core: 8 hook functions in four stages
The process of a Vue instance from creation to destruction is the life cycle. That is, a series of processes from the beginning to create, initialize data, compile templates , mount Dom→render, update→render, uninstall, etc. We call this the life cycle of Vue.
1**）beforeCreate**
Called after instance initialization, before data observer and event/watcher event configuration.
2**）created**
Called immediately after the instance is created. In this step, the instance has completed the following configurations: data observer, operation of attributes and methods, and watch/event event callback. However, the mount phase has not yet started and the $el property is not currently visible.
3**）beforeMount**
Called before the mount starts: the associated render function is called for the first time.
4**）mounted**
This hook is called after el is replaced by the newly created vm.$el and mounted to the instance. If the root instance mounts an in-document element, vm.$el is also in-document when mounted is called.
5**）beforeUpdate**
Called when the data is updated, before the virtual DOM is patched. This is suitable for accessing the existing DOM before updating, such as manually removing the added event listener . This hook is not called during server-side rendering, because only the initial rendering will be done on the server-side.
6**）updated**
This hook is called after virtual DOM re-renders and patches due to data changes.
7**）activated**
Called when the keep-alive component is active. This hook is not called during server-side rendering.
8**）deactivated**
Called when the keep-alive component is disabled. This hook is not called during server-side rendering.
9**）beforeDestroy**
Called before the instance is destroyed. At this step, the instance is still fully available. This hook is not called during server-side rendering.
10**）destroyed**
Called after the Vue instance is destroyed. After calling, everything pointed to by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed. This hook is not called during server-side rendering.
11* *) errorCaptured (new in 2.5.0+)**
Called when catching an error from a descendant component. This hook receives three parameters: the error object, the component instance where the error occurred, and a string containing information about the source of the error. This hook can return false to prevent the error from propagating further upwards.
4. [Required] Which hook functions will be triggered when the page is loaded for the first time ?
- four hooks
- beforeCreate,
- created,
- beforeMount,
- mounted these hook functions
5. [Required] Vue's routing implementation mode: hash mode and history mode
1. There is # in the hash of different paths
, but there is no # in history
2. Different working modes
hash: modify the hash of the current page, no additional server
configuration is required
- 1. Hash mode: In the browser, the symbol "#", # and the characters after # are called hash, read with window.location.hash. Features: Although the hash is in the URL, it is not included in the HTTP request; it is used to guide the browser's actions, and is useless for server-side security, and the hash will not reload the page.
- 2. History mode: history adopts the new features of HTML5; and provides two new methods: pushState(), replaceState() can modify the browser history stack, and listen to the state change of the popState event
6. [Required] Please tell us the common attributes and functions of routing configuration items
- Routing configuration parameters:
- path : jump path
- component : the component the path is relative to
- name: named route
- children: Configuration parameters of child routes (route nesting)
- props: routing decoupling
- redirect : redirect route
7. [Required] Tell me about the pits you have stepped on in vue
- 1 Operate the data in data and find that there is no response
- Reason: There are many methods in the array, some will change the array (such as pop push), and some will not change the array (such as slice, filter)
- Solution: It can be achieved by Vue.set (object, attribute, value), and the newly added attribute of the object is responsive
- 2. When created operates the dom, an error is reported, and the dom cannot be obtained. At this time, the instance vue instance is not mounted
- Solution: Vue.nextTick ( callback function to get
- 3. Others can be used freely, as long as they are not too low-level (for example, wrong words, wrong code positions, these are low-level problems. You can talk about other things, don’t talk about these two)
[Bonus points] What is the principle of Vue's nextTick?
- 1 Why do you need nextTick
- Vue modifies the DOM asynchronously and does not encourage developers to touch the DOM directly, but sometimes the business needs to do corresponding processing on the data change-the refreshed DOM. At this time, you can use the Vue.nextTick(callback) api.
- 2. Knowledge reserve (you can not say it, but you need to know it to prevent accidents)
- The two concepts of macro task and micro task in the event loop
- Common macro tasks include script, setTimeout, setInterval, setImmediate (a timer that executes more frequently)
- Common microtasks are, Promise.then(), async
- 3. Final answer:
- The principle of nextTick is
vue 通过异步队列控制 DOM 更新 nextTick底层是promise，所以是微任务。这个一定要知道- (official language) : The way nextTick callback functions are executed successively. If you have read the source code of this part, you will find that a lot of isNative() judgments are made in it, because there is still a problem of graceful degradation of compatibility. It can be seen that the Vue development team's deliberation and hard work on performance.
- The principle of nextTick is
- 4. Small science popularization: In fact, when the version of vue is updated. Sometimes nextTick is packaged as a macro task, and sometimes nextTick is packaged as a micro task. But currently the latest version of vue2 ,
nextTick底层是微任务- Extracurricular reading nextTick source code: https://juejin.cn/post/6875492931726376974
[Bonus points] v-slot slot and scope slot
- 1. Slot function: the parent component is passed
html结构to the child component - 2. The role of named slot: the parent component is passed
多个html结构to the child component - 3. Scope slot function: When the parent component passes the slot to the child component, the data inside the child component can be used
[Bonus points] Function and principle of vue routing
- Routing role: to achieve a single page application
- Principle: monitor the hash value of location
[Bonus points] What are the methods of customizing instructions? What hook functions does it have? What other hook function parameters?
- Global definition directive: There are two parameters in the directive method of the vue object, one is the directive name, and the other is the function. Define directives in components: directives
- Hook functions: bind (triggered by binding events), inserted (triggered when nodes are inserted), update (related updates within components)
- Hook function parameters: el, binding