vue3

vue3/project6/src/main.ts

@@ -1,7 +1,10 @@
 // import './assets/main.css'
 
 import { createApp } from 'vue'
-import App from './App.vue'
+import App from './readonly_shollawReadonly.vue';
+// import App from './toRaw_markRaw.vue'
+// import App from './shallowRef_shallowReactive.vue'
+// import App from './App.vue'
 // import router from './router'
 import { createPinia } from 'pinia'
 const app = createApp(App)

vue3/project6/src/readonly_shollawReadonly.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <h1>readonly_shallowReadonly</h1>
+    <p>Ref:{{ sum }}</p>
+    <p>Ref1:{{ sum1 }}</p>
+    <button @click="changeMain1">修改1</button>
+    <button @click="changeMain2">修改2</button>
+    <h3>reactive:我叫{{ person1.name }}今年{{ person1.age }}岁,我家在{{ person1.address.a1 }}有时候回去{{ person1.address.a2 }}泡澡</h3>
+    <button @click="changeMain3">修改姓名</button>
+    <button @click="changeMain4">修改整体</button>
+    <button @click="changeMain5">修改a1</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,readonly, shallowReadonly} from "vue" 
+let sum = ref(1)
+let sum1 = shallowReadonly(sum)
+let person = reactive({
+    name:"图图",
+    age:3,
+    address:{
+        a1:"1",
+        a2:'2'
+    }
+})
+let person1 = shallowReadonly(person)
+function changeMain1() {
+    sum.value = 2
+}
+function changeMain2() {
+    sum1.value = 2
+}
+function changeMain3() {
+    person1.name = '蜡笔小新'
+}
+function changeMain4() {
+    Object.assign(person1,{
+        name:'喜羊羊',
+        age:4,
+    })
+}
+function changeMain5() {
+    person1.address.a1 = 'aaa'
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project6/src/shallowRef_shallowReactive.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <h1>shallowRef_shallowReactive</h1>
+    <h3>Ref:{{ sum }}</h3>
+    <h3>shallowRef:{{ sum1 }}</h3>
+    <button @click="changeMain1">修改1</button>
+    <button @click="changeMain2">修改2</button>
+    <hr>
+    <hr>
+    <h3>Ref:我叫{{ person.name }}今年{{ person.age }}岁</h3>
+    <button @click="changeMain3">修改姓名</button>
+    <button @click="changeMain4">修改整体</button>
+    <br><br>
+    <h3>shallowRef:我叫{{ person1.name }}今年{{ person1.age }}岁</h3>
+    <button @click="changeMain5">修改姓名</button>
+    <button @click="changeMain6">修改整体</button>
+    <hr>
+    <hr>
+    <h3>Reactive:我叫{{ person2.name }}今年{{ person2.age }}岁,我家在{{ person2.address.a1 }}有时候回去{{ person2.address.a2 }}泡澡</h3>
+        
+    <button  @click="changeMain7">修改姓名</button>
+    <button @click="changeMain8">修改整体</button>
+    <button @click="changeMain11">修改第一个地址</button>
+    <button @click="changeMain13">修改整体地址</button>
+    <hr>
+    <hr>
+    <hr>
+    <h3>shallowReactive:我叫{{ person3.name }}今年{{ person3.age }}岁, 我家在{{ person3.address.a1 }}有时候回去{{ person3.address.a2 }}泡澡</h3>
+    <button  @click="changeMain9">修改姓名</button>
+    <button @click="changeMain10">修改整体</button>
+    <button @click="changeMain12">修改第一个地址</button>
+    <button @click="changeMain14">修改整体地址</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive, shallowRef, shallowReactive} from "vue" 
+let sum = ref<number>(10);
+let sum1 = shallowRef(20)
+function changeMain1() {
+    sum.value = 12
+}
+function changeMain2() {
+    sum1.value = 22
+}
+let person = ref({
+    name:"图图",
+    age:3
+})
+function changeMain3() {
+    person.value.name = '蜡笔小新'
+}
+function changeMain4() {
+    person.value = {
+        name:'喜羊羊',
+        age:4,
+    }
+}
+let person1 = shallowRef({
+    name:'懒羊羊',
+    age:3
+})
+function changeMain5() {
+    person1.value.name = '蜡笔小新'
+}
+function changeMain6() {
+    person1.value = {
+        name:'喜羊羊',
+        age:4
+    }
+}
+
+let person2 = reactive({
+    name:'懒羊羊',
+    age:3,
+    address:{
+        a1:"青青草原",
+        a2:"铁锅"
+    }
+})
+let person3 = shallowReactive({
+    name:'懒羊羊',
+    age:3,
+    address:{
+        a1:"青青草原",
+        a2:"铁锅"
+    }
+})
+function changeMain7() {
+    person2.name = '喜羊羊'
+}
+function changeMain8() {
+    Object.assign(person2,{
+        name:"蜡笔小新",
+        age:3,
+        address:{
+            a1:'你好',
+            a2:'haha'
+        }
+    })
+}
+function changeMain9() {
+    person3.name = '喜羊羊'
+}
+function changeMain10() {
+    Object.assign(person3,{
+        name:"蜡笔小新",
+        age:4,
+        address:{
+            a1:'你好',
+            a2:'haha'
+        }
+    })
+}
+function changeMain11() {
+    person2.address.a1 = 'aaa'
+}
+function changeMain12() {
+    person3.address.a1 = 'aaa'
+}
+function changeMain13() {
+    person2.address = {
+        a1:'12',
+        a2:'1222'
+    }
+}
+function changeMain14() {
+    person3.address = {
+        a1:'12',
+        a2:'1222'
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project6/src/store/count.ts

@@ -1,9 +1,13 @@
 import { defineStore } from "pinia";
 // 不能使用this => setup
 // useXxxStore
+interface aa {
+    count:number,
+    hello:string
+}
 export const useCountStore = defineStore('news',{
     // state 类似于data函数
-    state(){
+    state():aa{
         return {
             count: 666,
             hello:'hello'
@@ -13,17 +17,17 @@ export const useCountStore = defineStore('news',{
     getters:{
         bigCount:(state)=>state.count * 10,
         // bigWord:(state) => state.hello.toUpperCase()
-        bigWord() {
+        bigWord():string {
             return this.hello.toUpperCase()
         }
     },
     // actions 相当于 methods方法
     actions:{
-        changeBig(val:string) {
+        changeBig(val:string):string {
             console.log(val,'val')
             return val.toUpperCase()
         },
-        addNumber(val:number) {
+        addNumber(val:number):void {
             this.count += val;
         }
     }

vue3/project6/src/toRaw_markRaw.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h1>toRaw_markRaw</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,toRaw,markRaw} from "vue" 
+let person = reactive({
+    name:"图图",
+    age:3
+})
+// 1.toRaw 将响应式的对象变成原始对象
+let p1 = toRaw(person)
+console.log(person,'person')
+console.log(p1,'p1')
+let aa = {
+    name:12
+}
+console.log(aa,'aa')
+// 2.markRaw 将一个对象标记为不可被转为代理。返回该对象本身。
+// let bb = markRaw(aa);
+let b = markRaw({
+    a:'21'
+})
+console.log(b,'bb')
+let cc = reactive(b);
+console.log(cc,'cc')
+let dd = reactive(aa);
+console.log(dd,'dd')
+</script>
+
+<style lang="scss" scoped>
+</style>