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

This article is to share with you about the core technologies of vue. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Vue has two cores: 1, data-driven, that is, two-way binding of data, so that the content of the view (DOM) changes with the change of data; 2, component-based system, which can expand HTML elements and encapsulate available code.

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

The two cores of vue.js

Data driven

Component-based system

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

The Vue responsive core is that dependencies are collected at getter and dependency updates are triggered at setter.

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 users, but internally they allow Vue to track dependencies in property

Notify changes when 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.

two。 Component-based system

Componentization

Extend the HTML element to encapsulate reusable code. Each component corresponds to a ViewModel. Each separate visual / interactive area on the page can be treated as a component. Each component corresponds to a project directory, under which the various resources required by the component are maintained. A page is a container of components, and components can be nested and combined freely to form a complete page.

Core options for components:

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

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

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

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

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

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.

Thank you for reading! This is the end of this article on "what are the core technologies of vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.