Vue3 计算属性

1.计算属性

计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。

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

<div id="app">
    <p>原始字符串：{{ message }}p>
    <p>反转字符串：{{ reversedMessage }}p>
div>
<script>
    const app = {
        data() {
            return {
                message: 'dahezhquan'
            }
        },
        computed: {
            reversedMessage: function () {
                return this.message.split('').reverse().join('')
            }
        }
    }
    Vue.createApp(app).mount('#app')
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

输出：

原始字符串：dahezhquan

反转字符串：nauqhzehad
1
2
3

---

2.computed vs methods

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

<div id="app">
    <p>原始字符串：{{ message }}p>
    <p>反转字符串：{{ reversedMessage() }}p>
div>
<script>
    const app = {
        data() {
            return {
                message: 'xiaoqianaaa'
            }
        },
        methods: {
            reversedMessage: function () {
                return this.message.split('').reverse().join('')
            }
        }
    }
    Vue.createApp(app).mount('#app')
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

输出：

原始字符串：xiaoqianaaa

反转字符串：aaanaiqoaix
1
2
3

---

3.computed setter

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