From a3ce6627d271bb24b0b31cf13383d5f4be49e0d4 Mon Sep 17 00:00:00 2001
From: wanghao <wanghao@ninghao.net>
Date: Tue, 13 Oct 2020 11:24:31 +0800
Subject: [PATCH 01/10] =?UTF-8?q?JavaScript=EF=BC=9AProxy=20=E4=B8=8E=20Re?=
 =?UTF-8?q?flect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.vue | 34 +++++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/app/app.vue b/src/app/app.vue
index 74c5c43..84ab4cf 100644
--- a/src/app/app.vue
+++ b/src/app/app.vue
@@ -9,9 +9,41 @@ export default {
       name: '宁皓网',
     };
   },
+
+  created() {
+    const user = {
+      name: '宁皓网',
+    };
+
+    const handler = {
+      get(target, property) {
+        return target[property];
+      },
+
+      set(target, property, value) {
+        if (property === 'name') {
+          if (value.length > 10) {
+            throw new Error('名字太长了！');
+          }
+        }
+
+        return Reflect.set(target, property, value);
+      },
+    };
+
+    const userProxy = new Proxy(user, handler);
+
+    try {
+      userProxy.name = 'NINGHAONINGHAO';
+    } catch (error) {
+      console.log('错误：', error.message);
+    }
+
+    console.log(userProxy.name);
+  },
 };
 </script>
 
 <style>
 @import './styles/app.css';
-</style>
\ No newline at end of file
+</style>
-- 
Gitee


From c912b6ffd5b0a9b9696b89abcc2e332e9bab5c11 Mon Sep 17 00:00:00 2001
From: wanghao <wanghao@ninghao.net>
Date: Tue, 13 Oct 2020 13:03:21 +0800
Subject: [PATCH 02/10] =?UTF-8?q?=E7=90=86=E8=A7=A3=20Vue=20=E7=9A=84?=
 =?UTF-8?q?=E5=8F=8D=E5=BA=94=E6=80=A7=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.vue | 32 ++------------------------------
 1 file changed, 2 insertions(+), 30 deletions(-)

diff --git a/src/app/app.vue b/src/app/app.vue
index 84ab4cf..22d3350 100644
--- a/src/app/app.vue
+++ b/src/app/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <h3>{{ name }}</h3>
+  <h3 @click="name = 'NINGHAO'">{{ name }}</h3>
 </template>
 
 <script>
@@ -11,35 +11,7 @@ export default {
   },
 
   created() {
-    const user = {
-      name: '宁皓网',
-    };
-
-    const handler = {
-      get(target, property) {
-        return target[property];
-      },
-
-      set(target, property, value) {
-        if (property === 'name') {
-          if (value.length > 10) {
-            throw new Error('名字太长了！');
-          }
-        }
-
-        return Reflect.set(target, property, value);
-      },
-    };
-
-    const userProxy = new Proxy(user, handler);
-
-    try {
-      userProxy.name = 'NINGHAONINGHAO';
-    } catch (error) {
-      console.log('错误：', error.message);
-    }
-
-    console.log(userProxy.name);
+    console.log(this.$data);
   },
 };
 </script>
-- 
Gitee


From 655eaa548cb1131f9f46762e3f77dad3b4578498 Mon Sep 17 00:00:00 2001
From: wanghao <wanghao@ninghao.net>
Date: Tue, 13 Oct 2020 13:08:44 +0800
Subject: [PATCH 03/10] =?UTF-8?q?Composition=20API=EF=BC=9A=E7=BB=84?=
 =?UTF-8?q?=E5=90=88=E5=BC=8F=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/app/app.vue b/src/app/app.vue
index 22d3350..2962608 100644
--- a/src/app/app.vue
+++ b/src/app/app.vue
@@ -4,15 +4,13 @@
 
 <script>
 export default {
-  data() {
+  setup() {
+    const name = '宁皓网';
+
     return {
-      name: '宁皓网',
+      name,
     };
   },
-
-  created() {
-    console.log(this.$data);
-  },
 };
 </script>
 
-- 
Gitee


From 0456af60dc6f685706faadac7120206580b418e8 Mon Sep 17 00:00:00 2001
From: wanghao <wanghao@ninghao.net>
Date: Tue, 13 Oct 2020 14:06:09 +0800
Subject: [PATCH 04/10] =?UTF-8?q?=E5=A3=B0=E6=98=8E=E5=85=B7=E6=9C=89?=
 =?UTF-8?q?=E5=8F=8D=E5=BA=94=E7=89=B9=E6=80=A7=E7=9A=84=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=EF=BC=88ref=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/app.vue b/src/app/app.vue
index 2962608..8ac1ef0 100644
--- a/src/app/app.vue
+++ b/src/app/app.vue
@@ -3,9 +3,13 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
   setup() {
-    const name = '宁皓网';
+    const name = ref('宁皓网');
+
+    console.log(name.value);
 
     return {
       name,
-- 
Gitee


From e4819928c4319e4e60d0104836552dde63a2a0bc Mon Sep 17 00:00:00 2001
From: wanghao <wanghao@ninghao.net>
Date: Tue, 13 Oct 2020 14:08:29 +0800
Subject: [PATCH 05/10] =?UTF-8?q?=E5=A3=B0=E6=98=8E=E5=85=B7=E6=9C=89?=
 =?UTF-8?q?=E5=8F=8D=E5=BA=94=E7=89=B9=E6=80=A7=E7=9A=84=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=EF=BC=88reactive=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/app.vue b/src/app/app.vue
index 8ac1ef0..bbb2bef 100644
--- a/src/app/app.vue
+++ b/src/app/app.vue
@@ -1,18 +1,26 @@
 <template>
   <h3 @click="name = 'NINGHAO'">{{ name }}</h3>
+  <div @click="user.name = 'WANGHAO'">{{ user.name }}</div>
 </template>
 
 <script>
-import { ref } from 'vue';
+import { reactive, ref } from 'vue';
 
 export default {
   setup() {
     const name = ref('宁皓网');
 
+    const user = reactive({
+      name: '王皓',
+    });
+
+    console.log(user);
+
     console.log(name.value);
 
     return {
       name,
+      user,
     };
   },
 };
-- 
Gitee


From e99ce1abb39bcf69e7d380df8682086dfca504b8 Mon Sep 17 00:00:00 2001
From: wanghao <wanghao@ninghao.net>
Date: Tue, 13 Oct 2020 14:32:43 +0800
Subject: [PATCH 06/10] =?UTF-8?q?=E8=A7=A3=E6=9E=84=E5=8F=8D=E5=BA=94?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=EF=BC=88toRefs=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/app/app.vue b/src/app/app.vue
index bbb2bef..04904ff 100644
--- a/src/app/app.vue
+++ b/src/app/app.vue
@@ -1,26 +1,24 @@
 <template>
   <h3 @click="name = 'NINGHAO'">{{ name }}</h3>
-  <div @click="user.name = 'WANGHAO'">{{ user.name }}</div>
+  <div @click="username = 'WANGHAO'">{{ username }}</div>
 </template>
 
 <script>
-import { reactive, ref } from 'vue';
+import { reactive, ref, toRefs } from 'vue';
 
 export default {
   setup() {
     const name = ref('宁皓网');
 
     const user = reactive({
-      name: '王皓',
+      username: '王皓',
     });
 
-    console.log(user);
-
-    console.log(name.value);
+    // const { username } = toRefs(user);
 
     return {
       name,
-      user,
+      ...toRefs(user),
     };
   },
 };
-- 
Gitee


From 59505a47f99bee2d0f6861250d77263060a9f683 Mon Sep 17 00:00:00 2001
From: wanghao <wanghao@ninghao.net>
Date: Tue, 13 Oct 2020 15:26:04 +0800
Subject: [PATCH 07/10] =?UTF-8?q?=E7=BB=84=E5=90=88=E5=BC=8F=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=EF=BC=9A=E6=8F=90=E4=BE=9B=E7=BB=84=E4=BB=B6=E6=96=B9?=
 =?UTF-8?q?=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.vue | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/app/app.vue b/src/app/app.vue
index 04904ff..5e6e5d9 100644
--- a/src/app/app.vue
+++ b/src/app/app.vue
@@ -1,24 +1,21 @@
 <template>
-  <h3 @click="name = 'NINGHAO'">{{ name }}</h3>
-  <div @click="username = 'WANGHAO'">{{ username }}</div>
+  <h3 @click="changeName">{{ name }}</h3>
 </template>
 
 <script>
-import { reactive, ref, toRefs } from 'vue';
+import { ref } from 'vue';
 
 export default {
   setup() {
     const name = ref('宁皓网');
 
-    const user = reactive({
-      username: '王皓',
-    });
-
-    // const { username } = toRefs(user);
+    const changeName = () => {
+      name.value = 'NINGHAO';
+    };
 
     return {
       name,
-      ...toRefs(user),
+      changeName,
     };
   },
 };
-- 
Gitee


From 4e71ff5950d280b4c4e2f645ad4bf42b6b48854e Mon Sep 17 00:00:00 2001
From: wanghao <wanghao@ninghao.net>
Date: Tue, 13 Oct 2020 15:57:08 +0800
Subject: [PATCH 08/10] =?UTF-8?q?=E7=BB=84=E5=90=88=E5=BC=8F=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=EF=BC=9A=E7=94=9F=E5=91=BD=E5=91=A8=E6=9C=9F=E6=96=B9?=
 =?UTF-8?q?=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/app.vue b/src/app/app.vue
index 5e6e5d9..b1100de 100644
--- a/src/app/app.vue
+++ b/src/app/app.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 
 export default {
   setup() {
@@ -13,6 +13,11 @@ export default {
       name.value = 'NINGHAO';
     };
 
+    // 生命周期
+    onMounted(() => {
+      console.log('mounted');
+    });
+
     return {
       name,
       changeName,
-- 
Gitee


From e430d085a25737d90afae04880e0afdb68bc7e17 Mon Sep 17 00:00:00 2001
From: wanghao <wanghao@ninghao.net>
Date: Tue, 13 Oct 2020 16:20:39 +0800
Subject: [PATCH 09/10] =?UTF-8?q?=E7=BB=84=E5=90=88=E5=BC=8F=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=EF=BC=9A=E7=9B=91=E8=A7=86=E6=95=B0=E6=8D=AE=EF=BC=88?=
 =?UTF-8?q?watch=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/app.vue b/src/app/app.vue
index b1100de..a66fb78 100644
--- a/src/app/app.vue
+++ b/src/app/app.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 
 export default {
   setup() {
@@ -18,6 +18,11 @@ export default {
       console.log('mounted');
     });
 
+    // 监视数据
+    watch(name, (newName, oldName) => {
+      console.log(newName, oldName);
+    });
+
     return {
       name,
       changeName,
-- 
Gitee


From 868d83bb6fd5c7dd52b6203210068ce8ccb700a1 Mon Sep 17 00:00:00 2001
From: wanghao <wanghao@ninghao.net>
Date: Tue, 13 Oct 2020 16:22:57 +0800
Subject: [PATCH 10/10] =?UTF-8?q?=E7=BB=84=E5=90=88=E5=BC=8F=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=EF=BC=9A=E8=AE=A1=E7=AE=97=E5=B1=9E=E6=80=A7=EF=BC=88?=
 =?UTF-8?q?computed=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/app.vue b/src/app/app.vue
index a66fb78..7ac834c 100644
--- a/src/app/app.vue
+++ b/src/app/app.vue
@@ -1,9 +1,9 @@
 <template>
-  <h3 @click="changeName">{{ name }}</h3>
+  <h3 @click="changeName">{{ nameEmoji }}</h3>
 </template>
 
 <script>
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted, watch, computed } from 'vue';
 
 export default {
   setup() {
@@ -23,9 +23,13 @@ export default {
       console.log(newName, oldName);
     });
 
+    // 计算属性
+    const nameEmoji = computed(() => `${name.value} 🏕`);
+
     return {
       name,
       changeName,
+      nameEmoji,
     };
   },
 };
-- 
Gitee