对vue实现数据实时更新,render() 函数的一些理解
首先说下自己对render() 函数的理解<div id="app"><--app包裹的整个都属于模板,模板并不是html,只是类似于html,其实是字符串--><p>{{name}}</p><p v-if="isShow">{{age}}<p></div>vue的模...
·
首先说下自己对render() 函数的理解
<div id="app"> <--app包裹的整个都属于模板,模板并不是html,只是类似于html,其实是字符串-->
<p>{{name}}</p>
<p v-if="isShow">{{age}}<p>
</div>
- vue的模板里面有逻辑,v-if, v-for,并且存在变量, 模板里面的内容浏览器是不能够识别的,必须要通过js去转换为html,才能够显示页面。这里就用到了render()函数。
- 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:以上是本人自己在学习过程中的一些总结,有不足的地方望指出,谢谢!
更多推荐
已为社区贡献3条内容
所有评论(0)