Data driven

  • Data responsive: Data refers to data models, which are just plain old JavaScript objects. As we modify the data, the view is updated to avoid tedious DOM manipulation and improve development efficiency.

  • Bidirectional binding:

    • The data changes, the view changes, the view changes, the data changes
    • We can use v-Model for two-way binding of data

  • Data drive is one of VU’s unique features

    • You just need to focus on the data itself, not how the data is rendered into the view, right

Core principles of data responsiveness

VUE 2.x

When passing an ordinary javaScript Object to a Vue instance as the data option, Vue iterates through all of the Object’s properties and converts them all into getters/setters using Object.defineProperty. Object.defineproperty is an ES5 property that cannot be shim (degraded), so Vue does not support versions below IE8.

<body> <div id="app">hello</div> <script> ProxyData (data) function proxyData(data){// Let vm = {} proxyData(data) function proxyData(data) => {// convert attributes in data to setters/getters for VM // data hijacking: Object. DefineProperty (VM,key,{// Enumerable :truem, // configurable) Object. DefineProperty, 6464x, signals :true, disables any additional information, and disables any additional information. Return ddata[key]}, // Set (newValue){console.log('set:',key,newValue); If (newValue === data[key]){return} data[key] = newValue, Document.queryselector ('#app').textContent = data[key]}})}) console.log(vm.msg); </script> </body>Copy the code

Vue 3.x

Vue 3 uses Proxy to listen on objects directly, rather than properties. New to ES6 are properties, performance optimized by the browser.

// Get (target,key){console.log('get,key:',key,target[key]);  Return target[key]}, // Set (target,key,newValue){console.log('set,key:',key,newValue); if(target[key] === newValue){ return } target[key] = newValue document.querySelector('#app').textContent = target[key] } })Copy the code

Publish and subscribe model

We assume that there is a signal center where one task “publishes” a signal when it is finished, and other tasks can “subscribe” to the center to know when they can start executing. This is called publish subscribe.

// The publisher, Let vm = new Vue() vm.$on('dataChange',()=>{console.log('data-- change-- ')}) vm.Copy the code
  • Communication between sibling components
//eventBus.js //eventBus.js //eventBus.js //eventBus.js //eventBus.js //eventBus.js // let eventHub = new Vue() //ComponentA. EventHub.$emit('add-todo',{text: this.newtext})} // componentb.vue // subscriber created:function(){ eventHub.$on('add-todo',this.addTodo) }Copy the code
  • Customize the publish and subscribe mode
Class EventEmitter {constructor () {//{'click':[fn1,fn2],'change':[fn1,fn2]} this.subs = Object. The create (null)} / / register event $on (eventType, handler) {this. Subs [eventType] = this. Subs/eventType | | [] $emit (eventType) {if(this.subs[eventType]){if(this.subs[eventType]){ This.subs [eventType].emitters ()= new EventEmitter emitters.$on('click',()=>{ console.log('click1'); }) em.$on('click',()=>{ console.log('click2'); }) em.$emit('click') </script>Copy the code

Observer model

  • There is no event center in observer mode, only publisher and subscriber
Constructor () {// Record all subscribers this.subs = []} addSub (sub) {if(sub &&) Sub.update){this.subs.push(sub)}} notify () {this.subs.foreach (sub => {sub.update()})}} // subscriber class Watcher { update () { console.log('update'); }} let dep = new dep () let watcher = new watcher () dep.addSub(watcher) dep.notify() </script>Copy the code

The difference between the observer model and the publish-subscribe model

  • The observer pattern is scheduled by specific targets, such as when an event is triggered, the Dep calls the observer’s methods, so there is a dependency between the observer pattern’s subscribers and publishers.
  • Publish/subscribe: Scheduled by a unified dispatch center, so publishers and subscribers do not need to be aware of each other’s existence.