VUE3之Composition API(二)

setup中computed的使用

计算属性需要调用computed函数来获得,computed函数支持两种传参:1.传入一个get函数;2.传入一个对象;返回值是一个ref对象:

<script>
import {ref, computed} from "vue";
    export default {
        setup(props) {
            const firstName = ref("kobe");
            const lastName = ref("bryant");

            // 用法一:传入一个getter函数
            // 返回值为一个ref对象computedRef
            // const fullName=computed(()=>firstName.value+" "+lastName.value);
            // 用法二:传入一个对象
            const fullName=computed({
                get:()=>firstName.value+" "+lastName.value,
                set:(newValue)=>{
                    const names=newValue.split(" ");
                    firstName.value=names[0];
                    lastName.value=names[1];
                }
            })
            const changeName=()=>{
                // firstName.value="james";
                fullName.value="shop keeper";
            }
            return {
                fullName,
                changeName
            }
        }
    }
</script>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注