Vue2&3的计算属性（computed）

Vue2&3的计算属性（computed）

Vue2的计算属性

• 原理：data中的属性通过计算得到新的属性，称为计算属性（computed）。
• computed 具有 getter 和 setter 属性
  • getter 属性在使用时分别有两次调用：
    • 第一次：初始化，初次访问该属性
    • 第二次：当 computed 中的数据发生变化时调用
  • setter 属性的调用：
    • 当 computed 属性被修改时调用
  • 注意事项：
    • setter 属性本身不会修改属性的值，只用于修改属性本身，而 computed 属性的值被修改并不会更新setter 属性的值。
    • getter 和 setter 属性不能使用箭头函数，箭头函数中的this不是指向vm，而是window。
• computed 分别有两种写法：
  • 简写形式：computed : { 属性名(){ ...... } }，不使用setter属性时，才能使用
  • 完整形式：computed : { 属性名 : { get(){ ...... }, set(value){ ...... } } }

// App.vue
<template>
    姓名：<input type="text" v-model="username"><br>
    反转：<input type="text" v-model="reversedName">
</template>

<script>
    export default {
        name : 'App',
        data(){
            return {
                username : ''
            }
        },
        computed : {
            // 完整写法
            reversedName : {
                get(){
                    return this.username.split('').reverse().join('')
                },
                set(value){
                    this.username = value.split('').reverse().join('')
                }
            }
            
            // 简写形式
            reversedName(){
                return this.username.split('').reverse().join('')
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Vue3的计算属性

• Vue3的 computed 属性是一个组合式API，并且可以使用箭头函数
• 使用前需要先引入：import { computed } from 'vue'
• computed 属性的两种写法：
  • 简写形式：computed(() => { ...... })，不使用setter属性时，才能使用
  • 完整形式：computed({get(){ ...... }, set(value){ ...... }})

// App.vue
<template>
    姓名：<input type="text" v-model="user.name"><br>
    反转：<input type="text" v-model="reversedName">
</template>

<script>
    import { reactive, computed } from 'vue'
    export default {
        name : 'App',
        setup(){
            let user = reactive({
                name : ''
            })
            // 简写写法
            let reversedName = computed(() => {
                return user.name.split('').reverse().join('')
            })

            // 完整写法
            let reversedName = computed({
                get(){
                    return user.name.split('').reverse().join('')
                },
                set(value){
                    user.name = value.split('').reverse().join('')
                }
            })

            return {user, reversedName}
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33