In recent interviews, interviewers have been asking questions about Vue source code and “family buckets”. So how do we respond better to these questions? Here I sort out the understanding of Vue for your reference.

1. What is Vue?

Vue is a set of progressive frameworks for building user interfaces and a very typical MVVM program structure (model-view-viewModel).

Official terms:

Vue (pronounced vju/curliest, similar to View) is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex, single-page applications.

2. Since VUE is MVVM structure, how is it better than MVC?

MVC mode is the basis of MVVM mode. These two modes are more like the optimized and improved version of MVC mode. Their MV, namely Model and View, are the same, but the difference is the link between MV.

☞ What is MVC?

If you don’t have a framework on the front end and just use native HTML + JS, the MVC pattern can be understood this way. Think of HTML as a view; Js is regarded as controller, which is responsible for handling the interaction between users and applications, responding to the operation of view (monitoring events), calling Model to operate data, and completing the synchronization between Model and View (according to the change of Model, the view is operated through the selector); Use JS ajax as the Model, or data layer, to fetch data from the server through Ajax.

☞ What is MVVM?

The biggest difference between MVVM and MVC is that MVVM realizes the automatic synchronization of View and Model. That is, when the property of Model changes, we do not need to manually manipulate Dom elements to change the change of View. Instead, after changing its property, the View layer data corresponding to the property will automatically change. Take Vue as an example:

 <div id="vueDemo">
  <p>{{ title }}</p>
  <button v-on:click="clickEvent">hello word</button>
</div>
Copy the code
var vueDemo = new Vue({  
    el: '#vueDemo',  
    data: {    
        title: 'Hello Vue! '  
    },  
    methods: {    
        clickEvent: function () {      
            this.title = "hello word!"}}})Copy the code

In HTML => View layer, you can see that the View uses template syntax to declaratively render data into the DOM element, and when the ViewModel updates the Model, it updates it to the View via data binding.

Data in Vue instance is equivalent to Model layer, while the core of ViewModel layer is two-way data binding in Vue. When Model changes, View can also be updated in real time. Similarly, View changes can also make Model change.

Overall, MVVM is much more streamlined than MVC, not only simplifying business and interface dependencies, but also eliminating frequent data updates and the need to manipulate DOM elements with selectors. Because in MVVM, the View is unaware of the Existence of the Model, and the Model and ViewModel cannot observe the View, this low-coupling pattern improves code reusability.

3. What is the principle of Vue response?

Vue implements data responses based on Object.defineProperty, which is a non-shim feature in ES5 and is not supported in browsers below IE8. Vue updates view data by listening for collected dependencies through getter/setter methods of Object.defineProperty, notifying changes when properties are accessed and modified; Restricted by modern JavaScript (and deprecated Object.Observe), Vue cannot detect additions or deletions of Object attributes. Since Vue performs getter/setter conversion procedures on the property when it initializes the instance, the property must exist on the Data object for Vue to convert it so that it is responsive.

First of all, the following article will be written in detail:

The Observer class

It is mainly used to add getter/setter methods to Vue’s data defineProperty and collect dependencies or send notifications for updates in getter/setter.

Watcher class

Used to observe changes in data (or expressions) and then execute callbacks (which also collect dependencies), mainly on the $Watch API and directives.

Dep class (short for Dependence)

Is an observable that can be subscribed to with different instructions (it’s multicast)

The observer model, which is similar to the publish/subscribe model, is slightly different.

In the publish/subscribe mode, a unified event dispatch center distributes events. On adds events (subscriptions) to the central array, and EMIT extracts events (publications) from the central array.

But there is no such center in the Observer pattern, which contains the Observer and subject subject objects. When the Observer needs to observe a subject, it must register with the Subject to hold the collection handle of the Observer. When the internal state of the Subject object changes, it notifies all observers of the change.

4. Have you ever understood the Vue source code?

Before the Vue source is also a little bit of research, but there is no very systematic record, now a little time, it will do a basic summary. On the one hand to overcome their own inertia, on the other hand also quite want to revisit it. Let’s take a look at the Vue source directory structure:

We can start with an overview:

I will update it on Github at the same time. If you like, you can send a star. Thank you in advance

1. Analysis of Vue source code (a) – creation

2. Analysis of Vue source code (2) — initMixin(on)

3. Vue source code (three) — initMixin(next)

$mount templateparse

$mount template compilation –optimize

$mount: generate template: generate

Vue source code (seven) – render to VNode generation

Analysis of Vue source code (eight) – rely on collection and monitoring

9. Vue source code (nine) — VirtualDOM and path

10. Vue Introduction — Brief Analysis of VUE-Router Principle

11.Vue — Brief Analysis of Vue.Nexttick (