搞懂 Vue 3 编译优化：静态提升的秘密

文章预览

前言 在上一篇 vue3早已具备抛弃虚拟DOM的能力了 文章中讲了对于动态节点，vue做的优化是将这些动态节点收集起来，然后当响应式变量修改后进行靶向更新。那么vue对静态节点有没有做什么优化呢？答案是：当然有，对于静态节点会进行“静态提升”。这篇文章我们来看看vue是如何进行静态提升的。 什么是静态提升？ 我们先来看一个demo，代码如下：         title      {{ msg }}      "handleChange">change msg    "ts">
import { ref } from "vue";

const msg = ref("hello");

function handleChange() {
  msg.value =