Question

我从多个博客和stackoverflow中的一些问题中了解到，由于$ digest进程的工作方式，Angular 1 ng-bind的性能优于{{}}插值。

Angular 2改变了数据绑定的方式，我想知道是否有关于该主题的测试。特别是如果这个

<h1 [innerText]="obj.name"></h1>

仍然比这更好

<h1> {{ obj.name }} </h1>

Answer 1

使用getTitle()方法作为示例。 checkBinding是调试模式检查，可以忽略。

属性绑定调用sanitize和el.setAttribute：

  var currVal_0 = self.context.getTitle();
  if (jit_checkBinding34(throwOnChange,self._expr_0,currVal_0)) {
    self.renderer.setElementAttribute(self._el_0,'innerHTML',((self.viewUtils.sanitizer.sanitize(jit_SecurityContext36.HTML,currVal_0) == null)? null: self.viewUtils.sanitizer.sanitize(jit_SecurityContext36.HTML,currVal_0).toString()));
    self._expr_0 = currVal_0;
  }

插值，调用el.textContent = value;：

  var currVal_0 = jit_interpolate36(1,'',self.context.getTitle(),'');
  if (jit_checkBinding34(throwOnChange,self._expr_0,currVal_0)) {
    self.renderer.setText(self._text_1,currVal_0);
    self._expr_0 = currVal_0;
  }

唯一的区别是使用sanitize，您可以检查html_sanitizer.ts源代码，看看是否有一些复杂的东西。

Answer 2

插值： 它表示为{{}}。可能是两个字符串连接起来，计算值和显示值。

属性绑定： 它表示为[]。主要用于诸如变量之类的非连接字符串。

Answer 3

在许多情况下，插值是属性绑定的一种方便的替代方法。

实际上，Angular 2会在渲染视图之前将这些插值转换为相应的属性绑定。

在Angular 2中，我认为没有技术理由偏好一种形式。您应该选择对任务感觉最自然的表单。

角度2插值与属性绑定

3 个答案: