隐藏和显示屏幕上的视图元素，这个非常常见。
来自 @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 呢？相比 [visibility]="condition ? 'visible' : 'collapse'"，[hidden]="condition" 的绑定方式要简洁得多，纯粹是语法糖。但需要注意的是，hidden: false 和 visibility: 'collapse' 都会影响布局，而 visibility: 'hidden' 则不会！
因此，对于不想因布局变化（导致性能下降）而影响用户体验的列表项复用场景，visibility: 'hidden' 可以表现得非常出色。通常情况下，当 ngIf、v-if 及其变体不符合你的性能需求时，hidden 或 visibility 就派上用场了，它们往往是解决这些情况下性能问题的关键。