The Mini-Vue code has been posted on Github.

Data driven

  • Data responsive, bidirectional binding, 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
    • The data changes, the view changes, the view changes, the data changes
    • We can use v-Models to create two-way data binding 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

Vue2. X response formula principle

When you pass an ordinary JavaScript object into a Vue instance as the data option, Vue iterates through all of the object’s properties, And use Object.defineProperty to turn all of these properties into getters/setters. Object.defineproperty is a non-shim feature in ES5, which is why Vue does not support IE8 and earlier browsers.

Let’s demonstrate how object.defineProperty is used

<template>
    <div id='app'>hello</div>
</template>

<script>
    // Simulate data in vue
    let data = {
        msg: 'hello'
    }
    // Simulate a VUE instance
    let vm = {}
    // Data hijacking: To intervene when accessing or setting members of a VM
    Object.defineProperty(vm, 'msg', {
        / / can be enumerated
        enumerable: true./ / can be configured
        configurable: true.// Value operation
        get() {
            console.log('get:', data.msg)
            return data.msg
        },
        // Set the value operation
        set(newValue) {
            if(newValue === data.msg) {
                return
            }
            data.msg = newValue
            
            document.querySelector('#app').textContent = data.msg
        }
    })
</script>
Copy the code

The above code shows how to convert a single attribute. If there are multiple attributes, you need to add defineProperty to the attribute in a loop

Vue3. X response principle

Vue3. X uses proxy to listen on objects, not properties, and Proxy IE does not support this.

Let’s use code to demonstrate proxy

// let data = {MSG: Get (target, key) {return target(key)}, Set (target, key, newValue) { if(target[key] === newValue) { return } target[key] = newValue document.querySelector('#app').textContent = target[key] } }) </script>Copy the code

Publish and subscribe model

We assume there is a ‘signal center’ where a task publishes a signal when it is finished, and other tasks can ‘subscibe’ the signal to know when they can start executing. This is called a publish-subscribe pattern.

We use the sibling communication process to demonstrate the publish subscribe pattern

// eventBus.js

// Event center
let eventBus = new Vue();

// ComponentA.vue
/ / publisher
addTodo: function() {
    // Publish the message
    eventBus.$emit('add-todo', {text: 'New message released.'})}// ComponentB.vue
/ / subscriber
create: function() {
    // Subscribe to the message
    eventBus.$on('add-todo'.() = >{})}Copy the code

Let’s simulate vUE custom events

let vm = new Vue();

vm.$on('dataChange'.() = > {
    console.log('dataChange')
})

vm.$emit('dataChange')
Copy the code
class EventEmitter {
    constructor() {
        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] && Array.isArray(this.subs[eventType])) {
            this.subs[eventType].forEach(handler= > {
                handler()
            })
        }
        
    }
}
Copy the code

Observer model

  • Observer (subscriber) –Watcher
    • Update () Specifies what to do when an event occurs
  • Target (publisher) –Dep
    • The subs array stores all observers
    • AddSub () adds an observer
    • Notify () Calls the update method of all observers when an event occurs
  • No event center

Let’s demonstrate the observer pattern with a piece of code

// Publisher - target
class Dep {
    constructor() {
        this.subs = []
    }
    
    addSub(sub) {
        if(sub && sub.update) {
            this.subs.push(sub)
        }
    }
    
    notify() {
        this.subs.forEach(sub= > {
            sub.update()
        })
    }
}

// Subscriber Watcher
class Watcher(a){
    update() {
        console.log('update')}}Copy the code

Conclusion:

  • The observer mode has specific target scheduling, such as event triggering, and the Dep will call the observer method, so there is a dependency between the observer mode subscribers and publishers
  • The publish/subscribe pattern is invoked by the unified dispatch center, so publishers and subscribers do not need to be aware of each other’s existence.