Vuejs design and implementation

The first chapter, weigh art

1.1 Imperative and declarative

  • This section emphasizes that both the native methods and JQuery methods operate on the DOM imperatively. Something like Vue is declarative.
  • The difference is that the imperative focuses on the process and the declarative focuses on the outcome.

1.2 Tradeoff between performance and maintainability

  • This section throws up a conclusion: declarative code does not perform better than imperative code.

  • Compare the two. The performance cost based on direct modification is defined as A, and the performance cost of finding the difference is defined as B.

    • Update performance cost of imperative code = A
    • Update performance cost for declarative code = B + A

  • Normally, the performance cost of the whole find difference is 0. Declarative code and imperative code have the same performance and cannot be surpassed. After all, the framework itself encapsulates the imperative code that makes it declarative to the user.

  • Framework designer’s rule: Minimize performance loss while maintaining maintainability.

1.3 What is the performance of the virtual DOM

    1. Contrast pure JavaScript manipulation with DOM manipulation
    • The example of running above is looping 10,000 times, each time creating a JavaScript object and adding it to an array. Below is DOM manipulation, where you create DOM elements one at a time and add them to the page. As a result, we can see that the pure JavaScript level is much faster than DOM manipulation.
    • The performance of the innerHtml creation page: the amount of HTML string concatenation computation + the DOM computation of the innerHtml.
    1. Virtual DOM
    • Virtual DOM: number of computations to create JavaScript % Number of computations to create the real DOM
    • InnerHTML: The innerHTML updates the page by reconstructing the HTML string and resetting the innerHTML of the DOM element. This means that even if you change just one text, you reset the innerHTML property. Resetting the innerHTML attribute is equivalent to destroying all the old DOM elements and creating a new one entirely.
    • Virtual DOM: It involves recreating JavaScript objects (virtual DOM trees), then comparing the old and new DOM to find the changed elements and updating them.

  • Advantages of the virtual DOM

    • The virtual DOM updates only the necessary elements when updating the page, but the innerHTML needs to be fully updated.

1.4 Run time and compile time

1.4.1. How is vue rendered

This section describes the Vue framework, where the user builds a tree of data objects and recursively renders the data into DOM elements by running the Render function on the object.

const obj = {
	tag: "div".children: [{tag: 'span'.children: "hello world"}}]Copy the code

According to the code above, each object has two attributes: tag represents the name of the tag, and children can be either an array (representing child nodes) or a piece of text (representing text child nodes)

1.4.2. Implementation of Render function

function Render(obj,root){
  const el = document.createElement(obj.tag)
  if(typeof obj.children === 'string') {const text = document.createTextNode(obj.children)
    el.appendChild(text)
  } else if {
    // Array, recursive call Render, using el as root argument
		obj.children.forEach((child) = > Render(child,el))
  }
  
  // Add the element to root
  root.appendChild(el)
}
Copy the code

The user to use

const obj = {
  tag: 'div'.children: [{tag: 'span'.children: "hello world"}}]// Render under body
Reder(obj, document.body)
Copy the code

Pain point: Users find it too difficult to manually write a tree object.

1.4.3. Implement Compiler function

// The Compiler is called to compile the tree-structured data object
const obj = Compiler(html)

// Call Render to Render
Render(obj,document.obj)
Copy the code

1.4.4. Thought: Why not compile directly into imperative code

  • Because of the pure runtime framework, there is no way to analyze user-supplied content since it has no compilation process. However, if a compilation step is added, the user-supplied content can be extracted and manipulated further.
  • If you are running a pure framework, you need to compile to see the results. (Svelte pure runtime)

END

Personal blog summary address: github.com/codehzy/blo…