Support the blogger 咪 Mi Mi

advantages:

• The user experience is good and fast, and the content of the content does not need to be reloaded the entire page,Avoid unnecessary jumping and repeated rendering；
• Based on the above point, the SPA is relatively rightThe pressure of the server is small；
• front and back -end responsibilities are separated,The architecture is clear, the front -end interactive logic, the back end is responsible for data processing;

Disadvantages:

• The first load time is too much: In order to achieve single -page web application functions and display effects, you need to load JavaScript and CSS when loading the page, and load on some pages on demand;
• forward rear retreat circuit management: Since the single page application displays all the content in a page, the forward and backfrontation of the browser cannot be used. All page switching requires the establishment of stack management by itself;
• SEO is more difficult: Because all the content is dynamically replaced in one page, it has a natural weakness on SEO.

v-if:

• V-IF is a real condition rendering, because it will ensure that the event monitor and subclasses in the conditional blocks during the switch are properly destroyed and reconstructed; Do not do it -it does not start to render conditional blocks until the first condition becomes true.

v-show:

• V-SHOW is much simpler-no matter what the initial conditions are, the elements will always be rendered, and it is simply based on CSSdisplayAttribute Switch.

Summary

• V-IF is suitable for rarely changing conditions at runtime,No need to switch conditions frequently

  Scene of; V-SHOW is suitable for needVery frequent switching conditionsScene.

computed：

• computedis the calculation attribute, dependence on other attribute values, and the value of computed has cache. Only when the attribute it depends changes, the next time the value of the computed is re -calculated.

watch：

• watchis more of the role of “observation”, similar to the monitoring recovery of certain data. Whenever the monitoring data changes, the callback will be performed for follow -up operation;

Use scene:

• When we need to perform numerical calculations and depend on other data, we should use compute, because it can be usedcache characteristic, avoid each time you get the value, you must re -calculate;
• When we need to perform asynchronous or large -cost operations when the data changes, we should use Watch and use the Watch option to allow us to executeasynchronous operation (visit an API), limited us to perform this operationfrequency, and before we get the final result, set itmiddle state. These are all unable to do the calculation attributes.

• can be in the hook function

  Call increated、beforeMount、mounted, because in these three hook functions, Data has been created to assign the data returned by the service end. But the recommendation iscreatedHook function calls asynchronous requests, because increatedHook function calling asynchronous requests has the following advantages:

  • can get the server data faster, reduce the page loading time;
  • SSR does not support the BeForemount and Mountain hook functions, so placing it in Created helps consistency;

• 5 5 functionmountedBefore being called, Vue has mounted the compiled template to the page, so

  Inmounted, you can access the operation DOM. Can refer toVue’s life cycle schematic diagram

• keep-aliveis a built -in component of VUE, which can make the components containingReserve status，Avoid re -rendering, it has the following characteristics:
  • Generally combined with routing and dynamic components, used forcache component；
  • ProvideincludeandexcludeProperties, both support the string or regular expression,includeindicates that only the component of the name matching will be cached,excludeindicates that any component with a name match will not be cached, of whichexcludeThe priority ratioincludehigh;
  • Corresponding to two hook functionsactivatedanddeactivated, when the component is activated, trigger the hook functionactivated, when the component is removed, the hook function is triggered

    The advantages ofdeactivated。

Proxy are as follows:

• Proxy can directly monitor the object rather than attribute;
• ProXY can directly monitor the changes in the array;
• Proxy has as many as 13 interception methods, which are not limited to Apply, OwNKEYS, DeleteProperty, HAS, etc. Object.defineProperty is not available;
• Proxy returns a new object. We can operate only the new object to achieve the goal, and Object.DefineProperty can only be modified directly through the object attribute;
• PROXY will be optimized by the key performance of browser manufacturers as the new standard, which is the new standard performance dividend in the legendary new standard;

  The advantages of

Object.defineProperty are as follows:

• Compatibility is good and supports IE9, and Proxy’s existence of browser compatibility issues, and it is not possible to use Polyfill, so the author of Vue declares that it needs to wait until the next big version (3.0) to rewriting it with Proxy.

  The implementation principle of

virtual DOM mainly includes the following 3 parts:

• Use the JavaScript object to simulate the real DOM tree to abstract the real DOM;
• Diff algorithm -compare the difference between the two virtual DOM trees;
• PACH algorithm — Apply the differences between the two virtual DOM objects to the real DOM tree.

Click here to learn more about the virtual DOM principle

advantages:

• Guaranteed performance lower limit: The virtual DOM of the frame needs to be adapted to the operation that any upper API may produce. Some of its DOM operations must be universal, so its performance is not the best; but it is better than the rough DOM operation performance. Many, so the virtual DOM of the framework can ensure that when you don’t need to be manually optimized, you can still provide good performance, that is, to ensure the lower limit of performance;
• No need to manually operate DOM: We no longer need to manually operate the DOM, just write it

  The code logic ofView-Model, the framework will be based onVirtual DOMandData two -way binding, help us update the view in a expected manner, which greatly improves our development efficiency;

• Cross -platform: Virtual DOM is essentially the JavaScript object, and the DOM is strongly related to the platform. Compared with the virtual DOMConvenient cross -platform operation, such as server rendering, weex development and so on.

Disadvantages:

• Can't perform extreme optimization: Although the virtual DOM + reasonable optimization is enough to cope with the performance requirements of most applications, the virtual DOM cannot be performed in some applications with high performance requirementstargetedExtreme optimization.

• Model–View–ViewModel （MVVM）is a software architecture design mode,MVVMderived from the classicModel–View–Controller（MVC）mode,

  The emergence ofMVVMpromotes the separation of front -end development and back -end business logic, and greatly improves the efficiency of front -end development.

  The core ofMVVMisViewModellayer, it is like a Value Converter, responsible for conversion

  The data objects inModel make the data easier to manage and use.Two -way data binding, down and

  TheModellayer is performed through the interface requestData interaction, start up and down.

view layer

• view isView layer, that is, the user interface. The front end is mainly constructed by HTML and CSS.

MODEL layer

• MODEL refers toData model, generally refers to the various business logic processing and data control of the back -end, which is the API interface provided by the back end for the front end.

viewmodel layer

• ViewModelwas generated and maintained by the organization of front -end developersView data layer. On this level, the front -end developer conversion processing the Model data obtained from the back end, and doSecond packagingto generate the expected view data model that conforms to the view layer. It should be noted that the data model encapsulated by ViewModel includes viewStateandBehaviortwo parts, while the data model of the Model layer contains onlyState, such as what is displayed on the page, what happened when the page was loaded, what happened to this piece, and what happened when this rollingView Behavior(Interaction), the view status and behavior are encapsulated in ViewModel. This encapsulation enables the viewmodel to describe the view layer completely.