如果您曾经使用过 Google 的 Pagespeed Insights 或 Google Lighthouse，那么您就会看到这个网页性能评估： czhlove 你会收到一组统计数据，然后是一些关于你的网站有多快（或多慢）的诊断。 一些诊断可能非常有用，指示一些简单的修复、未使用的文件以及缓慢或占用大量空间的请求。 其他诊断，例如主线程工作和 JavaScript 执行时间确实会显示问题，但它们并不能真正帮助您解决问题。 在本文中，我将给您介绍可以遵循的步骤，以确保您的 Vue 应用程序尽可能加快运行。通过这些步骤，您将确切地知道要修复什么，而不必猜测任何事情。 1.只更新需要的 使用 VueJS 可能遇到的最棘手的问题之一是渲染相同的元素或元素列表的次数超过需要的次数。要理解为什么或如何发生这种情况，我们必须了解 Vue 中的响应性。 此示例来自官方 Vue.js 文档，它显示了哪些属性是响应性的，哪些不是。Vue 中有许多响应式元素：分配给数据对象的属性、计算属性或依赖于响应式属性的方法。 var vm = new Vue({ data: { a: 1 } }) // `vm.a` is now reactive vm.b = 2 // `vm.b` is NOT reactive 但是普通的 JavaScript 代码，例如{{ 'value' }}or {{ new Date() }}，不会被 Vue 作为响应式属性进行跟踪。 那么响应性与重复渲染有什么关系呢？ 假设您的data对象中有这样一组对象： values: [{id: 1, t: 'a'}, {id: 2, t: 'b'}] 你正在使用它在v-for上渲染： <div v-for="value in values" :key="value.id">{{ value.t }}</div> ...