Fifth, the "Secret Internet companies first-line front-end Advanced JavaScript Interview" video tutorial summarizes the series five: MVVM and related Vue

 

Question one: talk about the difference between using Jquery and use of vue.

 

Dom Jquery is cumbersome operations package, which package while also compatible browser approach, developers select and easier operation DOM object, here, the view data and are coupled together, this is not conducive to complex business logic development;

Vue decoupling the view data and the related operations Dom completely encapsulated in the inside, driven by the view, only concerned with changes in the data, the developers liberated from Dom cumbersome and complex operation, it is possible to focus more on the front end implement business logic.

 

---

 

 

Second problem: how to understand MVVM?

 

MVVM is a pattern-based front-end development framework, which originated in the back-end MVC framework, is to meet the increasingly complex front-end business for us.

Because the back-end MVC model is not entirely suitable for front-end scene, the front end of the pioneers in the MVC C - Controller, transformed into VM - ViewModel.

VM in MVVM pattern corresponds to a bridge, and decoupling the data view, while connected and view data.

View change events by way of binding data, how the data through data binding changes the view, they are to interact through the VM.

 

---

 

 

Question three: What are the three elements vue?

 

Responsive, template engine, rendering.

 

---

 

 

Question four: vue is how to listen to each data attribute change of?

 

By () Object.defineProperty implemented method, Object.defineProperty ()  method defines a new attribute on an object directly, or modify existing properties of an object and return the object.

It receives the third parameter contains two functions, are set () and GET (), the two functions can add custom logic listener, so as to achieve monitor changes in the data.

vue by traversing data property, in traversal function, each of attribute data by Object.defineProperty () are bound in on the object vue, so that changes can be monitored vue attribute data.

 

Here is the core function implementation:

var VM = {};
 var Data = { 
    name: 'zhangsan' , 
    Age: 20 is 
}; 
var key;
 for (key in Data) { 
    ( function (key) { // hits closure, to ensure the independence of the space key 
        Object. Defineproperty (VM, Key, { 
            GET: funtion () { 
                // here writable logical listener 
                return Data [Key]; 
            }, 
            SET: function (newVal) {
                 // here writable logical listener 
                Data [Key] = newVal ;  
            }
        })
    })(key)
}

 

---

 

 

Not reading, be continued. . .