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>