一、如何提问

1. 组件渲染和更新过程 image.png

二、涉及到的知识点

image.png1.前置知识—with语法

a.将代码块中作用域设置为特定对象（修改作用域会导致性能问题）

b.代码块中自由变量会当作当前对象的属性，如果查不到该属性，则会报错

2.vue template complier 将模板编译成render函数

（1）模板具有的功能

模板不只是html，还可判断、循环、计算

（2）编译成什么—js代码

html只是标签语言，只有js可以满足上述需求；
转换成了render函数：
a.里面是一个with代码块，作用域对象是this
b.返回createElement生成的vnode；_c函数接受三个参数，第一个为标签名，第二个为标签信息，第三个为子元素信息
a.插值
image.png

b.表达式

image.png

c.属性与动态属性

image.png

d.条件判断

根据不同条件返回不同_c函数
image.png

e.循环

_l函数接受两个函数，要遍历的数组，执行的回调函数（返回createElement函数生成的vnode）
image.png

f.事件

在第二个参数的on属性中

  1. _c('div',{on:{'click': clickHandler},[])

image.png

g.v-model

image.png
createElement函数中，input数据源为绑定的变量，监听了input事件，在触发事件时更新该变量

  1. _c // createElement函数 类似于snabbdom中的h函数
  2. _v // createTextVnode函数 创建文本节点函数
  3. _s // toString函数
  4. _l // renderlist函数 循环渲染函数

3.执行render函数生成vnode

三、模板编译总体流程

1.模板编译为render函数，执行render函数后返回vnode

模板有render函数转化为vnode

2.基于vnode再执行patch和diff

vnode通过patch和diff实现渲染和视图更新

tip：一般情况下，会在开发环境就编译好模板

在开发环境下编译好模板，转化为了render函数，在生产环境下直接执行。
image.png

四、vue中使用render函数

1.render函数中可以拿到createElement参数函数，返回生成的vnode。

2.createElement参数

第一个参数为标签名，第二个参数为标签信息（非必需参数），第三个为子元素

3.render函数使用情况

在一些复杂的情况下，不能使用template，可以考虑使用render函数

  1. render:function(createElement){
  2.     return createElement('div',[
  3.       createElement('a',
  4.                   {attrs:{
  5.                     name:'link',
  6.                     href:'#' + this.href
  7.                   }},
  8.                   ['this is a tag']
  9.                  )
  10.   ])
  11. }

image.png

思路

1.编译成什么 js代码

2.模板编译成render函数

3.render函数中with语法块、createElement函数以及参数

4.执行render函数返回vnode，通过patch函数，渲染视图