Vue3 计算属性

计算属性的关键词为 computed，当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值，计算属性在处理一些复杂逻辑时是很有用的。

为什么要使用 computed 呢？我们知道，在模板内使用表达式非常普遍的，但是，在模板内的放入太多逻辑的表达式，会使得模板变得很重，难于维护。

以下是反转字符串的例子：

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

我要试一试

在上面的实例中，模板里的表达式变得很复杂，我们需要花费上一小段时间去理解，这块内容到底渲染的是什么？其实是将 message 进行字符串翻转。

然而，当初模板中使用表达式的初衷时为了简单运算的。所以，从这点出发，我们是不是就不建议在模板中使用过于复杂的表达式了。此时，计算属性就横空出世了。计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。

接下来我们看看使用了计算属性的实例：

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
const app = {
    data() {
      return {
        message: '编程宝库'
      }
    },
    computed: {
      // 计算属性的 getter
      reversedMessage: function () {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
      }
    }
}
   
Vue.createApp(app).mount('#app')
</script>

我要试一试

在上面的实例中，我们声明了一个计算属性 reversedMessage，提供的函数将用作属性 vm.reversedMessage 的 getter。

vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

1. computed 与 methods 的差别

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

通常情况下，我们是通过视觉效果无法看出两者的差别的。但是使用 computed 性能会更好。如果你不希望缓存，你可以使用 methods 属性。

2. computed 的 getter 函数

在 vue 中，computed 的属性可以被视为是 data 一样，可以读取和设置它的值。因此，在 computed 中可以分为 getter(读取) 和 setter (设值)，一般情况下，是没有 setter 的，computed 只是预设了 getter，也就是只能读取，不可以改变设值。所以，computed 默认格式如下：

其中 html 代码如下：

<div>
    message: {{message}}
</div>

<!-- 计算属性 -->
<div>
    计算属性： {{updateMessage}}
</div>
</pre>  

其中 js 代码如下：

computed: {
    updateMessage(): {
            console.log('计算属性', this.message)
            return this.message
    }
}

js 代码等同于：

computed: {
    updateMessage: {
        get: function() {
            console.log('计算属性', this.message)
            return this.message
        }
    }
}

3. computed 的 setter 函数

computed 属性默认只有 getter，不过在需要时也可以提供一个 setter：

var app = {
    data() {
        return {
        name: 'Google',
        url: 'http://www.google.com'
        }
    },
    computed: {
        site: {
        // getter
        get: function () {
            return this.name + ' ' + this.url
        },
        // setter
        set: function (newValue) {
            var names = newValue.split(' ')
            this.name = names[0]
            this.url = names[names.length - 1]
        }
        }
    }
}
vm = Vue.createApp(app).mount('#app')
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '编程宝库 http://www.codebaoku.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

我要试一试

运行 vm.site = '编程宝库 http://www.codebaoku.com'; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。

Vue 监听属性的关键词为 watch，我们可以通过 watch 来响应数据的变化。以下实例通过使用 watch 实现计数器。以下实例进行千米与米之间的换算。