pinia

12.vue3/project3/src/main.ts

@@ -1,7 +1,7 @@
 import './assets/book.css'
 import { createApp } from 'vue'
 // import App from './App.vue'
-import App from './views/Demo1.vue'
+import App from './views/Demo2.vue'
 import router from './router'
 
 const app = createApp(App)

12.vue3/project3/src/views/Demo2.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h1>toRaw-markRaw</h1>
+    <h2>我叫{{ p1.name }},今年{{ p1.age }}岁</h2>
+    <button @click="changeName">修改姓名</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive,toRaw, markRaw } from "vue";
+let person = reactive({
+  name: "图图",
+  age: 3,
+});
+let p1 = markRaw(person);
+console.log(p1,'1')
+console.log(person,'2')
+function changeName() {
+    // p1.name = '哆啦A梦'
+}
+</script>
+
+<style lang="scss" scoped>
+</style>