vue3

13.Vue3/project3/src/main.ts

@@ -1,6 +1,8 @@
 import { createApp } from 'vue'
 import router from './router'
-import App from './views/readonly-shallowReadonly.vue'
+// import App from './views/toRaw_markRaw.vue'
+import App from './views/Teleport/index.vue'
+// import App from './views/readonly-shallowReadonly.vue'
 // import App from './views/shallowRef-shallowReactive.vue'
 // import App from './App.vue'
 

13.Vue3/project3/src/views/Teleport/demo.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <Teleport to="body">
+      <div class="demo">
+        <h2>demo</h2>
+        <button @click="isShow = true">开启弹框</button>
+        <button @click="isShow = false">关闭弹框</button>
+        <div class="model" v-if="isShow"></div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+let isShow = ref(false);
+</script>
+<style scoped>
+.demo {
+  width: 500px;
+  height: 500px;
+  background: #ff0;
+  text-align: center;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-top: -400px;
+  margin-left: -400px;
+}
+.model {
+  width: 300px;
+  height: 300px;
+  background: #f00;
+}
+</style>

13.Vue3/project3/src/views/Teleport/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="list">
+    <h1>Teleport</h1>
+    <demo></demo>
+  </div>
+</template>
+
+<script setup>
+import Demo from './demo.vue'
+import { ref, reactive} from 'vue'
+
+</script>
+<style scoped>
+.list {
+    width: 800px;
+    height: 800px;
+    background: green;
+    /* background-image: linear-gradient(red, yellow, blue); */
+    /* box-shadow: 3px 5px 10px #f00; */
+    filter: saturate(200%);
+    /* filter: blur(30px); */
+}
+</style>

13.Vue3/project3/src/views/toRaw_markRaw.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <h1>toRaw-markRaw</h1>
+    <h3>{{ news1.a }}</h3>
+    <button @click="changeMain">修改</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive,toRaw,markRaw} from 'vue'
+let person = reactive({
+    name:"图图",
+    age:3
+})
+console.log(person,'对象')
+// 将响应式对象变成原始对象
+let p1 = toRaw(person);
+console.log(p1,'p1')
+let obj = {
+    name:'哆啦A梦',
+    age:7
+}
+console.log(obj,'obj');
+// let obj1 = markRaw(person);
+// console.log(obj1,'obj1')
+
+let news = markRaw({a:12,b:'哈哈'});
+let news1 = reactive(news);
+console.log(news,'news')
+console.log(news1,'news1')
+function changeMain() {
+    news1.a = 11;
+}
+</script>
+<style lang='scss' scoped>
+
+</style>