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

ref、修改对象传入更新数据问题

Browse Source
This commit is contained in:
云上贵猪 2025-04-29 21:51:25 +08:00
parent 2303e5b333
commit 3774ab0b28
2 changed files with 22 additions and 8 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="reaction 对象的使用 v-for">
<list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题">
<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>
@ -99,7 +99,15 @@
<option name="project" value="LOCAL" />
<updated>1745932029058</updated>
</task>
<option name="localTasksCounter" value="6" />
<task id="LOCAL-00006" summary="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题">
<option name="closed" value="true" />
<created>1745934177134</created>
<option name="number" value="00006" />
<option name="presentableId" value="LOCAL-00006" />
<option name="project" value="LOCAL" />
<updated>1745934177134</updated>
</task>
<option name="localTasksCounter" value="7" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@ -112,6 +120,7 @@
<MESSAGE value="ref 的简单实用" />
<MESSAGE value="ref 变量 和 reaction 对象的使用" />
<MESSAGE value="reaction 对象的使用 v-for" />
<option name="LAST_COMMIT_MESSAGE" value="reaction 对象的使用 v-for" />
<MESSAGE value="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题" />
<option name="LAST_COMMIT_MESSAGE" value="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题" />
</component>
</project>

15
src/components/Person.vue
View File

@ -1,20 +1,25 @@
<script setup lang="ts">
import {reactive, ref} from "vue";
let car = reactive(
//let car = reactive(
// {brand: '宝马',price:100}
//)
let car = ref(
{brand: '宝马',price:100}
)
function changeBrand(){
car.brand = '三菱'
car.value.brand = '三菱'
}
function changePrice(){
car.price += 10
car.value.price += 10
}
function changeCar(){
//car = {brand: '五菱宏观',price:5} // 页面不更新
//car = reactive({brand: '五菱宏观',price:5}) // 新指排了对象，页面不显示
Object.assign(car,{brand: '五菱宏观',price:5}) // 合并对象
//Object.assign(car,{brand: '五菱宏观',price:5}) // 合并对象
car.value = reactive({brand: '五菱宏观',price:5}) // 改成ref的话可以
//用法等同于 ⬇️
//const target = { a: 1 };
@ -28,7 +33,7 @@ function changeCar(){
<template>
<main>
<h1>汽车：{{car.brand}}===价格：{{car.price}}</h1>
<h1>汽车：{{car.brand}}===价格：{{car.price}}w</h1>
<button @click="changeBrand">修改名字</button>
<button @click="changePrice">价格+10</button>
<button @click="changeCar">整体修改</button>