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

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

Vue core idea: data-driven, component-based 1, data-driven

The traditional front-end data interaction is to use Ajax to obtain data from the server, and then operate DOM to change the view; or when the front-end interaction wants to change the data, we have to do the above steps again, while manual operation of DOM is a tedious process and error-prone. Vue.js is a Javascript library that provides MVVM-style bidirectional data binding, focusing on the View layer. It saves developers the process of operating DOM and only needs to change the data. Vue will encapsulate the DOM through the Dircetives instruction. When the data changes, it will notify the instruction to modify the corresponding DOM, and the data-driven DOM changes. DOM is a natural mapping of the data. Vue also listens for operations, and when the view changes, vue monitors these changes, thus changing the data, thus forming a two-way binding of the data. Vue is a MVVM framework. DOM is a natural mapping of data. The traditional mode is to request data from model through an Ajax request, and then manually trigger the DOM to pass in the data to modify the page. In Vue, Directives encapsulates view. When the data in model changes, Vue modifies DOM through Directives instructions. At the same time, it also realizes the monitoring of the view view through DOM Listener. When the DOM changes, it will be monitored, realize the change of model, and realize the two-way binding of data.

2. Component response principle data (model) change driver view (view) automatic update

When you pass a normal JavaScript object to the data option of the Vue instance, Vue will iterate through all the properties of the object and use Object.defineProperty to convert all of these properties to getter/setter. Object.defineProperty is a feature of ES5 that cannot be shim, which is why Vue does not support IE8 and earlier browsers. Users do not see the getter/setter, but internally they let Vue track dependencies, notifying them of changes when properties are accessed and modified. The problem to note here is that the browser console does not format getter/setter differently when printing data objects, so you may need to install vue-devtools to get a more friendly check interface. Each component instance has a corresponding watcher instance object, which records the properties as dependencies during component rendering, and then tells watcher to recalculate when the dependency's setter is called, causing its associated components to be updated.

3. 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.

Componentization implements the extension of HTML elements to encapsulate available code. Each independent visual / interactive area on the page is regarded as a component; each component corresponds to a project directory under which all kinds of resources required by the component are maintained nearby; the page is just the container of the component. Components can be nested and freely combined to form a complete page.

Thank you for reading! This is the end of this article on "what is the core idea 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.