About MVVM

MVC

MVC is a software architecture of Model + View + Controller. View is the front-end View, which deals directly with users. Model is a data Model, which can be understood as database persistent storage; Controller is the business logic Controller that connects the Model and View.

  • When the user modifies the data on the View page, the Model object is updated and modified through the Controller Controller.
  • The user requests a URL and accesses the data through the Controller
  • The whole process can be understood as follows: View front-end interface update -Controller Controller processing – update Model data – data update through the Controller to return to the view-view page reflect the update

MVVM

As the front-end business logic continues to expand… front-end data and business becomes more complex, DOM operations will definitely increase. If you operate DOM directly in the previous way, the performance will be poor. So the front-end leaders separated the data Model from the page View. When the data was updated, DOM was automatically updated, and if the page had updated the Model, it was also updated synchronously. MVVM mode emerged at the historic moment. In software engineering, we learned to reduce coupling, separating the Model from the View is also a decoupling operation.

MVVM = Model + View + ViewModel

What MVVM does is completely strip the link between View and Model, leaving any data synchronization to the ViewModel. Changes to views and updates to data are synchronized through the ViewModel.

Vue bidirectional binding principle (Vue does not support IE8)

What is bidirectional binding

  • View updates update the Model synchronously
  • Model updates are also synchronized on the view

The principle of bidirectional binding

  • The Observer listens for data and notifies Watcher of any updates
  • The Compile directive parses, the Compile directive updates the view
  • Watcher subscribes and is notified of each property change, performs the relevant callback function, and updates the view

Vue life cycle

  • BeforeCreate: after instance initialization, before data listening and template compilation
  • Created: Instantiation complete, data listener bound, DOM not generated, $el does not exist
  • BeforeMounted: Compile template, $el is present (render first called), but the page has no content (not mounted)
  • Mounted: Replace the DOM to which the EL points with the compiled HTML file
  • BeforeUpdate: Monitors data changes before components are updated; (The data has been updated, but the virtual DOM has not been re-rendered)
  • Updated: After the component is updated; (Virtual DOM has been re-rendered & patched)
  • BeforeDestory: Before instance destruction
  • Destoryed: Instance destruction is complete
  • Activated: activated when the keep-alive component is activated
  • Deactivated: Activated when the keep-alive component is disabled

Virtual DOM in Vue

As mentioned above, using MVVM can achieve bidirectional binding, reducing the DOM frequent operation when data updates are frequent. However, when the data is updated, the render of the view still needs to update the DOM tree. The DOM is very, very large, and performance might suffer if you were to work directly with it, so FEer was smart enough to think of using JS objects to simulate the DOM tree, or virtual DOM.

Of course, it would still be a lot of work to render the entire DOM tree every time the view was updated. As a result, diff() is compared between the old and new trees before each rendering. The difference is updated to the appropriate location.

Understanding of Vue components

Components, which we can think of as a custom, reusable piece of code, have specific functions. Vue components are also Vue instances, such as header and Footer. Furthermore, components can communicate with each other.

Single file component

A single-file component is a VUE file is a component, and a file can export a component.

Data must be a function in a component

Data is a function that can be kept private when used in different places.

// If data is not a function
let component1 = new MyComponent()
let component2 = new MyComponent()

component1.data.title = '123'
// The title property of data for Component2 will also change
// So both instances of data must have their own fields
Copy the code

Intercomponent communication

Communication between parent and child components

  • propsPassing data,v-on.emitListen for/fire custom event responses

Grandparent component communication

  • Two parent-child component communications

Sibling communication

  • new Vue()As EventBus, one is responsible$emitTrigger event, another$onListen for event responses.

A more complicated situation:Vuex

Difference between Computed attributes and Methods and Watch attributes

Computed implementation: Both attributes and Computed attributes generate a Watcher instance. So, when it depends on updates, the calculated properties are updated with them.

  • Computed is cached and does not update if the dependent data does not change
  • Methods are evaluated each time they are called
  • Watch listens for attribute changes and will handle them accordingly

How to understand wechat applets

  • Wechat applet adopts special markup language (WXML, WXSS)
  • The runtime is different, the browser runtime is the operating system; Small program this runtime is wechat
  • The main purpose of the small program is to do entrance, technology is not its value