From 60b452b1c5f16a5e002f6456ed96fcb338a6d666 Mon Sep 17 00:00:00 2001
From: panyue <90938238g@gmail.com>
Date: Wed, 13 Oct 2021 22:17:40 +0800
Subject: [PATCH] =?UTF-8?q?vue3=E4=B8=AD=E7=9A=84toRef=E5=92=8CtoRefs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 "13_src_toRef\345\222\214toRefs/App.vue"      | 31 +++++++++
 .../components/Demo.vue"                      | 63 +++++++++++++++++++
 "13_src_toRef\345\222\214toRefs/main.js"      | 20 ++++++
 3 files changed, 114 insertions(+)
 create mode 100644 "13_src_toRef\345\222\214toRefs/App.vue"
 create mode 100644 "13_src_toRef\345\222\214toRefs/components/Demo.vue"
 create mode 100644 "13_src_toRef\345\222\214toRefs/main.js"

diff --git "a/13_src_toRef\345\222\214toRefs/App.vue" "b/13_src_toRef\345\222\214toRefs/App.vue"
new file mode 100644
index 0000000..f7c99aa
--- /dev/null
+++ "b/13_src_toRef\345\222\214toRefs/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>
diff --git "a/13_src_toRef\345\222\214toRefs/components/Demo.vue" "b/13_src_toRef\345\222\214toRefs/components/Demo.vue"
new file mode 100644
index 0000000..473a0a4
--- /dev/null
+++ "b/13_src_toRef\345\222\214toRefs/components/Demo.vue"
@@ -0,0 +1,63 @@
+<template>
+  <h4>{{ person }}</h4>
+  <h2>姓名:{{ name }}</h2>
+  <h2>年龄:{{ age }}</h2>
+  <h2>薪资:{{ salary }}K</h2>
+  <button @click="name = name + '~'">修改姓名</button>
+  <button @click="age++">增长年龄</button>
+  <button @click="salary++">增长薪资</button>
+</template>
+
+<script>
+import { ref, reactive, toRef, toRefs} from 'vue';
+export default {
+  name: 'Demo',
+  setup(){
+    let person = reactive({
+      name: '张三',
+      age: 18,
+      job:{
+        j1:{
+          salary: 20
+        }
+      }
+    });
+
+    //ref类型的值在模板里使用是不需要.value来取的
+    const name1 = person.name //注意输出字符串，并不是响应式的数据
+    console.log('@@@@@', name1);
+    const name2 = toRef(person,name); //RefImpl 这里的name2与person.name是完全一模一样的(你改这里的name2与你改person.name是一码事),且数据还是响应式的
+    console.log('####', name2);
+
+    const x = toRefs(person);
+    console.log(x);
+
+
+    //返回一个对象(toRef是引用 name就是person.name且为响应式)
+    //toRef处理一个，而toRefs处理一群
+    //大白话:toRef(s)就是方便我们把响应式数据(ref,reactive)展开丢出去，方便在模版中应用
+    return {
+      person,
+      // name: toRef(person, "name"),
+      // age: toRef(person, "age"),
+      // salary: toRef(person.job.j1, "salary")
+      ...toRefs(person),
+      salary: toRef(person.job.j1, 'salary')  //toRef可以与toRefs连用,更加方便
+    };
+
+
+    //注意千万不能这样写
+    //一旦这样写就与元数据分离了,改name不会引起person.name的变化(因为ref把name值包装成了一个refImpl对象)
+    // return {
+    //   person,
+    //   name: ref(person.name),
+    //   age: ref(person.age),
+    //   salary: ref(person.job.j1.salary)
+    // };
+  }
+}
+</script>
+
+<style>
+</style>
+
diff --git "a/13_src_toRef\345\222\214toRefs/main.js" "b/13_src_toRef\345\222\214toRefs/main.js"
new file mode 100644
index 0000000..f97c3a7
--- /dev/null
+++ "b/13_src_toRef\345\222\214toRefs/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')