01.编程范式之命令式编程

举个例子张三的妈妈让张三去买酱油。

那么张三怎么做的呢？

1.张三拿起钱
2.打开门
3.下了楼
4.到商店
5.拿钱买酱油
6.回到家

以上的流程详细的描述了，张三在买酱油的过程中，每一步都做了什么。那么这样一种：详细描述做事过程 的方式就可以被叫做 命令式。

具体实现举个例子

为指定的 div 的子元素 div 的子元素 p 标签，展示变量 msg

js 复制代码

// 1. 获取到第一层的 div
const divEle = document.querySelector('#app')
// 2. 获取到它的子 div
const subDivEle = divEle.querySelector('div')
// 3. 获取第三层的 p
const subPEle = subDivEle.querySelector('p')
// 4. 定义变量 msg
const msg = 'hello world'
// 5. 为该 p 元素设置 innerHTML 为 hello world
subPEle.innerHTML = msg

02.编程范式之声明式编程

还举这个例子张三的妈妈让张三去买酱油。

在这个例子中，我们说：张三所做的事情就是命令式。那么张三妈妈所做的事情就是 声明式。

在这样一个事情中，张三妈妈只是发布了一个声明，她并不关心张三如何去买的酱油，只关心最后的结果。

所以说，所谓声明式指的是：不关注过程，只关注结果 的范式

还举这个例子

为指定的 div 的子元素 div 的子元素 p 标签，展示变量 msg

js 复制代码

<div id="app">
  <div>
    <p>{{ msg }}</p>
  </div>
</div>

在这样的代码中，我们完全不关心 msg 是怎么被渲染到 p 标签中的，我们所关心的只是：在 p 标签中，渲染指定文本而已。

03.在 .vue 文件的 template 中写入的 html 是真实的 html 标签节点吗？

不是的

因为，如果我们写入的是真实 html 节点，对于 v-if、v-bind、keep-alive 这些东西，浏览器明显是 不认识 的，所以这些东西理应无法解析。

但是现实是这些指令或组件被正确解析了，所以 vue 一定在中间做了什么 ，让 假的 html 标签节点 被渲染成了 真实的 html 标签节点。

那么 Vue 在中间做了什么事情呢？

简单来说可以分成两件事

1. 编译时：compiler
1. 运行时：runtime

04.什么是运行时

在 Vue 3 的源代码中存在一个runtime-core的文件夹，该文件夹内存放的就是 运行时 的核心代码逻辑。

runtime-core中对外暴露了一个函数，叫做 渲染函数 render

我们可以通过 render 代替 template 来完成 DOM 的渲染

js 复制代码

<body>
  <div id="app"></div>
</body>

<script>
  const { render, h } = Vue
  // 生成 VNode
  const vnode = h('div', {
    class: 'test'
  }, 'hello render')

  // 承载的容器
  const container = document.querySelector('#app')

  // 渲染函数
  render(vnode, container)
</script>

05.什么是编译时？

如果只靠 运行时 ，那么是没有办法通过 HTML 标签结构的方式 来进行渲染解析的。

那么想要实现这一点，我们就需要借助另外一个东西，也就是 编译时。

Vue 中的编译时，更准确的说法应该是 编译器 的意思。它的代码主要存在于 compiler-core 模块下。

举个例子

js 复制代码

<body>
  <div id="app"></div>
</body>

<script>
  const { compile, createApp } = Vue

  // 创建一个 html 结构
  const html = `
    <div class="test">hello compiler</div>
  `
  // 利用 compile 函数，生成 render 函数
  const renderFn = compile(html)

  // 创建实例
  const app = createApp({
    // 利用 render 函数进行渲染
    render: renderFn
  })
  // 挂载
  app.mount('#app')
</script>

对于编译器而言，它的主要作用就是：把 template 中的 html 编译成 render 函数 。然后再利用 运行时 通过 render 挂载对应的 DOM。

总结：编译时可以把 html 的节点，编译成 render 函数

compile 叫做编译器或编译时,render叫运行时，vue可以叫做编译时+运行时，选用编译器编译成渲染函数，然后在运行时运行渲染函数，最终实现把html挂载到#app上

框架设计的基本概念及vue原理

01.编程范式之命令式编程

02.编程范式之声明式编程

03.在 .vue 文件的 template 中写入的 html 是真实的 html 标签节点吗？

04.什么是运行时

05.什么是编译时？