优化科技_管理软件开发工程师_百度快速收录教程_网络营销知名企业

代码

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（）方法。