vue篇之二：初识编译器，渲染器

一、 VUE的UI

模版 和 Javascript 对象，两种形式 。

// 第一种： Javascript 对象
 // h 标签的级别 
 let level = 3 
 const title = {tag: `h${level}`, // h3 标签 
 } 
 
 // 第二种： 模版
 <h1 v-if="level === 1"></h1>
 <h1 v-else-if="level === 2"></h1>
 <h1 v-else-if="level === 3"></h1>
 <h1 v-else-if="level === 4"></h1>
 <h1 v-else-if="level === 5"></h1>
 <h1 v-else-if="level === 6"></h1>

模版远没有 JavaScript 对象灵活， 而使用Javascript 对象描述DOM，就叫做虚拟DOM。

01 import { h } from 'vue' 
02 
03 export default { 
04  render() { 
05   return h('h1', { onClick: handler }) // 虚拟 DOM 
06  } 
07 }

render 函数执行返回的就是一个Javascript 对象。

二、 初识渲染器

虚拟DOM -> 真实DOM

三、编译器

就是把模版生成一个render函数， 并合并到script 标签里的对象上。

render() { 
  return h('div', { onClick: handler }, 'click me') 
}

01 export default { 
02   data() {/* ... */}, 
03   methods: { 
04     handler: () => {/* ... */} 
05   }, 
06   render() { 
07     return h('div', { onClick: handler }, 'click me') 
08   } 
09 }