Data driven

Data response

  • The data model is just a normal javascript object, and as we modify the data, the view is updated, eliminating tedious DOM manipulation and improving development efficiency

Two-way binding

  • Data changes, view changes; As the view changes, so does the data
  • We can use the V-Model to create two-way data data on form elements

Data-driven is one of the most unique features of Vue

  • You only need to care about the data itself, not how the data is rendered into the view, right

Core principles of data responsiveness

1. Vue 2.x

  • Vue 2.x In-depth responsivity principle

  • Object.defineProperty

  • Browser compatible with IE8 or higher (not compatible with IE8)

<! DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content="ie=edge"> <title>defineProperty</title> </head> <body> <div id="app"> hello </div> <script> 'hello'} // Instantiate Vue let vm = {} object.defineProperty (vm, 'MSG ', {// Enumerable: // The new information is freely configurable and works without any additional information. The new information is freely configurable and works without any additional information. // The new information is freely configurable and works without additional information. ', data.msg) return data.msg}, // Set (newValue) {console.log('set: ', newValue) if (newValue === data.msg) {return} data.msg = newValue, TextContent = data.msg}}) // Test vm. MSG = 'Hello World' console.log(vm.msg) </script> </body> </html>Copy the code
  • What do getters and setters do if multiple properties in an object need to be converted? Iterate over all properties of the object

2.Vue3.x

1. Publish and subscribe

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, </title> </head> <body> <script> class EventEmitter {constructor () { // { click: [fn1, fn2], 'change': [fn]} this.subs = object.create (null) $on (eventType, handler) { this.subs[eventType] = this.subs[eventType] || [] this.subs[eventType].push(handler) } $emit (eventType) { if  (this.subs[eventType]) { this.subs[eventType].forEach(handler => { handler() }) } } } let em = new EventEmitter() em.$on('click', function() { console.log('1111') }) em.$on('click', function() { console.log('2222') }) em.$emit('change') </script> </body> </html>Copy the code

Publish and subscribe models include: subscriber, publisher, and signal center

We assume that there is a signal center that publishes a signal when a task is finished, and that other tasks can subscribe to the signal center to know when to start their own execution. This is called a publish-subscribe pattern.

2. Observer mode

Observer (Subscriber) – Watcher

Update (): Exactly what to do when an event occurs

Target (publisher) -dep

  • Subs array: Stores all observers
  • AddSub (): Adds an observer
  • Notify (): When an event occurs, the update() method of all observers is called
  • No event center