MVVM

The difference between jQuery and Vue

  • Vue is a data-driven view that only cares about data changes, and DOM operations are encapsulated. But jquery is directly manipulating the DOM
  • Vue data is separated from the view (decoupled, open and closed), and jquery directly manipulates the DOM to modify the view

Open closed principle: open to expansion, closed to modification

How to understand MVVM

  • The View affects the Model through event binding
  • The Model affects the View through data binding
  • ViewModel is an intermediate bridge, MVVM is not an innovation, it is based on MVC, but ViewModel is an innovation

The three elements of MVVM

responsive

In VUE, the attributes of data are proxy to the VM mainly by using Object.defineProperty

  • What is reactive

By modifying data data through JS, you can modify the display view accordingly, and change the display effect of the view without directly manipulating DOM

  • Object.defineProperty

Example: Read and assign an Object using Object.defineProperty

var obj = {};
var _name = 'yanping';
Object.defineProperty(obj, 'name', {
  get: function() {
    console.log('get');
    return _name;
  },
  set: function(newValue) {
    console.log('set'); _name = newValue; }});console.log(obj.name); // get
obj.name = 'shi'; // set
Copy the code
  • Proxy data to the VM using Object.defineProperty

Ex. :

var vm = {};
var data = {
  name: 'shi'.age: 20
};
var key;
for (key in data) {
  (function(key) {
    Object.defineProperty(vm, key, {
      get: function() {
        console.log('get');
        return data[key];
      },
      set: function(newValue) {
        console.log('set'); data[key] = newValue; }}); })(key); }Copy the code

Template engine, rendering

What is a template

  • It’s essentially a string
  • Logic can be written, as inv-if.v-forYou have to use JS to do that
  • Much like HTML format, but not HTML, you can add JS variables
  • The vNode will eventually be generated using the render function js, and then passed_updateThe function is converted to HTML and rendered

How are templates generated and rendered

The vue will have the render function (search for code.render in the vue source code), generate JS templates (vNodes) from HTML templates, and the _update function to add the generated VNodes to the HTML.

Ex. :

  • The vue_cThe approach is similar to what I did beforeThe virtual DOM articleSnabbDOMhFunction to generate a vNode
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content=" IE =edge"> <title>Document</title> <script src="vue.js"></script> </head> <body> <div id="container"> <p>{{price}}</p> </div> <script> var vm = new Vue({ el: "#container", data: { price: Function render() {with (this) {// this -> vm return _c('div', {attrs: {id: 'container' } }, [ _c('p', [_v(_s(price))]) ]) } } </script> </body> </html>Copy the code
  • There’s another one in VUE_updateMethod, you can go to the source code search,_updateSimilar to snabbDOMpatchFunction to generate a VNode output to the page

The whole implementation process of VUE

  1. Parse the template into the render function
    1. The use of with, in their own development as far as possible do not use, can be their own hundred degrees
    2. All the information in the template is contained by the Render function
    3. The attributes in the data used in the template become JS variables
    4. In the templatev-model v-for v-onIt all becomes JS logic
    5. The render function returns vNode
  2. Reactive start listening
    1. Object.defineProperty
    2. Proxy the attributes of Data to the VM
  3. Render for the first time, display the page, and bind dependencies
    1. First render, updateComponent, vm._render()
    2. The render function accesses the JS variables under the VM (i.e. properties in data).
    3. Will be listened on by the reactive GET method
    4. Executing updateComponent takes you to the patch method of the VDOM
    5. Patch renders VNode into DOM and the initial rendering is successful
  4. Rerender is triggered when the data property changes
    1. Modify properties that are listened on by a reactive set
    2. Run updateComponent in set
    3. UpdateComponent re-execute vm._render()
    4. The generated vNode is compared with the prevVnode through the patch function
    5. Modify the changes and render them into the page

Q: Why do we need to listen for get in response mode? A: To avoid unnecessary repeated rendering, some attributes in data will not be used. If the attributes are not used, there is no need to set.