What are the two cores of vuejs

The two cores of vuejs are data-driven and component systems. Data-driven is two-way binding of data, which is used to ensure the consistency of data and views. The component system can abstract the page into multiple relatively independent modules; it can realize code reuse, improve development efficiency and code quality, and facilitate code maintenance.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

The two cores of vue.js: 1. Data-driven------------- 2. Component system

1. Data Driver, that is, two-way binding of data

After the data changes, the page will be re-rendered. This is Vue responsiveness. So how is all this done?

To complete this process, we need to:

• Detect data changes
• Collect what data the view depends on
• When the data changes, Automatically "notify" the view part that needs to be updated and update it

The corresponding professional sayings are:

• Data hijacking/data agent
• Dependency collection
• Publish and subscribe mode

In other words: The core of Vue's responsiveness is that dependencies will be collected during getters and dependency updates will be triggered during setters.

vue will Traverse all the properties of the objects in the data, and use Object.defineProperty to convert all these properties into getter/setter.

These getters/setters are invisible to the user, but internally they allow Vue to track dependencies and notify changes when the property is accessed and modified .

Each component instance corresponds to a watcher instance, which records the "touched" data properties as dependencies during the component rendering process.

We will collect dependencies during getter. Dependency collection is the collection of subscription data change watchers. The purpose of dependency collection is to when the responsive data changes, it can notify the corresponding subscribers. Process related logic.

setter will trigger a dependency update. Later, when the dependency's setter is triggered, will notify the watcher, so that its associated components will be re-rendered. .

Summary:

1) Principle:

When creating a Vue instance, vue will traverse the properties of the data option and use Object.defineProperty as the property Add getters and setters to hijack data reading (getters are used for dependency collection and setters are used to dispatch updates), and track dependencies internally to notify changes when properties are accessed and modified.

Each component instance will have a corresponding watcher instance, which will record all the data attributes of dependencies during the component rendering process (dependency collection, as well as computed watcher and user watcher instances), and then the dependencies are changed When the time comes, the setter method will notify the watcher instance that depends on this data to recalculate (dispatch updates),

, thereby re-rendering its associated component.

2) Implementation process:

We already know that to implement two-way binding of data, we must first hijack and monitor the data, so we need to set up an Observer to monitor all properties. If the attribute changes, you need to tell the subscriber Watcher to see if it needs to be updated.

Because there are many subscribers, we need to have a message subscriber Dep to specifically collect these subscribers, and then manage them uniformly between the listener Observer and the subscriber Watcher. Next, we also need an instruction parser Compile to scan and parse each node element,

correspondingly initialize the relevant instructions into a subscriber Watcher, and replace the template data or bind the corresponding function. At this time, when the subscriber Watcher receives the change of the corresponding attribute, it will execute the corresponding update function to update the view. Therefore, we next perform the following three steps to achieve two-way binding of data:

1. Implement a listener Observer to hijack and monitor all properties, and notify subscribers if there are changes.

2. Implement a subscriber Watcher that can receive property change notifications and execute corresponding functions to update the view.

3. Implement a parser Compile, which can scan and parse the relevant instructions of each node, and initialize the template data and initialize the corresponding subscriber

Note: Proxy is a new feature of JavaScript 2015. Proxy's proxy is for the entire object, not a certain property of the object, so it is different from Object.defineProperty which must traverse each property of the object,Proxy Only one layer of proxy is needed to monitor all attribute changes under the same level structure. Of course, for deep structures, recursion still needs to be performed. In additionProxy supports changes in the proxy array. Proxy is the method used by vue3.0

2. Component system

Understanding:

1) Able to abstract the page into multiple relatively independent modules;

2) Implement code reuse, improve development efficiency and code quality, and facilitate code maintenance

components Core options

1 Template: The template declares the mapping relationship between the data and the DOM that is ultimately displayed to the user.

2 Initial data (data): The initial data state of a component. For reusable components, this is usually private state.

3 Accepted external parameters (props): Data is transferred and shared between components through parameters.

4 Methods: Data modification operations are generally performed within the component’s methods.

5 Lifecycle hooks: A component will trigger multiple lifecycle hook functions. The latest version 2.0 has greatly changed the name of the lifecycle function.

6 Private resources (assets): In Vue.js, user-defined instructions, filters, components, etc. are collectively called resources. A component can declare its own private resources. Private resources can only be called by the component and its subcomponents.

Related recommendations: "vue.js Tutorial"

The above is the detailed content of What are the two cores of vuejs. For more information, please follow other related articles on the PHP Chinese website!