MVVM-computed设计初衷到底是啥

[lvleihere]

一看到 computed 很多同学肯定会说这有啥想的，肯定是计算某个值呗，嗯，对了一半

0.�模板（Mustache）

在常见的mvvm框架中，你可以再模板里面使用 Mustache 语法进行属性值绑定（ {{}} ），常见的mvvm框架支持在 Mustache 里进行如下编写（提供了完全的表达式[expression]支持）:

• 普通js语法

<div bar="{{ name.toString() }}"></dvi>

• 三元运算符

<div bar="{{ hasName ? 'tom' : 'none' }}"></dvi>

• 较为复杂的计算

<div bar = "{{ name.split('').reverse().join('') }}">

这些表达式在mvvm框架编译阶段会被准确的解析，有益必有限，也就是你只能绑定单个表达式，一下情况是不被允许的:

• 包含语句的

<div bar="{{ var name = 'tom' }}"></dvi>

• 控制流形式的

<div bar="{{ if (hasName) { //xx }}}"></div>

1.解决的问题

以上述 较为复杂的表达式 为例，一旦表达式过长，是不是整个模板给人的印象全是一坨js代码，难以维护，甚至不知所云，此时 computed 应运而生~

computed 专注于解决一些需要计算，然后给出返回值的场景，将模板中复杂的单一表达式放入computed中进行维护，是 computed 真正的才能所在，如：

<div bar = "{{ splitedStr }}">

new Xxx({
  data() {
      return {
        name: 'tom'
      }
  },
  computed: {
    splitedStr() {
      return name.split('').reverse().join('');
    }
  }
});

2.侦听属性 watch

如果你所使用的mvvm框架中正好包含 侦听属性watch， 那么它与计算属性的区别往往是 侦听属性往往是用来观察和响应实例上的数据变动，而计算属性更倾向于解决模板单一表达式混杂问题和模板中单一表达式限制问题。

参考

• Computed vs Watched Property