javascript - 相同条件下的多个 ng-if - 性能方面

Question

我有一个包含不同元素的html页面，根据某些条件(相同的条件)将使用Angular的ng-if显示/隐藏。

在我的 Controller 中，我创建了一个 bool 变量。

$scope.myCondition = getValue();

在我看来，我使用 ng-if 指令来监听这个变量。

什么会更好性能明智:

1. 在这种情况下使用多个 ng-if 编写更简洁的代码BUT:

<div>		
	<div ng-if="myCondition" >-- a --</div>
	<div ng-if="!myCondition">-- A --</div>	
	<div>
		-- text, text, text... --
	</div>
	<div ng-if="myCondition" >-- b --</div>
	<div ng-if="!myCondition">-- B --</div>	
	<div>
		-- text, text, text... --
	</div>
	<div ng-if="myCondition" >-- c --</div>
	<div ng-if="!myCondition">-- C --</div>	
	<div>
		-- text, text, text... --
	</div>
</div>

编写重复代码(在 View 中)但是使用单个ng-if:

 <div ng-if="myCondition">		
    	<div>-- a --</div>
    	<div>
    		-- text, text, text... --
    	</div>
    	<div>-- b --</div>
    	<div>
    		-- text, text, text... --
    	</div>
    	<div  >-- c --</div>
    	<div>
    		-- text, text, text... --
    	</div>
    </div>
    <div ng-if="!myCondition">		
    	<div>-- A --</div>
    	<div>
    		-- text, text, text... --
    	</div>
    	<div>-- B --</div>
    	<div>
    		-- text, text, text... --
    	</div>
    	<div  >-- C --</div>
    	<div>
    		-- text, text, text... --
    	</div>
    </div>

我更喜欢编写示例 1 中所示的代码，因为它更易于维护。但我担心这样会为每个 ng-if 创建一个新的 $watch。
那是对的吗？ Angular 是否为每个 ng-if 创建新的 $watch，尽管这是相同的静态条件(不是某个函数的返回值，而是一个简单的变量)。

此问题询问有关 ng-if 指令，但也与 ng-show 和 ng-hide 相关

Answer 1

你是对的，你将为每个使用的 ng-if 创建一个观察者，因此就性能而言，使用第二个选项更好。

但是，如果您的条件仅评估一次(当 Controller 执行其代码时)，您可以将一次性绑定(bind)运算符:: 与 ng-if 一起使用以避免 $watchers .