对vue实现数据实时更新，render() 函数的一些理解

首先说下自己对render() 函数的理解

<div id="app">   <--app包裹的整个都属于模板，模板并不是html，只是类似于html，其实是字符串-->
<p>{{name}}</p>
<p v-if="isShow">{{age}}<p>
</div>

1. vue的模板里面有逻辑，v-if， v-for，并且存在变量， 模板里面的内容浏览器是不能够识别的，必须要通过js去转换为html，才能够显示页面。这里就用到了render()函数。
2. render() 函数解析模板里面的内容，贴出render函数渲染 上面模板的内容

with(this) {   // this 指向当前实例，也就是this
return _c('div', { // 创建div
attrs: {
"id": "app" // id是app
}
}, [
_v("<--app包裹的整个都属于模板，模板并不是html，只是类似于html，其实是字符串-->\n        "), //  注释的部分被渲染为文本节点
_c('p',
[_v(_s(name))]), // name 就是 this.name，上面用到的name，在这里解析为data里面定义的name
_v(" "), (isShow) ? _c('p', [_v(_s(age))]) : _e(), _c('p')]) // v-if 的逻辑判断
}

render() 函数里面返回的是一个 vnode，也就是虚拟dom。

3.在首次渲染的过程中，调用了 updateComponent()，updateComponent() 里面调用了 updated(), 把render() 函数返回的vnode传进去了，虚拟dom挂载完毕。显示页面，updated()也是借用了 snabbdom 里面的patch(container, vnode)方法，

贴出自己理解的updateComponent()的方法

function updated(vnode) {
const prevVnode = vm._vnode;
vm._vnode = vnode;
if (!prevVnode) {  // 首次渲染
vm.$el = vm.__patch__(vm.$el, vnode); // 挂载虚拟dom，显示视图
} else {
vm.$el = vm.__patch__(prevVnode, vnode); // 再次渲染，替换之前的视图
};
};
function updateComponent() {
return updated(render());  // 返回编译过后的虚拟dom
};

4.data里面的某一个数据更新，也会在set里面再次调用
updateComponent()，也就是再次调用render()，重新编译，也就是updated()，else里面的方法，把更新的部分实时显示在视图上面。

ps:以上是本人自己在学习过程中的一些总结，有不足的地方望指出，谢谢！