Thu Jul 4 09:32:00 CST 2024 inscode

src/App.vue

@@ -24,7 +24,12 @@ const obj={
     name:'普通obj'
 }
 
-const refMsg  = ref("欢迎使用VUE3.0")
+const refMsg  = ref({
+    msg:"欢迎使用VUE3.0"
+})
+const shallowRefMsg = shallowRef({
+    msg:"欢迎使用VUE3.1"
+})
 
 const refCom = ref({
     name:'Com1',
@@ -32,7 +37,14 @@ const refCom = ref({
 })
 
 function changeMsg(){
-    refMsg.value = 777
+    // refMsg.value = 777
+    refMsg.value.msg = 888
+}
+
+function changeShallowRefMsg(){
+    // shallowRefMsg.value = 888
+    shallowRefMsg.value.msg = 999
+    
 }
 
 function useFeature(id){
@@ -58,7 +70,9 @@ useFeature(refMsg)
 
 <template>
     <p>{{ refMsg }}</p>
-    <button @click="changeMsg">++</button>
+    <button @click="changeMsg">changeMsg</button>
+    <p>{{ shallowRefMsg }}</p>
+    <button @click="changeShallowRefMsg">shallowRefMsg</button>
     <p>
         <button @click="changeCom">+-</button>
     </p>