Some principle notes of vue

MVVM
M: model model
V: view view
VM: view model

The traditional MVC mode data is dynamically rendered, but the view update needs to obtain the dom for operation, and the performance is not good; the
MVVM mode newly adds the VM as the middleware to realize the data-driven view, and the developer spends more energy on the research logic and data , The development efficiency is high, and the performance is good.

Responsive principle

Core API: Object.defineProperty()

When the data object in vue is initialized, get and set methods are added. When the data changes, the function to update the view is triggered.

Disadvantages of Object.defineProperty():

In-depth monitoring requires recursion to the end, which requires a large amount of one-time calculation
Unable to monitor new properties/delete properties (Vue.set Vue.delete)
Unable to monitor the array natively, you need to modify the array prototype

vdom
vdom is an object generated by js, imitating the dom structure, and generating real dom according to vdom

How to convert dom into js object

//html
    <div id="box" style="color:red;">
      <p>段落</p>
      <ul>
        <li style="font-size:20px;">标签</li>
      </ul>
    </div>
//js对象
{
    
    
        tag: 'div',
        props: {
    
     style: 'color:red',id:'box' },
        children: [
          {
    
     tag: 'p', children: '段落' },
          {
    
    
            tag: 'ul',
            children: [
              {
    
    
                tag: 'li', props: {
    
     style: "font-size:20px" },
                children: '标签'
              }
            ]
          }
        ]
      }

diff algorithm

Compare virtual dom and real dom

Compare only the same level, not across levels
If the tags are not the same, delete and rebuild directly, no more in-depth comparison
Tag and key, if both are the same, they are considered to be the same node, not in-depth comparison

Template compilation

withmethod

Change the search rules of free variables in {}, and look for them as obj attributes
If no matching obj attribute is found, an error will be reported
Use with caution, it breaks the scope rules and makes the legibility worse

The template template is parsed into the render function through the compiler method in vue. This function returns a string of vnodes, which is the virtual dom. Next, the diff algorithm is used to compare with the real dom, and different nodes are replaced.

//vue文件
import {
    
    compile} from '../../node_modules/vue-template-compiler'

console.log(compile('<div>{
    
    {text}}</div>'))
//with(this){return _c('div',[_v(_s(text))])}

Initial rendering process

Parse the template as the render function (or completed in the development environment, vue-loder)
Trigger response type, monitor data attribute getter and setter
Execute the render function to generate vnode, patch (elem, vnode)

Update process

Modify data, trigger setter
Re-execute the render function to generate newVnode
patch（vnode，newVnode）

hash routing

Hash changes will trigger web page jumps, that is, the browser’s forward and backward
Hash will not refresh the page, a necessary feature of SPA
The server side that hash will never submit (the front end fends for itself)

Function
window.onhashchange=(event)=>{}
JS to monitor hash changes to modify url
location.href=##

history routing

Use url standard routing, but do not refresh the page when redirecting
Add route: history.pushState browser will not refresh the page

history.pushState(state,'','pageName')

Monitor the browser forward and backward: window.onpopstate=(event)=>{}

Some principle notes of vue

Guess you like