Vue interview questions summary (continuously updated…)

1. The MVVM mode in VUE

The Model – View – the ViewModel.

Vue is data-driven. Vue itself binds DOM and data. Once the binding is created, DOM and data will be synchronized, and DOM will change whenever data changes.

ViewModel is the heart of Vue, it is an instance of Vue. A Vue instance is scoped on an HTML element, which can be the body or the element referred to by an ID.

DOM Listeners and Data Bindings are the key to realize bidirectional binding. DOM Listeners listen to the changes of ALL DOM elements in the View layer of the page. When the changes occur, the data in the Model layer changes accordingly. The Data Bindings layer listens to the Data in the Model layer. When the Data changes, the DOM elements in the View layer change accordingly.

2. The difference between the V-show command and v-if command

Conditional rendering directives. Unlike v-if, the element exists in the HTML code whether v-show is true or false; Only if the value of v-if is true does the element exist in the HTML code. The V-show directive simply sets the style value of the element CSS

3. How do I make the CSS work only for the current component

Each VUE component can define its own CSS/JS. If you want the CSS written in the component to only apply to the current component, just write scoped in style.

<style scoped></style>Copy the code

4. Instruction keep alive

On the vue-router it says keep-alive, meaning keep-alive:

If you leave the switched out component in memory, you can preserve its state or avoid rerendering. You can do this by adding a keep-alive directive

<component :is=’curremtView’ keep-alive></component>

5. Vuejs components

Vuejs build component uses

Vue.component('componentName'{/ * * / component}); // Components must be registered before using Vue.component('mine',{           
    template:'#mineTpl',          
    props:['name'.'title'.'city'.'content']}); var v=new Vue({ el:'#vueInstance',      
    data:{          
        name:'zhang',          
        title:'this is title',         
        city:'Beijing',         
        content:'these are some desc about Blog'}});Copy the code

6. Route nesting

Router-view itself renders the component to that location. To redirect the page, render the page to the root component. When configuring the route, write:

var App = Vue.extend({ root });
router.start(App,'#app');Copy the code

Here we first register the root component to render the pages configured in the route, and then mount the root component to the element matching #app.

7. Use of the command V-EL

If you want to access an element in the same way as jquery, you can use the V-EL directive to register an index for the element and access it through the $EL of the owning instance.

Pay attention to

HTML is not case sensitive, so V-EL :someEl will be converted to all lowercase. You can use v-el:some-el and then set this.$el.someel.

The sample

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent //-> "hello"
this.$els.otherMsg.textContent// -> "world"
this.$els.msg//-><span>hello</span>Copy the code

8. Use event names in vue.js

In VUEJs, we often bind events, sometimes to DOM elements, sometimes to components. < div style =” box-width: border-box; color: RGB (50, 50, 50); line-height: 20px; font-size: 14px! Important; word-break: inherit! Important; In vuEJs 1.x binding events, avoid capital letters as much as possible. There is no such restriction in 2.0!

9. What is vue.js

Vue.js is a set of progressive frameworks for building user interfaces. Unlike other heavyweight frameworks, Vue uses a bottom-up, incremental development design. Vue’s core libraries focus only on the view layer and are very easy to learn and integrate with other libraries or existing projects. On the other hand, Vue is fully capable of driving complex single-page applications developed using single-file components and libraries supported by the Vue ecosystem.

The goal of vue.js is to implement responsive data binding and composite view components in as simple an API as possible

10. Features of VueJS:

I: MVVM mode (model) change (view) change (view) change (model) change (model) change (view)

There are several benefits to using the MVVM mode:

1. Low coupling. Views can be changed and modified independently of the Model. A ViewModel can be bound to different views. The Model can be unchanged when the View changes, and the View can be unchanged when the Model changes.

2. Reusability. You can put some View logic inside the ViewModel and have many views reuse that View logic.

3. Independent development. Developers can focus on business logic and data development (ViewModel). Designers can focus on the design of the View.

4. Testability. You can test the View against the ViewModel

II: componentization

III Instruction system

IIII: vue2.0 starts to support virtual dom

Vue1.0 operates on real dom elements rather than virtual ones

Virtual DOM: Improves the page refresh speed

The virtual DOM has both advantages and disadvantages.

A: Size – one of them is that more functionality means more lines of code in A code package. Fortunately, vue.js 2.0 is still smaller than the current version (21.4 KB), and

And they’re deleting a lot of things.

B: Memory – Again, virtual DOM requires a copy of the existing DOM to be stored in memory, which is a tradeoff between DOM update speed and memory usage.

C: Not in all cases – it’s great if the virtual DOM can be modified in batches all at once. But what about individual, rare updates? Any such thing

DOM updates will bring meaningless precomputation to the virtual DOM

11. The Vue. Js characteristics

Concise: The page consists of HTML template +Json data +Vue instance

Data-driven: Template expressions that automatically calculate attributes and track dependencies

Componentization: Pages are constructed from reusable, decoupled components

Lightweight: Small amount of code, not dependent on other libraries

Fast: Accurate and efficient batch DOM update

Template friendly: can be installed through NPM, Bower and other ways, easy to integrate

12. What is the difference between vue. js and AngularJS?

Here are some possible reasons to choose Vue over Angular;

Vue.js is a more flexible and open solution. It allows you to organize your application the way you want, instead of having to follow Angular rules at all times. It’s just a view layer, so you can embed it into an existing page without having to make it a huge single-page application. It gives you more room to combine other libraries, but correspondingly, you need to make more architectural decisions. For example, the vue.js core does not include routing and Ajax capabilities by default, and generally assumes that you are using an external module building system in your application. This is probably the most important difference

Vue.js is much simpler than Angular in terms of API and internal design, so you can quickly pick up all of its features and get into development.

Vue.js has better performance because it does not use dirty checking. As there are more and more Watcher, Angular gets slower and slower because every time the data changes in the scope, all watcher need to be re-evaluated. Vue doesn’t have this problem at all because it uses an observation system based on dependency tracking, so all data change triggers are independent unless there is an explicit dependency between them.

The concept of directive and component is much clearer in vue. js. Directives are only responsible for encapsulating DOM operations, whereas a component represents a self-contained unit that has its own view and data logic. There is a lot of conceptual confusion between the two in Angular.

13. What’s the difference between vue. js and React.js?

React.js and vue. js do have some similarities – they both provide data-driven, composable view components. However, their internal implementation is quite different. React is based on the Virtual DOM — a data structure that describes the state of a DOM tree in memory. Data in React is generally considered immutable, while DOM operations are computed by diff of the Virtual DOM. In contrast, the data in vue. js is mutable by default, and changes to the data are directly triggered by the DOM update. Compared to the Virtual DOM, vue. js uses the actual DOM as a template and keeps references to real nodes for data binding.

The Virtual DOM provides a functional way to describe views, which is cool. Because it does not use a data observation mechanism, the entire application is rerendered with each update, so by definition the view is synchronized with the data. It also opens up the possibility of JavaScript isomorphic applications.

To tell you the truth, I’m a big fan of React’s design philosophy. One of the problems with React is that the logic of the components is very tightly tied to the view. For some developers, they may see this as an advantage, but for those of us who are both design and development, like me, templates are preferred because they allow us to think about design and CSS visually. The mix of JSX and JavaScript logic interferes with my thought process of mapping code to design. Instead, vue.js adds a lightweight DSL (instruction system) to the template in exchange for a still intuitive template that encapsulates logic into instructions and filters.

Another problem with React: Since DOM updates are completely managed by the Virtual DOM, it’s a little tricky when you really want to control the DOM yourself (although in theory you can, but in doing so you’re essentially fighting React’s design philosophy). This can be a nasty limitation for animations that require complex timing. Vue.js allows more flexibility in this regard, and there are a number of rich interaction instances built with vue.js

14. Please explain your understanding of Vue life cycle in detail?

There are eight stages: before/after creation, before/after loading, before/after updating, before/after destroying.

Before/after creation: In the beforeCreate phase, the mount element EL of the vue instance is not yet available.

Before/after loading: In the beforeMount phase, the vue instance’s $EL and data are initialized, but the virtual DOM node is still mounted, 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: The beforeUpdate and Updated methods are triggered when data changes.

Before/after destroy: Changes to data after the destroy method are executed no longer trigger the periodic function. This means that the vue instance has been unbound from the DOM and the event listener, but the DOM structure still exists

15. How to pass values between components?

Parent and child components pass the value: Props

Child component passes data to parent component: Child component passes parameter through $emit method, triggering parent component event

16. What kind of navigation hooks does vue-router have?

Global navigation hook

router.beforeEach(to, from, next),

router.beforeResolve(to, from, next),

router.afterEach(to, from ,next)

Assembly hooks

beforeRouteEnter,

beforeRouteUpdate,

beforeRouteLeave

Separate routes to exclusive components

beforeEnter

17. What is the principle of vUE bidirectional binding

Vue.js uses data hijacking combined with publist-subscriber mode. It hijacks setters and getters of each property through object.defineProperty (), publishes messages to subscribers when data changes, and triggers the corresponding listener callback.

18. What are the characteristics of vuex mutation and action? What’s the difference?

The mutation is used to modify the state data and is synchronized.

An action is similar to a muation, except that an action commits a mutation instead of directly changing the state

An action can contain any asynchronous operation

19. Why write key in component when writing React/Vue project, what is its function?

During development, we need to ensure that the key of an element is unique among its peers. In the Diff algorithm, the Key value of the element is used to determine whether the element is newly created or moved, so as to reduce unnecessary element rerendering.

20. The difference between computed and watched: