pinia

17.Vue3/project4/src/main.ts

@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+// import App from './App.vue'
+// import App from './view/readonly.vue'
+import App from './view/toRaw-markRaw.vue'
 import PiniaPluginPerSistedstate from 'pinia-plugin-persistedstate'
 // import router from  '.'
 // 先引入创建pinia方法

17.Vue3/project4/src/view/readonly.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <h1>Readonly</h1>
+    <h3>
+        {{ obj.name }} -- {{ obj.age }}
+    </h3>
+    <h3>
+        {{ obj1.name }} -- {{ obj1.age }}--{{ obj1.address.city }}
+    </h3>
+    <button @click="changeMain">修改</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {readonly,reactive} from "vue" 
+let obj = reactive({
+    name: '张三',
+    age: 18,
+    address:{
+        city:"北京"
+    }
+})
+let obj1 = readonly(obj);
+const changeMain = () => {
+    // Object.assign(obj,{
+    //     name: '李四',
+    //     age: 20
+    // })
+    // obj1.name = '李÷四'
+    obj1.address.city = '上海'
+    // obj1.address = {
+    //     city: '上海'
+    // }
+}
+console.log(obj);
+console.log(obj1)
+</script>
+
+<style lang="scss" scoped>
+</style>

17.Vue3/project4/src/view/shallowReactive.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <h1>shallowReactive</h1>
+    <h3>reactive:{{ obj.name }} -- {{ obj.age }}</h3>
+    <h3>shallowReactive:{{ obj1.name }} -- {{ obj1.age }}--{{ obj1.address.city }}--{{ obj1.address.area }}</h3>
+    <button @click="changeObj">修改</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,shallowReactive} from "vue" 
+let obj = reactive({
+    name: '孙悟空',
+    age: 18
+})
+let obj1 = shallowReactive({
+    name: '唐僧',
+    age: 20,
+    address:{
+        city: '北京',
+        area: '朝阳'
+    }
+})
+function changeObj() {
+    // Object.assign(obj1,{
+    //     name: '猪八戒',
+    //     age: 28
+    // })
+    // obj1.name = '猪八戒'
+    // obj1.address = {
+    //     city: '上海',
+    //     area: '浦东'
+    // }
+    obj1.address.city = '上海'
+}
+console.log(obj,obj1);
+</script>
+
+<style lang="scss" scoped>
+</style>

17.Vue3/project4/src/view/shallowReadonly.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <h1>shallowReadonly</h1>
+    <h3>
+        {{ obj.name }} -- {{ obj.age }}
+    </h3>
+    <h3>
+        {{ obj1.name }} -- {{ obj1.age }}--{{ obj1.address.city }}
+    </h3>
+    <button @click="changeMain">修改</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {shallowReadonly,reactive} from "vue" 
+let obj = reactive({
+    name: '张三',
+    age: 18,
+    address:{
+        city:"北京"
+    }
+})
+let obj1 = shallowReadonly(obj);
+const changeMain = () => {
+    // Object.assign(obj1,{
+    //     name: '李四',
+    //     age: 20
+    // })
+
+    // obj1.name = '李四'
+    // obj1.address = {
+    //     city:"天津"
+    // }
+    obj1.address.city = '上海'
+}
+console.log(obj);
+console.log(obj1)
+</script>
+
+<style lang="scss" scoped>
+</style>

17.Vue3/project4/src/view/shallowRef.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <h1>shallowRef</h1>
+    <hr />
+    <hr />
+    <hr />
+    <h2>shallowRef</h2>
+    <h3>Ref:{{ sum }}</h3>
+    <h3>Ref:{{ obj.name }}--{{ obj.age }}</h3>
+    <h3>shallowRef:{{ obj1.name }}--{{ obj1.age }}</h3>
+    <button @click="handleSum">修改</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, shallowRef } from "vue";
+let sum = ref(10);
+let sum1 = shallowRef(20);
+let obj = ref({
+  name: "张三",
+  age: 18,
+});
+let obj1 = shallowRef({
+  name: "张三1",
+  age: 181,
+});
+console.log(obj.value, obj1.value);
+function handleSum() {
+  //   sum.value += 5;
+  obj1.value = {
+    name: "李四",
+    age: 10,
+  };
+// obj1.value.name = '图图'
+console.log(obj1.value,'执行');
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

17.Vue3/project4/src/view/toRaw-markRaw.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <h1>toRaw-markRaw</h1>
+    <h3>
+        reactive:{{ person.name }} -- {{ person.age }}
+    </h3>
+    <h3>
+        toRaw:{{ p1.name }} -- {{ p1.age }}
+        <!-- 获取一个响应式对象的原生对象，toRaw返回的对象不再是响应式，不会触发视图的更新 -->
+    </h3>
+    <h3>
+        reactive:{{ obj.name }} -- {{ obj.age }}
+    </h3>
+    <h3>
+        markRaw:{{ o1.name }} -- {{ o1.age }}
+        <!-- 标记一个对象 使其永远不会变成响应式 -->
+    </h3>
+    <button @click="changePerson">修改1</button>
+    <button @click="changeObj">修改2</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {toRaw,reactive, markRaw} from "vue" 
+let person = reactive({
+    name:"图图",
+    age: 3
+})
+let p1 = toRaw(person);
+console.log(person)
+console.log(p1)
+function changePerson() {
+    Object.assign(p1,{
+        name: '小美',
+        age: 5
+    })
+}
+let obj = ({
+    name: '哆啦A梦',
+    age: 4
+})
+let o1 = markRaw(obj);
+console.log(obj)
+function changeObj() {
+    // Object.assign(o1,{
+    //     name: '机器猫',
+    //     age: 6
+    // })
+    o1 = {
+        name: '机器猫',
+        age: 6
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>