围绕隐藏、可见性、v-if、ngIf 以及所有“if”相关的最佳实践

有各种方法可以动态地或按页面隐藏和显示屏幕上的视图元素。

来自 @nativescript/core ​

• visibility: 'hidden' | 'collapse' | 'visible'
• hidden: boolean (8.x+ 新增)

两者非常相似，但有一些细微的差异值得注意。

来自各种前端框架 ​

• ngIf: Angular
• v-if: Vue

大多数前端框架集成都添加了自己的语法糖，例如 v-if (Vue) 和 ngIf (Angular)，它们也很有用，但具有重要的独特特性。

最昂贵的视图操作 ​

一般来说，直接操作可视化树是最昂贵的操作。更具体地说，创建新的可视化节点、插入到树中和删除节点都很昂贵。在单个渲染过程中（显示页面）或当用户点击按钮以查看视觉变化时，这并不重要。但是，如果在用户期望流畅的时刻重复进行操作（例如滚动），则可能会非常糟糕。这是因为这样经常会迫使渲染引擎重新测量和调整布局，这通常会导致明显的卡顿，并不理想。这与 NativeScript 无关，而是与每个平台上的纯渲染引擎有关。这也与 Web DOM 性能相关的深度探讨主题有关。虽然 NativeScript 视图不使用 DOM，但相同的实践适用于实现最佳视图渲染性能。

v-if、ngIf 等会发生什么？ ​

这些类型的绑定在隐藏时完全销毁视图节点，并在显示时重新创建它。这非常适合许多用例，但应该避免在涉及滚动的任何内容上使用，因为这会导致这些绑定在滚动过程中中途发生更改。或者，实际上任何其他高度交互式的用户体验，这些体验会导致绑定更改。

另一方面，hidden 和 visibility 不会销毁视图节点。它们只是修改它的属性以隐藏或显示它。两者之间的主要区别在此示例中说明

它们的使用区别非常细微

• visibility: 'hidden' | 'collapse' | 'visible';
• hidden: boolean;

我们可以看到 visibility 支持 3 种模式，而 hidden 是一个布尔值，它的行为与 visibility: 'collapse' 相同。那么你为什么还要使用 hidden 呢？绑定 [hidden]="condition" 比 [visibility]="condition ? 'visible' : 'collapse'" 简单得多，纯粹是语法糖。但是，重要的是要注意，hidden: false 和 visibility: 'collapse' 都会影响布局，而 visibility: 'hidden' 不会！

因此，visibility: 'hidden' 非常适合在用户滚动时不希望引起布局变化（性能低下）的循环行上的各种性能优化用例。

通常，在 ngIf、v-if 及其变体不适合你的性能用例的情况下，hidden 或 visibility 可以胜任，它们通常是解决这些情况下性能问题的关键。