Vue之updata方法

Vue 的 _update 是实例的一个私有方法,它有 2 个被调用,一个是首次渲染,一个是数据更新的时候渲染;

  • _update 方法的作用是把 VNode 渲染成真实的 DOM;


    1.png

    可以看到,甚至在 web 平台上,是否是服务端渲染也会对这个方法产生影响。因为在服务端渲染中,没有真实的浏览器 DOM 环境,所以不需要把 VNode 最终转换成 DOM,因此是一个空函数,而在浏览器端渲染中,它指向了 patch 方法,它的定义在 src/platforms/web/runtime/patch.js中

2.png
3.png
4.png

再回到 patch 方法,首次渲染我们调用了 createElm 方法,这里传入的 parentElm 是 oldVnode.elm 的父元素,在我们的例子是 id 为 #app div 的父元素,也就是 Body;实际上整个过程就是递归创建了一个完整的 DOM 树并插入到 Body 上。

那么至此我们从主线上把模板和数据如何渲染成最终的 DOM 的过程分析完毕了,我们可以通过下图更直观地看到从初始化 Vue 到最终渲染的整个过程。

屏幕快照 2021-07-15 下午3.22.35.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Virtual DOM Virtual DOM这个概念相信大部分人都不会陌生,它产生的前提是浏览器中的DOM是很“...
    oWSQo阅读 4,734评论 0 2
  • update Vue 的_update 是实例的一个私有方法,它被调用的时机有 2 个,一个是首次渲染,一个是数据...
    QLing09阅读 14,576评论 0 5
  • update Vue 的 _update 是实例的一个私有方法,它被调用的时机有 2 个,一个是首次渲染,一个是数...
    阿畅_阅读 10,031评论 0 1
  • VUE核心思想是数据驱动,比如在使用之中 我们在界面上点击按钮修改数据 ,在vue上只需要修改数据即可,DOM就会...
    小螃蟹_5f4c阅读 3,878评论 0 1
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 12,732评论 28 53