Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about what are the two cores of vuejs. Many people may not know much about it. In order to make you understand better, the editor has summarized the following contents for you. I hope you can gain something according to this article.

The two cores of vuejs are data-driven and component systems. Data-driven, that is, two-way binding of data, is used to ensure the consistency of data and views. The component system can abstract the page into several relatively independent modules, 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-driven, that is, two-way binding of data

When the data changes, the page will be re-rendered, which is the Vue response, so how do you do all this?

To complete this process, we need to:

Detect changes in data

What data does the collection view depend on?

When the data changes, automatically "notify" that the view part needs to be updated and updated.

The corresponding professional sayings are:

Data hijacking / data agent

Dependency collection

Publish and subscribe model

In other words: the Vue responsive core is that dependencies are collected when getter is used and dependency updates are triggered when setter is used.

Vue will iterate through all the property of the object in data and use Object.defineProperty to convert all of these property to getter/setter.

These getter/setter 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 "contact" data property as dependencies during component rendering.

When we getter, we will collect dependencies. Dependency collection is the collection of subscription data changes watcher. The purpose of dependency collection is to inform the corresponding subscribers to deal with the relevant logic when the responsive data changes.

Dependency updates are triggered when setter, and then when the setter of the dependency is triggered, watcher is notified so that its associated components are re-rendered.

Summary:

1) principle:

When creating a Vue instance, vue traverses the properties of the data option, uses Object.defineProperty to add getter and setter to the attribute to hijack the reading of data (getter is used for dependency collection, and setter is used to dispatch updates), and tracks dependencies internally, notifying changes when attributes are accessed and modified.

Each component instance will have a corresponding watcher instance, and all dependent data attributes (dependency collection, and computed watcher,user watcher instances) will be recorded during component rendering. When the dependencies are changed, the setter method will notify the watcher instances dependent on this data to recalculate (dispatch updates).

This causes its associated components to re-render.

2) implementation process:

We already know that to achieve two-way data binding, the first thing to do is to hijack and listen to the data, so we need to set up a listener Observer to listen for all properties. If the property changes, you need to tell the subscriber Watcher to see if it needs to be updated.

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

Initialize the relevant instructions into a subscriber Watcher, and replace the template data or bind the corresponding function. When the subscriber Watcher receives the change of the corresponding attribute, it will execute the corresponding update function to update the view. So next we perform the following three steps to achieve two-way data binding:

1. Implement a listener Observer that hijacks and listens to all properties and notifies subscribers of any changes.

two。 Implement a subscriber Watcher that can update the view by receiving notification of property changes and executing the corresponding functions.

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

Note: Proxy is a new feature of JavaScript 2015. The proxy of Proxy is for the whole object, not a property of the object, so unlike Object.defineProperty, each attribute of the object must be traversed. Proxy only needs to do one layer of proxy to listen for all attribute changes under the peer structure. Of course, for the deep structure, recursion still needs to be carried out. In addition, Proxy supports changes to the proxy array. Proxy is the method used by vue3.0.

two。 Component system

Know:

1) the page can be abstracted into several relatively independent modules

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

Core options for components

1 template (template): the template declares the mapping between the data and the DOM that is eventually presented to the user.

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

(3) accepted external parameters (props): data transfer and sharing between components through parameters.

4 method (methods): changes to the data are generally carried out in the method of the component.

5 Lifecycle Hook function (lifecycle hooks): multiple lifecycle hook functions can be triggered by a component. The latest version 2.0 changes a lot to the lifecycle function name.

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

After reading the above, do you have any further understanding of what are the two cores of vuejs? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.