SOURCE

var opt = {el:'#app', data:{name:'请输入...', age:30}}
document.addEventListener('DOMContentLoaded', function(){
    new Vue(opt)
    // setTimeout(() => {
    //     opt.data.name = '王永峰'
    // }, 2000);
}, false)

function inputchange(){
  const dom = document.getElementById('input')
  opt.data.name = dom.value
}

// class vue 实例
class Vue{
    constructor(opt){
        console.log(123)
        this.opt = opt 
        this.observe(opt.data)
        let root = document.querySelector(opt.el) // 获取到id 为app的元素
        this.compile(root)
    }
    // 为响应式对象 data 里的每一个 key 绑定一个观察者对象
    observe(data){ // data: {name:'检索中...', age:30}
        Object.keys(data).forEach(key => { // 遍历data对象
            let obv = new Observer()  // new 实例Observer对象
            data["_"+key] = data[key]
            // 通过 getter setter 暴露 for 循环中作用域下的 obv，闭包产生
            Object.defineProperty(data, key, {
                get(){
                  	// 判断Observer对象下面是否存在targe 存在则调取 push的方法
                    Observer.target && obv.addSubNode(Observer.target);
                  	// 返回当前对象value
                    return data['_'+key]
                }, 
                set(newVal){ // 执行了Observer update方法
                    obv.update(newVal)
                    data['_'+key] = newVal // 重新给data['_'+key]的vlaue 赋值
                }
            })
        })
    }
    // 初始化页面，遍历 DOM，收集每一个key变化时，随之调整的位置，以观察者方法存放起来    
    compile(node){ // node: dom对象
      console.log('complie');
      	// 给forEach对象绑定node.childNodes 
        [].forEach.call(node.childNodes, child =>{
          	// 判断当前child的第一个元素是否存在
          	// /\{\{(.*)\}\}/ 匹配是否包含{{}}
          	// 如果child没有第一个元素 并且匹配到child内容包含{{}}
            if(!child.firstElementChild && /\{\{(.*)\}\}/.test(child.innerHTML)){
                let key = RegExp.$1.trim() // 获取到最近一次正则匹配到的内容 并两头去空
                child.innerHTML = child.innerHTML.replace(new RegExp('\\{\\{\\s*'+ key +'\\s*\\}\\}', 'gm'),this.opt.data[key]) 
                Observer.target = child
                this.opt.data[key] 
                Observer.target = null
            }
            else if (child.firstElementChild) 
            this.compile(child)
        })
    }    
}
// 常规观察者类 
class Observer{
    constructor(){
        this.subNode = []    
    }
    addSubNode(node){
        this.subNode.push(node)
    }
    update(newVal){
        this.subNode.forEach(node=>{
            node.innerHTML = newVal
        })
    }
}

 <div id='app'>
        <input id="input" oninput="inputchange()" />
        <h3>姓名</h3>
        <p>{{name}}</p>
        <h3>年龄</h3>
        <p>{{age}}</p>
    </div>