Original link: https://blog.csdn.net/weixin_45127981/article/details/90699150
Vue core idea: a data-driven, component-based
First, data-driven
Conventional front-end data interaction is acquired from the server data using Ajax, and DOM operations to change the view; or when the front end of the interaction data to be changed, but also the above-described step again, the DOM manually is a tedious and error-prone process.
Vue.js is a Javascript library provides two-way data binding MVVM style, focusing on the View layer. It allows developers to save a DOM operation, we only need to change the data. Vue will pass Dircetives instructions to the DOM to make one package, when the data is changed to modify the instruction notifies the corresponding DOM, DOM change data driver, the data is a DOM natural mapping.
Vue also listens to the operation, when the view is changed, the VUE monitor these changes, thereby changing the data, thus forming a two-way data binding.
Vue MVVM is a frame. The DOM is one kind of natural mapping data. The traditional model is requesting data from the model, and then manually trigger DOM incoming data modify page via an Ajax request. In Vue, Directives view of the package, when the data in the model change occurs, to modify the DOM Vue will Directives instruction. But also to achieve by listening to the view view DOM Listener, when the DOM changes will be monitored to achieve change model, the two-way data binding.
Second, the principle component response
Data (Model) changing the driving view (view) Automatic Updates
When you put a plain JavaScript object to the instance data option Vue, Vue will go through all of the properties of this object, and use Object.defineProperty These attributes are all into getter / setter. Object.defineProperty ES5 is not in a shim properties, which is why Vue does not support the cause of IE8 and earlier versions of the browser.
Users do not see getter / setter, but internally they let Vue track dependent, when informed of the changes in the property is accessed and modified. The issue here should be noted that the browser console when printing data object format getter / setter and different, so you may need to install vue-devtools to get more friendly Check the interface.
Each instance has a corresponding watcher component instance objects, it is recorded as attribute dependencies in the assembly process of rendering, when the dependency after the setter is invoked, it informs the watcher recalculated, thereby causing its associated components to be updated .
Third, the components of
Realization extension assembly HTML elements, reusable code package. Each component corresponds to a ViewModel. On a separate page for each visual / interactive area can be considered a component. Each component corresponds to a project directory, the resources required components in this catalog went into maintenance. Page is a container assembly, components may be freely combined to form a complete nested pages.