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

ref 变量 和 reaction 对象的使用

Browse Source
This commit is contained in:
云上贵猪 2025-04-29 20:53:18 +08:00
parent 1afc441a09
commit 95413620f5
2 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
.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="setup 的新写法">
<list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="ref 的简单实用">
<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>
@ -75,7 +75,15 @@
<option name="project" value="LOCAL" />
<updated>1745930176285</updated>
</task>
<option name="localTasksCounter" value="3" />
<task id="LOCAL-00003" summary="ref 的简单实用">
<option name="closed" value="true" />
<created>1745930547660</created>
<option name="number" value="00003" />
<option name="presentableId" value="LOCAL-00003" />
<option name="project" value="LOCAL" />
<updated>1745930547660</updated>
</task>
<option name="localTasksCounter" value="4" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@ -85,6 +93,7 @@
<MESSAGE value="Vue2 &amp; Vue3 中data 与setup 数据的调用情况" />
<MESSAGE value="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" />
<MESSAGE value="setup 的新写法" />
<option name="LAST_COMMIT_MESSAGE" value="setup 的新写法" />
<MESSAGE value="ref 的简单实用" />
<option name="LAST_COMMIT_MESSAGE" value="ref 的简单实用" />
</component>
</project>

26
src/components/Person.vue
View File

@ -1,27 +1,29 @@
<script setup lang="ts">
import {ref} from "vue";
import {ref, reactive} from "vue";
let age = ref(18);
let name = ref('张三');
const address = ref('广东广州天河...')
// 单数据
let name = ref('张三')
// 对象数据
let car = reactive(
{ brand: '小米 su 7', prive: 30}
)
function changeName(){
name.value = '李四'
}
function AgeADD(){
age.value +=1
function changePrive(){
// 价格修改
car.prive += 10
}
let axxxx:string = '新泻法';
</script>
<template>
<main>
<h1>姓名：{{name}}</h1>
<h1>年龄：{{age}}</h1>
<h1>地址：{{address}}</h1>
<h1>{{name}}买了一辆{{car.brand}},价值{{car.prive}}万</h1>
<button @click="changeName">修改名字</button>
<button @click="AgeADD">年龄 +1</button>
<button @click="changePrive">修改价格</button>
</main>
</template>