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

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

//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都相差无几。但如果表达式是某种复杂运算，且需要多处复用，如下面代码段所示

//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方法的方案。如下面代码段所示：

//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);
        }
    }
});