Vue is designed to drive the display of normal data and the DOM in both directions.

Here’s an example:

1. Dom driver data

We write an input element but we write an extra V-model attribute, which refers to a data value of the vue instance. When the input value changes, we change the corresponding data value of the vue instance.

varInput = get the DOM of input; input.oninput =function (e) {myvue.data. Some value = e.target.value}Copy the code

2. Data-driven DOM

We write a div element with text nodes written according to vUE compilation rules. Vue knows that the node text tag is bound to some value of the Vue instance.

<div>{{some value of vue instance}}</div>
Copy the code

Vue creates the virtual DOM with a render function

render(Function h to create the virtual DOM in the vUE prototype){
// Create the virtual DOM as a function.
//Vue.prototype.createElm == h
    return h('div'.null, a value or child node of the vue instance.// This is a vue instance value
}

Copy the code
//Vue.prototype.createElement == h
Vue.prototype.createElement=function(tag,props,children){
    return {
        tag:tag,
        children:children,
        props:props,
    }
}

Copy the code

We now have the virtual DOM compiled by templates.

Some virtual DOM are bound to a value of a Vue instance

A change in this value causes an update to the DOM.

How to update?

Isn’t the virtual DOM bound to the vue instance’s data? Let’s write an array to this data to collect these dom dependencies

function defineReactive(obj,key,val){
    
    Object.defineProperty(obj,key,{
        get(){
            return val
        },
        set(newVal){ val=newVal; kvue.update(); }})return 
}
Copy the code

Paralyze, it is to write down, the principle of vue is if else vue source code a function and multiple logic why not separate definition function, really serve. It’s just a data-driven view. It’s not that complicated

class Dep {
	constructor(val){
        this.val = val; 
		this.subs = []
	}
	// Add a reference to the virtual DOM
	addSub(sub){
		this.subs.push(sub);
	}
    Weakmap = weakMap = weakMap = weakMap = weakMap = weakMap = weakMap = weakMap = weakMap
    deleteSub(obj){
        // Find and delete
    }

	notify(){
		this.subs.forEach((sub) = >{
			sub.update()
		})
	}
}
// This. Subs array contains a vnode

var data={
    title:'I am a title'
}


function defineReactive(obj,key,mydep){
    Object.defineProperty(obj,key,{
        get(){
            return mydep.val;
        },
        set(newVal){ val=newVal; mydep.notify(); }})return mydep;
}

var dep=new Dep(data.title);
defineReactive(data,title,dep);


// The core part is vNode creation
// To compile through the template, you need to find the reference, then add an update function to each reference data, and add the vNode to the Dep instance.Referenced data will have more than an update function for collection with each Vnode want to delete must be achieved through the function, and then layer by layer to find a reference vnode and call the update function to notify the collector to delete themselves, of course, using WeakMap seems to be able to avoid this step. The same idea I have is perfect for a responsive data-driven view. I don't think so. I have to do it again after someone else has made the wheel.Copy the code