Summary of vue interview questions and vue interview questions

Summary of vue interview questions and vue interview questions

What is the underlying principle of vue?

Communication between vue components?

How many methods are used to determine the Data Type in JS?

The most common judgment method is typeof.

Method for judging known object types: instanceof

Constructor: constructor

Invincible and omnipotent method: jquery. type ()

What is the difference between vue and angular?

1. vue is only the view layer in mvvm. It is just a jquery-like tool library, not a framework, but an angular mvvm framework.
2. vue bidirectional binding is based on 3 in ES5. getter/setter is implemented, while angular implements a set of template compilation rules by itself. The so-called "dirty" check is required, and vue does not. Therefore, vue is more efficient in terms of performance, but the cost is that it cannot be supported by browsers earlier than ie9.
4. vue needs to provide an el object for instantiation. All subsequent functions are under the el object, while angular is the entire html page. One page can have multiple vue instances, but angular does not seem to play this way.
5. vue is really easy to get started with, and the learning cost is relatively low. However, the materials you can refer to are not very rich. Official documents are relatively simple and there is a lack of comprehensive use cases. For advanced usage, you need to study the source code by yourself, at least currently.

What do you understand about angular dirty checking?

In angular, you cannot determine whether your data has been changed. Therefore, it sets some conditions. When you trigger these conditions, it executes a check to traverse all the data, compare the changes and execute the changes.
This check is not scientific. And the efficiency is not high, there are a lot of extra places, so officially known as dirty checks.

Which component is the property of active-class?

The router-link component of the vue-router module.

How to define a nested route?

In actual projects, we will encounter a combination of multi-layer nested components. But how can we implement nested routing? Therefore, we need to use the children configuration in the VueRouter parameter to implement route nesting.

Index.html, with only one route exit

<Div id = "app"> <! -- Router-view: Route entry. Components matching the route are rendered here --> <router-view> </div>

Main. js, route redirection, the home component will be displayed when the page is loaded, because the redirection points to the home component, the redirect point must be consistent with the path. Children contains child ro, and of course, child ro can be nested.

Import Vue from 'vue 'import VueRouter from 'vue-router' vue. use (VueRouter) // introduce two components import home from ". /home. vue "import game from ". /game. vue "// define the route const routes = [{path:"/", redirect:"/home "}, // redirect, pointing to the home component {path: "/home", component: home, children: [{path: "/home/game", component: game}] // create a route instance const router = new VueRouter ({routes}) new Vue ({el: '# app', data :{}, methods: {}, router })

Home. vue. Click Show to display the sub-route. The exit of the sub-route must be in the parent route. Otherwise, the sub-route cannot be displayed.

<Template> <div> 
Game. vue
<Template> 
How to define a dynamic route for vue-router? How can I obtain the passed dynamic parameters?
Add/: id to the path attribute in the index. js file under the router directory.

Use the params. id of the router object.
What kind of navigation hooks does vue-router have?
Three,

The first type is the global navigation HOOK: router. beforeEach (to, from, next). function: to determine and intercept before the jump.
2. hooks in components
Third: independent route exclusive Components
What is scss? What are the Installation and Use steps in vue. cli? What are the major features?
Css pre-compilation.
Procedure:
Step 1: use three loaders (sass-loader, css-loader, and node-sass) under npm)
Step 2: Find webpack. base. config. js in the build directory, and add an extension. scss in the extends attribute.
Step 3: configure a module attribute in the same file
Step 4: add the lang attribute to the style label of the component, for example, lang = "scss"
What are the major features:
1. variables can be used, for example ($ variable name = value );
2. You can use a mixer, such ()
3. nesting
What is mint-ui? How to use it? How can I use at least three components?
Vue-based front-end component library. Npm installation, and then import the style and js, vue. use (mintUi) global introduction. Import: import {Toast} from 'mint-Ui' to a single component '.

Component 1: Toast ('logon successful ');
Component 2: mint-header;
Component 3: mint-swiper
What is v-model? How to use it? How to bind tags to events in vue?
Supports bidirectional binding and commands (v-class, v-for, v-if, v-show, and v-on ). The data attribute of the model layer of the vue. Bind event: <input @ click = doLog ()/>
What are the advantages and disadvantages of iframe?
Iframe is also called an embedded framework. An embedded framework is similar to a framework webpage. It can embed the framework and content of a webpage into an existing webpage.
Advantages:
Solve the Problem of loading slow third-party content labels and advertisements.

Security sandbox

Parallel loading script

Easy to create navigation bar

Disadvantages:
Iframe will block the Onload event on the home page

The real-time content is blank and loading takes time.

No Semantics

What are the differences between Sass and Less?
They are dynamic style languages and CSS preprocessors, an abstraction layer on CSS. They are compiled into CSS in a special syntax/language.

Variable characters are different. less is @, and Sass is $;

Sass supports conditional statements, such as if {} else {}, for {} loops. Less is not supported;

Sass is Ruby-based and is processed on the server. Less requires the introduction of less. js to process Less code and output Css to the browser.
What is axios? How to use it? How does one use it to implement the login function?
The module that requests background resources. Npm install axios-S is installed, and then cross-origin is sent. You need to set the config/index. js in the configuration file. If Tp5 is used in the background, a resource route is defined. Use import in js, And then. get OR. post. Returns in the. then function. If the result is successful, the result is in the. catch function.
In axios + tp5, what is the operation to call axios. post ('api/user? What about axios. put ('api/user/8?
Cross-origin, add user operations, update operations.
What is vuex? How to use it? Which function scenario is it used?
Status Management in the vue framework. Introduce store and inject in main. js. A new directory store ,..... Export. Scenarios: the status between components in a single-page application. Play Music, log on status, add to shopping cart
What is the mvvm framework? What is the difference between it and other frameworks (jquery? Which scenarios are suitable?
A model + view + viewModel framework, data model, and viewModel are connected to two
Difference: vue data driver displays view layers rather than node operations through data.
Scenario: it is more convenient to operate data in multiple scenarios.
What are the methods of custom commands (v-check and v-focus? What hook functions does it have? What other hook function parameters are available?
Global definition command: There are two parameters in the directive method of the vue object: one is the command name and the other is the function. In-component definition command: directives
Hook Functions: bind, inserted, and update)
Hook function parameters: el and binding
What are the commands in at least four vue types and their usage?
V-if: determines whether to hide; v-for: Data loops out; v-bind: class: binds an attribute; v-model: Implements bidirectional binding.
What is vue-router? What components does it have?
Vue is used to write a plug-in for routing. Router-link and router-view
What are navigation hooks? What are their parameters?
Navigation hooks include:
A/Global hook and exclusive hook in the component. B/beforeRouteEnter, afterEnter, beforeRouterUpdate, beforeRouteLeave
Parameters:
There are to (the route to be deleted), from (the route to be removed), and next (you must use this function to go to the next route, and if you don't need to intercept it). These are the most common scenarios.
What is Vue's two-way data binding principle?
Vue. js uses data hijacking combined with publisher-subscriber mode, through Object. defineProperty () is used to hijack the setter and getter of each attribute. A message is sent to the subscriber when data changes, triggering the corresponding listener callback.
Procedure:
Step 1: Perform recursive traversal on the Data Objects of the observe object, including the attributes of the sub-attribute object, including setter and getter.
In this way, assigning a value to this object triggers the setter, so that the data changes can be monitored.
Step 2: compile parses the template instruction, replaces the variable in the template with data, initializes the rendering page view, binds the node corresponding to each instruction to the update function, and adds the subscriber to listen to the data, once the data changes, you will receive a notification to update the view.
Step 3: Watcher subscriber is a bridge between the Observer and Compile. The main tasks are as follows:
1. Add yourself to the attribute subscriber (dep) during self-instantiation
2. You must have an update () method.
3. When the dep. notice () Notification changes to the property, you can call your own update () method and trigger the bound callback in Compile.
Step 4: MVVM serves as the entry to data binding. It integrates Observer, Compile, and Watcher, monitors model data changes through Observer, and parses and compiles template commands through Compile, watcher is used to build a communication bridge between the Observer and Compile to achieve data changes-> View updates; view interaction changes (input)-> two-way binding effect of data model changes.
What is your understanding of the vue lifecycle?
There are a total of 8 stages before/after creation, before/after loading, before/after update, before/after destruction
Before/after creation: In the beforeCreated stage, the Mount Elements $ el and data Object data of the vue instance are undefined and have not been initialized. In the created stage, the data Object of the vue instance is available, and $ el is not.
Before/after loading: In the beforeMount stage, $ el and data of the vue instance are initialized, but they are still virtual dom nodes before mounting, and data. message has not been replaced. In the mounted phase, the vue instance is mounted and data. message is rendered successfully.
Before/after update: When data changes, the beforeUpdate and updated methods are triggered.
Before/after destruction: After the destroy method is executed, the periodic function is no longer triggered for data changes. This indicates that the vue instance has removed event listening and bound to dom, however, the dom structure still exists.

What is the process of encapsulating the vue component?
First, components can improve the development efficiency of the entire project. The ability to abstract pages into multiple relatively independent modules solves the problems of traditional project development, such as low efficiency, difficult maintenance, and reusability.
Create a component using the Vue. extend method, and then register the component using the Vue. component method. Child components require data and can be defined in props. After the child component modifies the data, it wants to pass the data to the parent component. You can use the emit method.
How do you know vuex?
Vuex can be understood as a development mode or framework. For example, PHP has thinkphp and java has spring.
You can use the status (Data Source) to centrally manage the changes of the driver components (for example, the IOC container of spring manages beans in a centralized manner ).
Application-level statuses are concentrated in the store. Changing the state is committed mutations, which is a synchronous thing. asynchronous logic should be encapsulated in action.
What is vue-loader? What are the purposes of using it?
Parses the. vue file as a loader and converts it from template/js/style to a js module.
Purpose: js can write es6, style can be scss or less, template can be added with jade, etc.
What is the usage of each folder and file in the src directory of the vue. cli project?
The assets folder is a static resource; components is a component; router is a configuration related to the definition of routing; view; app. vue is an application main component; main. js is an entry file
How do I use custom components in vue. cli? Have you encountered any problems?
Step 1: Create Your component file (smithButton. vue) in the components directory. The script must be export default {
Step 2: import smithButton from '../components/smithButton. vue' on the required page (Component'
Step 3: inject data to the components attribute of the vue sub-component. components: {smithButton}
Step 4: Use the template view, <smith-button> </smith-button>
The problem is: smithButton name. smith-button is used.
Let's talk about your understanding of Vue. js's template compilation?
In short, it is first converted to the AST tree, and then the render function returns VNode (Virtual DOM node of Vue)
Detailed steps:
First, use the compile compiler to compile the template into the AST syntax tree (abstract syntax tree is the tree representation of the abstract syntax structure of the source code). compile is the return value of createCompiler, createCompiler is used to create a compiler. In addition, compile is also responsible for merging options.
Then, the AST will generate (convert the AST syntax tree to the render funtion string) to get the render function. The render returns VNode and VNode is the virtual DOM node of Vue, there are (Tag Name, subnode, text, etc)
Vue history
Number of steps forward or backward in the history record
What is the difference between vuejs, angularjs, and react?
1. Differences from AngularJS
Similarities:
Commands are supported: built-in commands and custom commands.
Filters are supported: built-in filters and custom filters.
Both support two-way data binding.
Low-end browsers are not supported.
Differences:
1. AngularJS has a high learning cost. For example, the Dependency Injection feature is added, while Vue. js provides simple and intuitive APIs.
2. In terms of performance, AngularJS relies on dirty checking of data, so the more Watcher, the slower it will be.
Vue. js uses dependency tracing-based observation and uses asynchronous queue updates. All data is triggered independently.
For a large number of applications, this optimization difference is quite obvious.
2. Differences from React
Similarities:
React uses special JSX syntax. In component development, Vue. js also recommends writing. vue special file formats. There are some conventions on the file content, both of which need to be compiled and used.
The central idea is the same: Everything is a component and can be nested between component instances.
They all provide reasonable hook functions, allowing developers to customize their processing needs.
No built-in columns, such as AJAX and Route, are loaded into the core package as plug-ins.
The mixins feature is supported in component development.
Differences:
React depends on Virtual DOM, while Vue. js uses DOM templates. The Virtual DOM used by React performs a dirty check on the rendered results.
Vue. js provides instructions and filters in the template to operate DOM conveniently and quickly.
Vue Life Cycle interview questions

What is the vue lifecycle?
The lifecycle of a Vue instance from creation to destruction. That is, starting from the creation, data initialization, template compilation, Dom mounting, rendering, update, rendering, and uninstallation, we call this the life cycle of Vue.
What is the role of vue lifecycle?
There are multiple event hooks in its lifecycle, which makes it easier to form a good logic when controlling the entire Vue instance process.
How many stages are there in the vue lifecycle?
It can be divided into eight phases: Before/after creation, before/after loading, before/after update, before/after destruction
Which hooks will be triggered when the first page is loaded?
BeforeCreate, created, beforeMount, and mounted hooks will be triggered during the first page load.
In which cycle has DOM rendering been completed?
DOM rendering has been completed in mounted.
Briefly describe which scenarios are appropriate for each cycle?
How to Use the lifecycle HOOK: beforecreate: you can add a loading event here, trigger created when loading the instance: the event upon initialization completion is written here, such as ending the loading event here, asynchronous requests are also suitable for calling mounted: Mount element here to obtain the DOM node updated: if the data is processed in a unified manner, write the corresponding function beforeDestroy here: you can make a confirmation box nextTick to stop the event: Operate the dom immediately after the data is updated.
Arguments is a pseudo array and cannot be traversed without a traversal interface.
What are the differences between cancas and SVG?
SVG
SVG is a language that uses XML to describe 2D images.
SVG is based on XML, which means that every element in the svg dom is available. You can append a JavaScript event processor to an element.
In SVG, each drawn image is regarded as an object. If the attributes of an SVG object change, the browser can automatically reproduce the image.
Canvas
Canvas uses JavaScript to draw 2D images.
Canvas is rendered by pixel.
In the canvas, once the image is drawn, it will not continue to get the attention of the browser. If its position changes, the entire scenario also needs to be re-drawn, including any objects that may have been overwritten by the image.
Comparison between Canvas and SVG
Canvas
Dependency resolution
Event processor not supported
Weak text rendering capability
The result image can be saved in. png or. jpg format.
Most Suitable for image-intensive games, many of which are frequently repainted

SVG
Resolution independent
Event processor supported
Most suitable for applications with large rendering areas (such as Google Maps)
High complexity slows down the rendering speed (any application that excessively uses DOM is not fast)
Not suitable for game applications
Summary
The above is a summary of the vue Interview Questions introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!