HTML中 Angular 的表达式 与 VUE 的表达式以及VUE的计算属性对比

  Angular和VUE都支持在HTML界面直接输入Javascript的表达式，而表达式就会在当前元素所在的作用域中读取变量然后进行计算，将得出来的值赋予HTML表达式所在的位置。而表达式中的变量会被框架实时侦听，一旦变化了，表达式的计算结果也会随之变化。使用方式如下代码段所示。一个是HTML的attribute的表达式，另一个是双大括号的HTML展示字符的表达式。

[code]//Angular
<button diabled="$ctrl.isDisable">
{{$ctrl.buttonMessage}}
</button>

function controller() {
let ctrl = this;
ctrl.isDisable = false;
ctrl.buttonMessage = 'confirm';
}

//VUE
<button id="testButton" :diabled="isDiable">
{{buttonMessage}}
</button>

var vm = new VUE({
el: '#testButton',
data: {
isDiable: false,
buttonMessage: 'confirm'
}
});

从上面的简单应用的代码段来看，Angular与VUE都相差无几。但如果表达式是某种复杂运算，且需要多处复用，如下面代码段所示

[code]//Angular
<button diabled="$ctrl.isDisable">
{{$ctrl.buttonMessage.reverse().Uppercase().slice(5)}}
</button>
<button>
{{$ctrl.buttonMessage.reverse().Uppercase().slice(5)}}
</button>

function controller() {
let ctrl = this;
ctrl.isDisable = false;
ctrl.buttonMessage = 'confirm';
}

//VUE
<button id="testButton" :diabled="isDiable">
{{buttonMessage.reverse().Uppercase().slice(5)}}
</button>
<button id="testButton">
{{buttonMessage.reverse().Uppercase().slice(5)}}
</button>

var vm = new VUE({
el: '#testButton',
data: {
isDiable: false,
buttonMessage: 'confirm'
}
});

 这时候再直接使用作用域中的变量来HTML中运行复杂运算，就会导致代码可读性差同时，代码的运行效率低。Angular在作用域中再定义一个computedButtonMessage = ctrl.buttonMessage.reverse().Uppercase().slice(5) 的方式可以解决代码可读性差的问题，由于作用域中的变量没有建立起随动关系，buttonMessage 的变化不会导致computedButtonMessage 的变化，就得对buttonMessage进行手动侦听。从代码简洁度和性能来说仍然不及VUE的使用computed方法的方案。如下面代码段所示：

[code]//Angular
<button diabled="$ctrl.isDisable">
{{$ctrl.computedButtonMessage }}
</button>
<button>
{{$ctrl.computedButtonMessage }}
</button>

function controller($scope) {
let ctrl = this;
ctrl.isDisable = false;
ctrl.buttonMessage = 'confirm';
$scope.$watch(() => {
return ctrl.buttonMessage;
}, () => {
ctrl.computedButtonMessage = ctrl.buttonMessage.reverse().Uppercase().slice(5);
})
}

//VUE
<button id="testButton" :diabled="isDiable">
{{computedButtonMessage}}
</button>
<button id="testButton">
{{computedButtonMessage}}
</button>

var vm = new VUE({
el: '#testButton',
data: {
isDiable: false,
buttonMessage: 'confirm'
},
computed: {
computedButtonMessage: function() {
return buttonMessage.reverse().Uppercase().slice(5);
}
}
});