ahxin/Vue3-learning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

computed 计算属性，

Browse Source
This commit is contained in:
云上贵猪 2025-05-02 21:25:32 +08:00
parent 366d910999
commit 665f175129
2 changed files with 34 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
.idea/workspace.xml generated
View File

@ -4,7 +4,7 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="使用 toRefs 让数据变为响应式的">
<list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="使用 toRef 一次只能取一次数据">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Person.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Person.vue" afterDir="false" />
</list>
@ -58,7 +58,7 @@
<option name="presentableId" value="Default" />
<updated>1745919613888</updated>
<workItem from="1745919615396" duration="326000" />
<workItem from="1746189663982" duration="1506000" />
<workItem from="1746189663982" duration="2611000" />
</task>
<task id="LOCAL-00001" summary="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev&#10;&#10;# Conflicts:&#10;#&#9;.idea/workspace.xml&#10;#&#9;README.md&#10;#&#9;src/components/Person.vue">
<option name="closed" value="true" />
@ -132,7 +132,15 @@
<option name="project" value="LOCAL" />
<updated>1746190968763</updated>
</task>
<option name="localTasksCounter" value="10" />
<task id="LOCAL-00010" summary="使用 toRef 一次只能取一次数据">
<option name="closed" value="true" />
<created>1746191210625</created>
<option name="number" value="00010" />
<option name="presentableId" value="LOCAL-00010" />
<option name="project" value="LOCAL" />
<updated>1746191210625</updated>
</task>
<option name="localTasksCounter" value="11" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@ -160,6 +168,7 @@
<MESSAGE value="ref、修改对象传入更新数据问题" />
<MESSAGE value="defineProps，实现简单的父传子" />
<MESSAGE value="使用 toRefs 让数据变为响应式的" />
<option name="LAST_COMMIT_MESSAGE" value="使用 toRefs 让数据变为响应式的" />
<MESSAGE value="使用 toRef 一次只能取一次数据" />
<option name="LAST_COMMIT_MESSAGE" value="使用 toRef 一次只能取一次数据" />
</component>
</project>

44
src/components/Person.vue
View File

@ -1,38 +1,36 @@
<script setup lang="ts">
import {reactive, toRef, toRefs} from "vue";
import {ref,computed} from "vue";
let person = reactive({
name:'张三',
age:18,
let firstName = ref('zhang')
let listName =ref('san')
// 计算属性有缓存
let myName = computed(()=>{
//return firstName.value + listName.value
return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + listName.value
})
let {name,age} = toRefs(person)
// toRef 使用，一次智能取一个
let x = toRef(person,'age',)
function changeName(){
//person.name = person.name + '~'
person.name += '~'
}
function changeAge(){
person.age +=1
}
</script>
<template>
<main>
<h1>姓名：{{name}}</h1>
<h1>年龄：{{age}}</h1>
<h1>toRef取出的年龄：{{x}}</h1>
<button @click="changeName">修改名字</button>
<button @click="changeAge">年龄+1</button>
<main class="person">
姓：<input type="text" v-model:="firstName">
名：<input type="text" v-model:="listName">
</main>
<h1>姓名：{{myName}}</h1>
<!--<button></button>-->
</template>
<style scoped>
button {
margin: 0 1rem;
}
.person {
font-size: 2rem;
line-height: 2rem;
input{
height: 2rem;
}
}
</style>