shallowReactive和shallowRef

20_脚手架/vue3_test/14.src_shallowReactive和shallowRef/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <button @click="isShowDemo=!isShowDemo">点击展示隐藏</button>
+  <Demo v-if="isShowDemo"/>
+</template>
+
+<script>
+import {ref} from "vue";
+import Demo from "@/components/demo.vue";
+
+export default {
+  name: 'App',
+  components: {Demo},
+  setup() {
+    let isShowDemo = ref(true)
+
+    return {
+      isShowDemo,
+    }
+  }
+
+}
+</script>

20_脚手架/vue3_test/14.src_shallowReactive和shallowRef/components/demo.vue

@@ -0,0 +1,39 @@
+<template>
+  <h4>当前的x值是： {{ x.y }}</h4>
+  <button @click="x++">点击+1</button>
+  <h2>{{ person }}</h2>
+  <h2>姓名：{{ name }}</h2>
+  <h2>年龄：{{ age }}</h2>
+  <h2>薪资：{{ job.j1.salary }}</h2>
+  <button @click="name+='~'">修改姓名</button>
+  <button @click="age++">修改年龄</button>
+  <button @click="job.j1.salary++">修改薪资</button>
+</template>
+
+<script>
+import {reactive, ref, toRef, toRefs, shallowReactive, shallowRef} from "vue";
+
+export default {
+  name: 'Demo',
+
+  setup() {
+    // let person = shallowReactive({  // 只考虑第一层的数据响应式
+    let person = shallowReactive({
+      name: '张三',
+      age: 18,
+      job: {
+        j1: {
+          salary: 20
+        }
+      }
+    })
+    let x = shallowRef({y:0})  //shallow不处理对象类型的响应式
+
+    return {
+      person,
+      x,
+      ...toRefs(person)
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/14.src_shallowReactive和shallowRef/main.js

@@ -0,0 +1,10 @@
+// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// createApp(App).mount('#app')
+
+// 创建应用实例对象
+const app = createApp(App)
+console.log('@@@',app)
+app.mount('#app')

20_脚手架/vue3_test/src/components/demo.vue

@@ -1,4 +1,6 @@
 <template>
+  <h4>当前的x值是： {{ x.y }}</h4>
+  <button @click="x++">点击+1</button>
   <h2>{{ person }}</h2>
   <h2>姓名：{{ name }}</h2>
   <h2>年龄：{{ age }}</h2>
@@ -9,13 +11,14 @@
 </template>
 
 <script>
-import {reactive,toRef,toRefs} from "vue";
+import {reactive, ref, toRef, toRefs, shallowReactive, shallowRef} from "vue";
 
 export default {
   name: 'Demo',
 
   setup() {
-    let person = reactive({
+    // let person = shallowReactive({  // 只考虑第一层的数据响应式
+    let person = shallowReactive({
       name: '张三',
       age: 18,
       job: {
@@ -24,12 +27,11 @@ export default {
         }
       }
     })
+    let x = shallowRef({y:0})  //shallow不处理对象类型的响应式
 
     return {
       person,
-      // name:toRef(person, 'name'),
+      x,
-      // age: toRef(person, 'age'),
-      // salary: toRef(person.job.j1, 'salary')
       ...toRefs(person)
     }
   }