render函数和Vue的执行过程

前言:

 

很多人，在Vue里面我们写一些东西会自动帮我们渲染，现在我们一起探究一下Vue的渲染工作流程吧。

一.什么是render函数？

简单的说，在vue中我们使用模板HTML语法来组件页面的,使用render函数我们可以用js语言来构建DOM，因为vue是虚拟dom,所以在拿到template模板时也要转译程VNode的函数，而render函数构建DOM，vue就免去了转译的过程。

当使用render函数描述虚拟DOM时,Vue提供了一个函数，这个函数是构建虚拟DOM所需要的工具。官网上给他起了个名字加createElement。还有约定它的简写h。

二.render函数的参数

render函数即渲染函数，它是个函数，render函数的返回值是Vnode（即：虚拟节点,也就是我们要渲染的节点）

createElement是第一个参数是必填的,可以是String| Object | Fuction

1. String，表示的是HTML标签名

2.Object,一个含有数据的组件选项对象

3.Fucntion,返回了一个含有标签名或者组件选项对象的async函数

4.代码示例：

    render: function (createElement) {
      // String
      return createElement('h1');

      //Object
      return createElement({
        template: " <div>锄禾日当午</div> "
      })

      // Function
      let domFun = function () {
        return {
          template: " <div> 锄禾日当午</div> "

        }
      }
      return createElement(domFun())
    }

解析:这样我们就创建好了一个虚拟节点。

三.渲染函数结合生成虚拟DOM树

通过这张图就可以观察到Vue的渲染整个流程,接下来我们一起分析。

1.模板

（1）.模板template:Vue的模板基于纯HTML,基于Vue的模板语法,我们可以比较方便地声明数据和UI的关系(template标签下的内容,el指定的内容)。

（2）图示：

2.AST

(1) AST是abstrac Syntax Tree的简称(抽象语法树),Vue使用HTML的Parse将HTML模板编译

解析为AST,并且AST进行一些优化的标记处理，提取最大的静态树，方便Virtual DOM时直接跳过

Diff。

3.渲染函数----------->render

渲染函数是用来生成 虚拟节点 的。Vue推荐使用模板来构建我们的应用界面，在底层实现中Vue会将编译模板渲染函数，当然我们也可以不写模板，直接写渲染函数以获取更好的控制。        

四.真实的DOM和虚拟节点

1.真实的DOM

（1）什么是真实的DOM

图1

 

图2

 （2）真实的DOM里面有很多的属性，且运行在浏览器中

2.虚拟DOM

1.Virtual DOM:虚拟DOM就是使用js的object模拟真实的dom,当（data）发生变化，更新做diff（对比新旧虚拟dom）,达到最少操作dom的效果。

2.上文说过render函数产出虚拟DOM，我们看一下Vue的那些地方用到了。

 3.虚拟DOM的好处。

当数据发生变化的时候, 会重新产生一份新的虚拟DOM进行对比，通过Diff算法比较。从而最有效的更新UI。

图示：

浅谈，希望对大家有帮助。