Vue开发系列——Vue中常见实现区别及Vue.js 模板编译原理

目录

一、v-show 与 v-if 有什么区别

二、computed 和 watch 的区别

三、MVVM和MVC区别

四、Vue.js 模板编译

模板字符串解析

解析器（Parser）

优化（Optimizer）

代码生成器（Codegen）

渲染函数执行

---

一、v-show 与 v-if 有什么区别

v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。v-if是动态地向DOM树中添加或删除元素，如果初始值为false，就不会编译

v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，只会编译一次，并且只是简单地基于 CSS 的 “display” 属性进行切换。

✔️v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；

✔️v-show 则适用于需要非常频繁切换条件的场景。

二、computed 和 watch 的区别

computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch：更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；运用场景：

✔️当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

✔️当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch

三、MVVM和MVC区别

MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型，View 代表 UI 组件， ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。

四、Vue.js 模板编译

Vue 的模板编译过程是一个将模板字符串转换为高效的 JavaScript 渲染函数的过程。这个过程涉及解析、优化和代码生成等步骤，旨在提供高性能的界面渲染和快速的响应式更新。通过这种方式，Vue 能够保持前端界面的高效和灵活性。

Vue的模板编译原理是将模板字符串通过解析器转换为抽象语法树(AST)，然后进行静态节点标记优化，最后通过代码生成器生成可执行的渲染函数的过程。Vue.js 模板编译大致可以分为以下几个步骤：

• 模板字符串解析

在 Vue 组件中定义一个模板（通常使用 template 标签或者在单文件组件（.vue 文件）中使用 template 标签内的 HTML），Vue 首先会读取这个模板字符串。

• 解析器（Parser）

解析器会将模板字符串转换成一个抽象语法树（AST）

这个步骤主要由几个子步骤组成：

HTML 解析：使用 HTML 解析器（如 @babel/parser）将模板字符串解析为 AST。

指令和插值处理：识别 Vue 特定的指令（如 v-if, v-for, v-bind 等）和插值表达式（如 {{ message }}）

• 优化（Optimizer）

Vue 的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的 DOM 也不会变化。

在生成 AST 后，Vue 的编译器会对 AST 进行静态属性提升等优化。例如，静态节点可以被标记为静态，这样在渲染时可以跳过这些节点的比较，从而提高性能。

• 代码生成器（Codegen）

代码生成器将优化后的 AST 转换成渲染函数代码。这个代码通常是 JavaScript 代码，可以直接被 JavaScript 引擎执行。编译的最后一步是将优化后的 AST 树转换为可执行的代码。

• 渲染函数执行

当组件被挂载时，Vue 会调用这个渲染函数来生成虚拟 DOM。虚拟 DOM 然后与实际的 DOM 进行比较，并应用必要的更改，从而实现高效的 UI 更新。