首先说下自己对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:以上是本人自己在学习过程中的一些总结,有不足的地方望指出,谢谢!

Logo

前往低代码交流专区

更多推荐