什么时候应该使用ng-if而不是ng-show / ng-hide？
什么时候应该使用ng-if而不是ng-show / ng-hide？
我理解ng-show和ng-hide会影响元素上设置的类，而ng-if控制一个元素是否作为DOM的一部分呈现。
有没有关于选择ng-if和ng-show/ng-hide的指导方针？或者相反呢？
admin 更改状态以发布 2023年5月24日
点击这里查看一个CodePen，演示ng-if/ng-show的DOM工作方式之间的差异。
@markovuksanovic很好地回答了这个问题。但是我会从另一个角度来看待它：除非：
- 由于某种原因，您需要数据绑定和元素上的$watch在它们不可见时仍然是活动状态。表单可能是这种情况的一个好例子，如果您希望能够检查当前不可见的输入的有效性，以确定整个表单是否有效。
- 您正在使用带有条件事件处理程序的某些非常复杂的有状态逻辑，如上所述。也就是说，如果您发现自己手动连接和分离处理程序，以便在使用ng-if时丢失重要状态，请问自己该状态是否可以更好地表示为数据模型，并且在呈现元素时由指令有条件地应用处理程序。换句话说，处理程序的存在/缺失是一种状态数据。将该数据从DOM中取出，并放入模型中。处理程序的存在/缺失应由数据决定，因此易于重新创建。
Angular编写得非常好。考虑到它的功能，它很快。但是它所做的是一堆魔法，使得难事（例如双向数据绑定）看起来轻而易举。使所有这些事情看起来很容易需要一些性能开销。您可能会惊讶地意识到， setter函数在没有人查看的DOM块上的$digest周期中被评估了多少次，可能是几百次或几千次。然后你意识到你有许多不可见的元素都在做同样的事情...
台式电脑可能确实强大到可以使大多数JS执行速度问题不再成问题。但如果您是为移动设备开发，尽可能使用ng-if应该是一件轻而易举的事情。在移动处理器上，JS速度仍然很重要。使用ng-if是一种非常简单的方法，可以在极低成本的情况下获得潜在的重要优化。
这取决于您的使用情况，但总结一下它们之间的区别:
ng-if将从DOM中移除元素。这意味着您绑定到这些元素的所有处理程序或其他任何内容都将丢失。例如，如果您将单击处理程序绑定到一个子元素，当ng-if评估为false时，该元素将从DOM中删除，您的单击处理程序将不再起作用，即使ng-if稍后评估为true并显示该元素，您也需要重新附加处理程序。ng-show/ng-hide不会从DOM中删除元素。它使用CSS样式来隐藏/显示元素（注意：您可能需要添加自己的类）。这样，您附加到子级的处理程序将不会丢失。ng-if创建子作用域，而ng-show/ng-hide不会创建。
不在DOM中的元素对性能的影响较小，当使用ng-if时，您的Web应用程序可能会显示更快，与ng-show/ng-hide相比。根据我的经验，差异微不足道。在Angular文档中，使用ng-show/ng-hide和ng-if时都可以进行动画效果。
最终，您需要回答的问题是是否可以从DOM中删除元素？