代码
Student.vue
<template>
<div><h2>computed计算属性使用</h2><input type="text" v-model="name"/><br/><input type="text" v-model="sex"/><br/>完整信息:{{info}}<br/><button @click="changeInfo">修改info</button></div>
</template><script setup lang="ts" name="Student">import { ref,computed } from 'vue';let name=ref('zhangsan')let sex=ref('男')let info=computed({get(){console.log('get()方法执行了')return name.value+'-'+sex.value},set(val){console.log('set()方法执行了')name.value = val.split('-')[0]sex.value = val.split('-')[1]}})function changeInfo(){info.value = 'Wang-女'}</script><style scoped></style>
什么时候执行get()方法
计算属性依赖的name.value或sex.value中的其中一个值发生改变,就会执行get()方法。
什么时候执行set()方法
属性值let info=computed,info发生变化执行set()方法。