Origin of Ray

Vue is an MVVM framework, and the most appealing thing about it is its responsiveness.

Official explanation

First, let’s take a look at the explanation of the reactive principle in the official doc.

How to track change

When you pass a plain JavaScript object to a Vue instance as the’data 'option, Vue will iterate over all the properties of the object and use Object.defineProperty Convert all these properties to getter/setterObject.defineProperty is a non-shim feature in ES5, which is why Vue does not support IE8 and earlier browsers.

These getters/setters are invisible to the user, but internally they allow Vue to track dependencies and notify changes when properties are accessed and modified. It should be noted here that different browsers format getters/setters differently when printing data objects in the Console, so it is recommended to install vue-devtools To get a more user interface friendly to inspection data.

Each component instance corresponds to a watcher instance, which records the data properties “touched” as dependencies during the component rendering process. Later, when the setter of the dependency is triggered, the watcher will be notified so that its associated component can be re-rendered.

Introduction to RPC

RPC (Remote Procedure Call): Remote procedure call is the idea of requesting services from a remote computer program over a network without knowledge of the underlying network technology.

The main functional goal of RPC (Remote Procedure Call) is to make it easier to build distributed computing (applications) without losing the semantic simplicity of local calls when providing powerful remote call capabilities. To achieve this goal, ** the RPC framework needs to provide a transparent call mechanism so that users do not have to explicitly distinguish between local and remote calls **.　　
RPC adopts the C/S mode. The requester is a client, and the service provider is a server. First, the client calling process sends a call message with process parameters to the service process, and then waits for the reply message. On the server side, the process remains asleep until the call message arrives. When a call message arrives, the server gets the process parameters, calculates the result, sends the reply message, and then waits for the next call message. Finally, the Client calling process receives the reply message, gets the process result, and then calls execution to continue.

Introduction

ES5 object property names are all strings, which is prone to property name conflicts. For example, if you use an object provided by someone else, but want to add a new method (mixin mode) to this object, the name of the new method may conflict with the existing method. It would be nice if there was a mechanism to ensure that the name of each property is unique, which fundamentally prevents property name conflicts. This is why Symbols were introduced in ES6.

ES6 introduces a new original data source type Symbol that represents a unique value. It is the seventh data type in the JavaScript language, after the first six: undefined, null, Boolean, string, number, and object.

Symbol values are generated by the Symbol function. This means that object property names can now have two types, one is the original string, and the other is the new Symbol type. Any property name that belongs to the Symbol type is unique and can be guaranteed not to conflict with other property names.

Some time ago, I made a grease monkey plugin to sort out the urls of commonly used projects in different environments for ease of use.
Recently, I have been a little annoyed by the db configuration of various projects in various environments, so I thought about putting the db configuration into the script, but there are still some sensitive information in these db configurations, and there may be security problems if I put it rashly. In order to study the security of TamperMonkey, I studied the doc of TamperMonkey and its principle.

What is Blob?

A blob (Binary Large Object) represents a large object of binary type. In database management systems, binary data is stored as a collection of a single individual. A blob is usually a video, sound, or multimedia file. ** In JavaScript, an object of type Blob represents the original data source of an immutable file-like object. **

As you can see, the myBlob object contains two properties: size and type. The’size ‘property is used to represent the size of the data (in bytes), and’type’ is a string of MIME type. Blobs do not necessarily represent data in JavaScript native format. For example, the’File ‘interface is based on’Blob’, inheriting the functionality of blob and extending it to support files on the user’s system.

Take note of the pitfalls you encounter while using elementUI.

Some event names in elementUI are confusing, such as handleSizeChange, handleCLose, etc.

What is DOM?

DOM is Document Object Model, what is Document Object Model? This needs to be discussed carefully.

HTML doc ** document pages are the foundation of everything, without which dom would be impossible. **

When a page is created and loaded into the browser, the DOM is quietly born. It will convert the web page doc into a doc object, and its main function is to process web page content.

In this doc object, all elements present a hierarchical structure, which means that ** except for the top-level element html, all other elements are contained in other elements. **

You Yuxi delivered a keynote speech titled “Vue 3.0 Updates”, elaborating on the update plan and direction of “Vue 3.0” (interested partners can take a look at the complete PPT), indicating that the use of’Object.defineProperty 'has been abandoned in favor of the faster native ’ Proxy '!!

This removes many of the limitations of the previous Vue2.x implementation based on Object.defineProperty: the inability to listen for property additions and deletions, array index and length changes, and support for Map, Set, WeakMap, and WeakSet!

The core concept of webpack

• Entry: Entry, the first entry of webpack execution and construction, which can be abstractly understood as input
• Module: Module, everything in webpack is a module, a module corresponds to a file, webpack will start from the configured Entry, recursion finds all dependent modules.
• Chunk: Code Block, a chunk is composed of multiple modules for code merging and splitting.
• Loader: Module converter, used to convert the metadata of the module into new content as required.
• Plugin: extension plug-in, broadcast corresponding events at specific times in the webpack build process, plug-in can listen to these events and do corresponding things at specific times.

Recently, while reading the Azure documentation, I was very confused by many of the concepts in the documentation, so I went through some of the official documentation, which is a temporary understanding and summary.