vue3中的toRaw和markRaw

Author: Panyue-genkiyo

16_src_toRaw和markRaw/App.vue

@@ -0,0 +1,31 @@
+<template>
+  <!--vue3的组件模版结构可以没有根标签-->
+  <button @click="isShowDemo = !isShowDemo">{{ isShowDemo ? '隐藏' : '显示'}}</button>
+  <Demo v-if="isShowDemo"/>
+</template>
+
+<script>
+import Demo from "./components/Demo";
+import { ref } from "vue";
+export default {
+  name: 'App',
+  components: {Demo},
+  setup(){
+    let isShowDemo = ref(true);
+    return {
+      isShowDemo
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

16_src_toRaw和markRaw/components/Demo.vue

@@ -0,0 +1,77 @@
+<template>
+  <h2>当前求和为:{{ sum }}</h2>
+  <button @click="sum++">sum+1</button>
+  <hr/>
+  <h2>姓名:{{ name }}</h2>
+  <h2>年龄:{{ age }}</h2>
+  <h2>薪资:{{ job.j1.salary }}K</h2>
+  <h3 v-show="person.car">座驾信息:{{ person.car }}</h3>
+  <button @click="name = name + '~'">修改姓名</button>
+  <button @click="age++">增长年龄</button>
+  <button @click="job.j1.salary++">增长薪资</button>
+  <button @click="showRawPerson">输出最原始的person</button>
+  <button @click="addCar">给人添加一台车</button>
+  <button @click="person.car && (person.car.name +='!') ">换车名</button>
+  <button @click="changePrice">换价格</button>
+</template>
+
+<script>
+import {markRaw, reactive, ref, toRaw, toRefs} from 'vue';
+
+export default {
+  name: 'Demo',
+  setup(){
+
+    let sum = ref(0);
+
+    let person = reactive({
+      name: '张三',
+      age: 18,
+      job:{
+        j1:{
+          salary: 20
+        }
+      }
+    });
+
+    //ref reactive(响应式)
+
+    const showRawPerson = () => {
+       const  p = toRaw(person);
+       // console.log(person); //proxy代理对象 Proxy {....}
+       p.age++; //注意此时页面不会再发生变化了,普普通通的对象不是响应式
+       console.log(p); //原始对象数据  {....}
+
+      // const sum  = toRaw(sum);
+      // console.log(sum); //undefined //这条路走不通,toRaw只处理reactive对象
+    }
+
+    const addCar = () => {
+      person.car = markRaw({
+         name: 'benz',
+         price: 40
+       }); //在响应式的对象身上添加任何属性都是响应式的，经过markRaw一包装就变成最原始的数据就不会再做响应
+    }
+
+
+    const changePrice = () => {
+      person.car?.price && person.car.price++;
+      console.log(person?.car?.price);
+    }
+
+    return {
+      sum,
+      person,
+      ...toRefs(person),
+      showRawPerson,
+      addCar,
+      changePrice
+    };
+
+  }
+}
+</script>
+
+<style>
+</style>
+

16_src_toRaw和markRaw/main.js

@@ -0,0 +1,20 @@
+//引入不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
+//注意在这里无法像vue2那样去书写了，(这里并不兼容)
+import { createApp } from 'vue'
+import App from './App.vue'
+
+//创建应用实例对象---app类似于vue2中vm,但app比vm更轻
+const app = createApp(App);
+// console.log(app);
+//挂载
+app.mount('#app');
+
+// setTimeout(() => {
+//     app.unmount("#app");
+// },2000)
+
+// //vue2写法
+// const vm = new Vue({
+//     render: h=> h(App)
+// });
+// vm.$mount('#app')