From 1e95200608c5f1f75407587b35b40c567fefa25a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=B8=85?= <3309605189@qq.com>
Date: Sun, 16 Apr 2023 12:55:56 +0000
Subject: [PATCH 1/4] =?UTF-8?q?add=2029=E7=8E=8B=E5=B8=85/20230410?=
 =?UTF-8?q?=E7=94=9F=E5=91=BD=E5=91=A8=E6=9C=9F.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 王帅 <3309605189@qq.com>
---
 ...224\237\345\221\275\345\221\250\346\234\237.md" | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 "29\347\216\213\345\270\205/20230410\347\224\237\345\221\275\345\221\250\346\234\237.md"

diff --git "a/29\347\216\213\345\270\205/20230410\347\224\237\345\221\275\345\221\250\346\234\237.md" "b/29\347\216\213\345\270\205/20230410\347\224\237\345\221\275\345\221\250\346\234\237.md"
new file mode 100644
index 0000000..d59de2e
--- /dev/null
+++ "b/29\347\216\213\345\270\205/20230410\347\224\237\345\221\275\345\221\250\346\234\237.md"
@@ -0,0 +1,14 @@
+生命周期钩子​
+每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。
+
+注册周期钩子​
+举例来说，mounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码：
+
+export default {
+  mounted() {
+    console.log(`the component is now mounted.`)
+  }
+}
+还有其他一些钩子，会在实例生命周期的不同阶段被调用，最常用的是 mounted、updated 和 unmounted。
+
+所有生命周期钩子函数的 this 上下文都会自动指向当前调用它的组件实例。注意：避免用箭头函数来定义生命周期钩子，因为如果这样的话你将无法在函数中通过 this 获取组件实例。
\ No newline at end of file
-- 
Gitee


From 7c128c07d1c88acfe0529c171b24da72b2e829f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=B8=85?= <3309605189@qq.com>
Date: Sun, 16 Apr 2023 12:57:02 +0000
Subject: [PATCH 2/4] =?UTF-8?q?add=2029=E7=8E=8B=E5=B8=85/20230411?=
 =?UTF-8?q?=E4=BE=A6=E5=90=AC=E5=99=A8.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 王帅 <3309605189@qq.com>
---
 ...11\344\276\246\345\220\254\345\231\250.md" | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 "29\347\216\213\345\270\205/20230411\344\276\246\345\220\254\345\231\250.md"

diff --git "a/29\347\216\213\345\270\205/20230411\344\276\246\345\220\254\345\231\250.md" "b/29\347\216\213\345\270\205/20230411\344\276\246\345\220\254\345\231\250.md"
new file mode 100644
index 0000000..e322a24
--- /dev/null
+++ "b/29\347\216\213\345\270\205/20230411\344\276\246\345\220\254\345\231\250.md"
@@ -0,0 +1,36 @@
+## 侦听器​
+基本示例​
+计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。
+
+在组合式 API 中，我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数：
+
+```vue
+<script setup>
+import { ref, watch } from 'vue'
+
+const question = ref('')
+const answer = ref('Questions usually contain a question mark. ;-)')
+
+// 可以直接侦听一个 ref
+watch(question, async (newQuestion, oldQuestion) => {
+  if (newQuestion.indexOf('?') > -1) {
+    answer.value = 'Thinking...'
+    try {
+      const res = await fetch('https://yesno.wtf/api')
+      answer.value = (await res.json()).answer
+    } catch (error) {
+      answer.value = 'Error! Could not reach the API. ' + error
+    }
+  }
+})
+</script>
+
+<template>
+  <p>
+    Ask a yes/no question:
+    <input v-model="question" />
+  </p>
+  <p>{{ answer }}</p>
+</template>
+```
+
-- 
Gitee


From a6ebe93461d3de7b7a8c54d740a868e5ac6aa604 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=B8=85?= <3309605189@qq.com>
Date: Sun, 16 Apr 2023 12:58:07 +0000
Subject: [PATCH 3/4] =?UTF-8?q?add=2029=E7=8E=8B=E5=B8=85/20230413?=
 =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E5=BC=95=E7=94=A8.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 王帅 <3309605189@qq.com>
---
 ...41\346\235\277\345\274\225\347\224\250.md" | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 "29\347\216\213\345\270\205/20230413\346\250\241\346\235\277\345\274\225\347\224\250.md"

diff --git "a/29\347\216\213\345\270\205/20230413\346\250\241\346\235\277\345\274\225\347\224\250.md" "b/29\347\216\213\345\270\205/20230413\346\250\241\346\235\277\345\274\225\347\224\250.md"
new file mode 100644
index 0000000..65c9c51
--- /dev/null
+++ "b/29\347\216\213\345\270\205/20230413\346\250\241\346\235\277\345\274\225\347\224\250.md"
@@ -0,0 +1,54 @@
+## 模板引用​
+虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref attribute：
+
+```vue
+<input ref="input">
+```
+ref 是一个特殊的 attribute，和 v-for 章节中提到的 key 类似。它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。这可能很有用，比如说在组件挂载时将焦点设置到一个 input 元素上，或在一个元素上初始化一个第三方库。
+
+## 访问模板引用​
+为了通过组合式 API 获得该模板引用，我们需要声明一个同名的 ref：
+
+```vue
+<script setup>
+import { ref, onMounted } from 'vue'
+
+// 声明一个 ref 来存放该元素的引用
+// 必须和模板里的 ref 同名
+const input = ref(null)
+
+onMounted(() => {
+  input.value.focus()
+})
+</script>
+
+<template>
+  <input ref="input" />
+</template>
+如果不使用 <script setup>，需确保从 setup() 返回 ref：
+
+js
+export default {
+  setup() {
+    const input = ref(null)
+    // ...
+    return {
+      input
+    }
+  }
+}
+```
+注意，你只可以在组件挂载后才能访问模板引用。如果你想在模板中的表达式上访问 input，在初次渲染时会是 null。这是因为在初次渲染前这个元素还不存在呢！
+
+如果你需要侦听一个模板引用 ref 的变化，确保考虑到其值为 null 的情况：
+
+```js
+watchEffect(() => {
+  if (input.value) {
+    input.value.focus()
+  } else {
+    // 此时还未挂载，或此元素已经被卸载（例如通过 v-if 控制）
+  }
+})
+```
+也可参考：为模板引用标注类型 
\ No newline at end of file
-- 
Gitee


From dfee34ed11841ff1516ba18dd92771e644733ba4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=B8=85?= <3309605189@qq.com>
Date: Sun, 16 Apr 2023 12:59:26 +0000
Subject: [PATCH 4/4] 1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 王帅 <3309605189@qq.com>
---
 .../20230414\347\273\204\344\273\266.md"      | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 "29\347\216\213\345\270\205/20230414\347\273\204\344\273\266.md"

diff --git "a/29\347\216\213\345\270\205/20230414\347\273\204\344\273\266.md" "b/29\347\216\213\345\270\205/20230414\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..d66de91
--- /dev/null
+++ "b/29\347\216\213\345\270\205/20230414\347\273\204\344\273\266.md"
@@ -0,0 +1,57 @@
+## 定义一个组件​
+当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)：
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
+
+<template>
+  <button @click="count++">You clicked me {{ count }} times.</button>
+</template>
+```
+
+当不使用构建步骤时，一个 Vue 组件以一个包含 Vue 特定选项的 JavaScript 对象来定义：
+
+
+```js
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const count = ref(0)
+    return { count }
+  },
+  template: `
+    <button @click="count++">
+      You clicked me {{ count }} times.
+    </button>`
+  // 或者 `template: '#my-template-element'`
+}
+```
+这里的模板是一个内联的 JavaScript 字符串，Vue 将会在运行时编译它。你也可以使用 ID 选择器来指向一个元素 (通常是原生的 <template> 元素)，Vue 将会使用其内容作为模板来源。
+
+上面的例子中定义了一个组件，并在一个 .js 文件里默认导出了它自己，但你也可以通过具名导出在一个文件中导出多个组件。
+
+## 使用组件
+
+```vue
+<script setup>
+import ButtonCounter from './ButtonCounter.vue'
+</script>
+
+<template>
+  <h1>Here is a child component!</h1>
+  <ButtonCounter />
+</template>
+
+```
+
+
+通过 <script setup>，导入的组件都在模板中直接可用。
+
+当然，你也可以全局地注册一个组件，使得它在当前应用中的任何组件上都可以使用，而不需要额外再导入。关于组件的全局注册和局部注册两种方式的利弊，我们放在了组件注册这一章节中专门讨论。
+
+组件可以被重用任意多次：
\ No newline at end of file
-- 
Gitee