petite-vue和Vue的比较

petite-vue不止是变得更小，它还是渐进式增强的最佳实践。

Vue不构建或构建都能使用。当通过构建使用时（例如使用单文件组件），Vue预编译所有的模板，所以运行时没有再处理模板。多亏了树摇（three-shaking），我们可以在Vue中提供可选的功能，它们在不使用时并不会增大你打包生成的文件。用构建方式使用这是vue的使用的最佳实践，它更适合构建具有相对繁重交互的 SPA 或应用程序。

通过不构建的方式使用Vue并且挂载到 DOM 内模板，是很不推荐的使用方式，这是因为：

• • 我们需要把Vue模板编译器下载到浏览器。（额外多13kb大小）
  • 编译器需要从实例化的DOM中获取模板字符串
  • 编译器将字符串编译成 JavaScript 渲染函数
  • Vue将通过渲染函数新生成的DOM替换到已存在的DOM模板上。

petite-vue通过遍历现有的 DOM 并直接将细粒度的反应效果应用到元素上来避免所有这些开销。DOM就是模板，这意味着petite-vue 在渐进式增强场景中更加的高效。

这也是 Vue 1 的工作方式。这种方法与 DOM 耦合，因此不适合与平台无关的渲染或 JavaScript SSR。我们也失去了使用渲染函数进行高级抽象的能力。但是，正如您可能知道的那样，在渐进增强的场景中不太会需要这些功能。

翻译资料：Comparison with standard Vue.https://github.com/vuejs/petite-vue#comparison-with-standard-vue

总结：

vue不构建使用时，需要从实例化的DOM中读取模板字符串，编译成渲染函数，再替换到已存在的DOM上。

petite-vue是直接遍历DOM，若有更新，则直接应用到DOM上。

petite-vue使用场景：开发大量静态少量交互的页面。它为渐进式增强而生。

If you have strict CSP requirements, you should probably use standard Vue and pre-compile the templates.

推荐学习资料：

【1】如何在不看源码情况下学petite-vue源码.https://zhuanlan.zhihu.com/p/389045348

【2】introduction-to-petite-vue.https://blog.logrocket.com/introduction-to-petite-vue