仅1%知道的vue2隐藏知识点

Vue.js的两种编译方式

运行时编译模板和预编译是 Vue.js 处理模板的两种不同方式，它们在性能、构建流程和适用场景上有所区别。

运行时编译

1. 定义：
   • 运行时编译模板是指在浏览器中，Vue.js 实例化时对模板字符串进行即时编译的过程。
2. 特点：
   • 灵活性：可以在不经过构建步骤的情况下直接在浏览器中使用 Vue，这对于快速原型开发或小规模项目很有用。
   • 性能开销：由于编译过程发生在浏览器中，因此会占用更多的客户端资源，可能会导致较慢的首屏加载时间。
   • 依赖：需要包含 Vue 的运行时编译器，这意味着最终的打包文件会更大。
3. 使用场景：
   • 适用于不使用构建工具（如 Webpack、Rollup 等）的项目。
   • 适用于动态模板字符串，例如模板是从服务器端加载的。
4. 示例：

<!-- HTML模板 -->
<div id="app">
  {{ message }}
  <button v-on:click="greet">Greet</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 创建Vue实例
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    greet: function() {
      alert(this.message);
    }
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('');
    }
  },
  watch: {
    message: function(newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal);
    }
  },
  created: function() {
    console.log('instance created');
  },
  mounted: function() {
    console.log('instance mounted');
  }
});
</script>

预编译

1. 定义：
   • 预编译是指使用构建工具在构建过程中提前将模板编译成渲染函数的过程。
2. 特点：
   • 性能优化：预编译可以减少运行时的计算量，加快首屏加载速度，因为浏览器不需要再进行模板编译。
   • 文件大小：由于不需要包含运行时编译器，所以最终的打包文件会更小。
   • 构建步骤：需要一个构建过程，通常结合 Vue 单文件组件（.vue 文件）使用。
3. 使用场景：
   • 适用于使用构建工具的项目，尤其是生产环境下的应用。
   • 适用于静态模板，这些模板在构建时已经确定。
4. 示例：
   • 使用 Webpack 配置 Vue Loader 时，.vue 文件中的 <template> 会被预编译成渲染函数。

对比总结

• 性能：预编译通常性能更优，因为它减少了运行时的计算。
• 构建流程：运行时编译不需要构建步骤，而预编译需要一个构建过程。
• 文件大小：预编译的文件通常更小，因为它不需要包含编译器代码。
• 灵活性：运行时编译在动态模板或快速原型开发中更灵活。

在实际开发中，大多数生产环境下的 Vue 应用都采用预编译的方式，以优化性能和减小最终部署的文件大小。而运行时编译则更多用于简单示例、小项目。