Vue.js 是前端类框架中的佼佼者，然而在不断增长的代码库下，Vue 应用的性能优化已成至关重要的一部分。本文将从渲染性能入手，探讨 Vue.js 应用的优化方法。
1. 缩小数据访问的范围
对象的访问运算符（.）和数组的索引运算符（[]）在 JavaScript 中是十分昂贵的操作。在 Vue.js 中，对于每一个被观察的属性，一个变化侦测器将被创建。形如 this.foo.bar.baz 的深层次访问将会导致一系列侦测器的运行，每个侦测器都会进行相同的数据访问，从而严重影响性能。
如果需要对数据操作，可以在 methods 中引用数据，方法中通过递归的方式减小访问范围，将结果缓存至本地变量。以下代码示例展示了如何通过变量将数据绑定至子组件的语法：
-- -------------------- ---- -------
----------
------ ---------------------- --
-----------
--------
------ ------- -
------ -
------ -
------ --
-
--
--------- -
--------------- -
------ ---------------------- -- --------------
-
-
-
---------通过缓存数组中的 filteredItems 可以避免对每个元素进行侦测。这样，在数据变化时，只需要更新已经被依赖的部分。
2. 避免不必要的计算
Vue.js 的计算属性是被设计用于处理更复杂的逻辑。在组件中，计算属性可返回一个计算过的值，然而它们不应该用于复杂的耗时计算。
计算属性和侦听器都依赖于数据变化自动创建侦测器。无论何时修改组件的状态时，计算属性都会重新计算，而如果数据没有改变，就不需要再次进行计算。这样做，Vue.js 可以精确地知道何时更新组件的视图。
以下代码示例展示了如何为计算属性添加缓存：
-- -------------------- ---- -------
----------
------- --------------- --------
-----------
--------
------ ------- -
------ -
------ -
-------- ------- -------
-
--
--------- -
----------------- -
-- --------------- -
------ --
-
------ --------------------------
-
-
-
---------查询字符串的解析是另一个常用的价格昂贵的操作。在Vue.js中, 可以通过 watch 方法，侦测某个特定变量的变化然后在相应的函数中得到调用。
3. 利用 v-if 而非 v-show 避免无必要渲染
在 Vue.js 中，当条件渲染一个组件时，应该优先考虑使用 v-if，而非 v-show。v-show 只是通过改变 display CSS 属性来显示或隐藏元素。在相同的元素使用 v-show 多次，相当于在所有情况下都要进行 DOM 渲染。
当切换条件时，v-if 会确实地销毁或创建元素，这种方式比 v-show 更加高效。而且，在条件切换的开销较大时，使用 v-if 可以提高性能。
以下代码展示了使用 v-if 的例子：
-- -------------------- ---- -------
----------
-----
------- --------------------- --- ---- --------- - ------ - ------ ---- ------ -----------
-- ----------------------- ----------
------
-----------
--------
------ ------- -
------ -
------ -
---------- ----
-
--
-------- -
----------- -
-------------- - ---------------
-
-
-
---------4. 合并组件以减少更新开销
在 Vue.js 中，显示一个组件是有成本的，特别是在初始阶段。使用更多的组件可能会显著影响应用程序的启动时间。然而，拆分组件往往会使其更具有可维护性和可读性。因此，在合适的时候，合并组件可以帮助避免更新过多的开销。
以下代码示例展示了一个合并按钮和气泡注释的 HTML：
-- -------------------- ---- -------
----------
-----
------- ---------------------------- ---------------
---- ------------------ ----------------
------- -- - -----------
------
------
-----------
--------
------ ------- -
------ -
------ -
------------ -----
-
--
-------- -
-------------- -
---------------- - -----------------
-
-
-
---------5. 利用 v-once 缓存静态内容
在任何 Vue.js 应用程序中，静态渲染内容应该使用 v-once 呈现。这个指令使得 DOM 元素可以被缓存只渲染一次。在静态内容下处理 VNode 的开销可以被移除。因此，尽可能公开静态标记成为最大尝试的方式。
以下代码展示了使用 v-once 的例子：
-- -------------------- ---- -------
----------
-----
--- --------- ----- -------
----- ------- ------
------
-----------
--------
------ ------- -
------ -
------ -
------ --- -----
-------- ------- -------
-
-
-
---------结论
在前端开发中，性能优化已经成为一个必要的部分。在本文中我们探讨了一些优化 Vue.js 渲染性能的方法。在你的项目中遵循这些方法，你的应用程序将更快、更流畅，效率也会更高。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f4dfdac5c563ced5662722