Vue3 中的 computed函数

目录

1.定义

2.computed 的使用

        1.使用前需引入组合式的 API computed

         2.计算属性（简写形式）

        2.计算属性（完整写法）

---

1.定义

        与Vue2 中的计算属性功能一致，要的属性不存在，要通过已有的属性计算得来，本质是属性

2.computed 的使用

        1.使用前需引入组合式的 API computed

import {computed} from 'vue'

         2.计算属性（简写形式）

                简写形式：没有考虑到计算属性被修改的情况

                语法：let 属性名 = computed(() => {return ......})，return 出来的值就是计算属性的值

                注意：计算属性 computed 为一个函数，在计算属性的简写形式中，函数的参数为一个回调函数，回调函数的返回值就是该 计算属性的值

                具体代码实现：

    setup() {

        // person 配置
        const person = reactive({ 
            // 数据
            firstName: '张',
            lastName: '三',
        })

        // 计算属性——简写形式（没有考虑计算属性被修改的情况）
        person.fullName = computed(() => person.firstName + '-' + person.lastName)

       
        })

        // 返回一个对象 (常用)
        return {
            person,
        }

        2.计算属性（完整写法）

                完整写法：考虑到计算属性被修改的情况

                语法：

    let 属性名 = computed({

        // 当计算属性被访问时调用
        get(){
            // get 中的返回值就是计算属性的值
            return ......
        }

        //当计算属性被修改时调用，收到的 value 就是计算属性被修改后的值
        set(value) {
            
        }
    })

                注意：计算属性 computed 为一个函数，在计算属性的完整写法中，函数的参数为一个配置对象，配置函数中的有 get 函数 与 set函数，get函数的返回值就是该计算属性的返回值，set函数中收到的参数就是计算属性被修改后的值

                具体代码实现：

    setup() {

        // person 配置
        const person = reactive({ 
            // 数据
            firstName: '张',
            lastName: '三',
        })


        // 计算属性——完整形式（考虑到计算属性会被修改）
        person.fullName = computed({
            // 当计算属性被读时调用
            get() {
                return person.firstName + '-' + person.lastName
            },

            // 当计算属性被修改时调用
            set(value) {
                // 将收的全名进行拆分
                let newArr = value.split('-')
                person.firstName = newArr[0]
                person.lastName = newArr[1]
            }
        })

        // 返回一个对象 (常用)
        return {
            person,
        }

        }