吴光慧11.1学习笔记

吴光慧学习笔记/11.1/11.1学习总结-吴光慧.md

@@ -0,0 +1,667 @@
+### setup 概述
+
+`setup`是`Vue3`中一个新的配置项，值是一个函数，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在`setup`中。
+
+特点如下：
+
+- `setup`函数返回的对象中的内容，可直接在模板中使用。
+- `setup`中访问`this`是`undefined`。
+- `setup`函数会在`beforeCreate`之前调用，它是“领先”所有钩子执行的。
+
+```vue
+<template>
+  <div class="person">
+    <h2>姓名：{{name}}</h2>
+    <h2>年龄：{{age}}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">年龄+1</button>
+    <button @click="showTel">点我查看联系方式</button>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name:'Person',
+    setup(){
+      // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
+      let name = '张三'
+      let age = 18
+      let tel = '13888888888'
+
+      // 方法，原来写在methods中
+      function changeName(){
+        name = 'zhang-san' //注意：此时这么修改name页面是不变化的
+        console.log(name)
+      }
+      function changeAge(){
+        age += 1 //注意：此时这么修改age页面是不变化的
+        console.log(age)
+      }
+      function showTel(){
+        alert(tel)
+      }
+
+      // 返回一个对象，对象中的内容，模板中可以直接使用
+      return {name,age,tel,changeName,changeAge,showTel}
+    }
+  }
+</script>
+```
+
+### setup 的返回值
+
+- 若返回一个**对象**：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）。**
+- 若返回一个**函数**：则可以自定义渲染内容，代码如下：
+
+```jsx
+setup(){
+  return ()=> '你好啊！'
+}
+```
+
+### setup 与 Options API 的关系
+
+- `Vue2` 的配置（`data`、`methos`......）中**可以访问到** `setup`中的属性、方法。
+- 但在`setup`中**不能访问到**`Vue2`的配置（`data`、`methos`......）。
+- 如果与`Vue2`冲突，则`setup`优先。
+
+### setup 语法糖
+
+`setup`函数有一个语法糖，这个语法糖，可以让我们把`setup`独立出去，代码如下：
+
+```vue
+<template>
+  <div class="person">
+    <h2>姓名：{{name}}</h2>
+    <h2>年龄：{{age}}</h2>
+    <button @click="changName">修改名字</button>
+    <button @click="changAge">年龄+1</button>
+    <button @click="showTel">点我查看联系方式</button>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name:'Person',
+  }
+</script>
+
+<!-- 下面的写法是setup语法糖 -->
+<script setup lang="ts">
+  console.log(this) //undefined
+  
+  // 数据（注意：此时的name、age、tel都不是响应式数据）
+  let name = '张三'
+  let age = 18
+  let tel = '13888888888'
+
+  // 方法
+  function changName(){
+    name = '李四'//注意：此时这么修改name页面是不变化的
+  }
+  function changAge(){
+    console.log(age)
+    age += 1 //注意：此时这么修改age页面是不变化的
+  }
+  function showTel(){
+    alert(tel)
+  }
+</script>
+```
+
+扩展：上述代码，还需要编写一个不写`setup`的`script`标签，去指定组件名字，比较麻烦，我们可以借助`vite`中的插件简化
+
+1. 第一步：`npm i vite-plugin-vue-setup-extend -D`
+2. 第二步：`vite.config.ts`
+
+```jsx
+import { defineConfig } from 'vite'
+import VueSetupExtend from 'vite-plugin-vue-setup-extend'
+
+export default defineConfig({
+  plugins: [ VueSetupExtend() ]
+})
+```
+
+3. 第三步：`<script setup lang="ts" name="Person">`
+
+## 【ref 创建：基本类型的响应式数据】
+
+- **作用：**定义响应式变量。
+- **语法：**`let xxx = ref(初始值)`。
+- **返回值：**一个`RefImpl`的实例对象，简称`ref对象`或`ref`，`ref`对象的`value`**属性是响应式的**。
+- **注意点：**
+  - `JS`中操作数据需要：`xxx.value`，但模板中不需要`.value`，直接使用即可。
+  - 对于`let name = ref('张三')`来说，`name`不是响应式的，`name.value`是响应式的。
+
+```vue
+<template>
+  <div class="person">
+    <h2>姓名：{{name}}</h2>
+    <h2>年龄：{{age}}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">年龄+1</button>
+    <button @click="showTel">点我查看联系方式</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="Person">
+  import {ref} from 'vue'
+  // name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。
+  let name = ref('张三')
+  let age = ref(18)
+  // tel就是一个普通的字符串，不是响应式的
+  let tel = '13888888888'
+
+  function changeName(){
+    // JS中操作ref对象时候需要.value
+    name.value = '李四'
+    console.log(name.value)
+
+    // 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。
+    // name = ref('zhang-san')
+  }
+  function changeAge(){
+    // JS中操作ref对象时候需要.value
+    age.value += 1 
+    console.log(age.value)
+  }
+  function showTel(){
+    alert(tel)
+  }
+</script>
+```
+
+## 【reactive 创建：对象类型的响应式数据】
+
+- **作用：**定义一个**响应式对象**（基本类型不要用它，要用`ref`，否则报错）
+- **语法：**`let 响应式对象= reactive(源对象)`。
+- **返回值：**一个`Proxy`的实例对象，简称：响应式对象。
+- **注意点：**`reactive`定义的响应式数据是“深层次”的。
+
+```vue
+<template>
+  <div class="person">
+    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
+    <h2>游戏列表：</h2>
+    <ul>
+      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
+    </ul>
+    <h2>测试：{{obj.a.b.c.d}}</h2>
+    <button @click="changeCarPrice">修改汽车价格</button>
+    <button @click="changeFirstGame">修改第一游戏</button>
+    <button @click="test">测试</button>
+  </div>
+</template>
+
+<script lang="ts" setup name="Person">
+import { reactive } from 'vue'
+
+// 数据
+let car = reactive({ brand: '奔驰', price: 100 })
+let games = reactive([
+  { id: 'ahsgdyfa01', name: '英雄联盟' },
+  { id: 'ahsgdyfa02', name: '王者荣耀' },
+  { id: 'ahsgdyfa03', name: '原神' }
+])
+let obj = reactive({
+  a:{
+    b:{
+      c:{
+        d:666
+      }
+    }
+  }
+})
+
+function changeCarPrice() {
+  car.price += 10
+}
+function changeFirstGame() {
+  games[0].name = '流星蝴蝶剑'
+}
+function test(){
+  obj.a.b.c.d = 999
+}
+</script>
+```
+
+## 【ref 创建：对象类型的响应式数据】
+
+- 其实`ref`接收的数据可以是：**基本类型**、**对象类型**。
+- 若`ref`接收的是对象类型，内部其实也是调用了`reactive`函数。
+
+```vue
+<template>
+  <div class="person">
+    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
+    <h2>游戏列表：</h2>
+    <ul>
+      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
+    </ul>
+    <h2>测试：{{obj.a.b.c.d}}</h2>
+    <button @click="changeCarPrice">修改汽车价格</button>
+    <button @click="changeFirstGame">修改第一游戏</button>
+    <button @click="test">测试</button>
+  </div>
+</template>
+
+<script lang="ts" setup name="Person">
+import { ref } from 'vue'
+
+// 数据
+let car = ref({ brand: '奔驰', price: 100 })
+let games = ref([
+  { id: 'ahsgdyfa01', name: '英雄联盟' },
+  { id: 'ahsgdyfa02', name: '王者荣耀' },
+  { id: 'ahsgdyfa03', name: '原神' }
+])
+let obj = ref({
+  a:{
+    b:{
+      c:{
+        d:666
+      }
+    }
+  }
+})
+
+console.log(car)
+
+function changeCarPrice() {
+  car.value.price += 10
+}
+function changeFirstGame() {
+  games.value[0].name = '流星蝴蝶剑'
+}
+function test(){
+  obj.value.a.b.c.d = 999
+}
+</script>
+```
+
+## 【ref 对比 reactive】
+
+宏观角度看：
+
+> 1. `ref`用来定义：**基本类型数据**、**对象类型数据**；
+>
+> 2. `reactive`用来定义：**对象类型数据**。
+
+- 区别：
+
+> 1. `ref`创建的变量必须使用`.value`（可以使用`volar`插件自动添加`.value`）。
+>
+>    <img src="C:/Users/Administrator/Desktop/资料/images/自动补充value.png" alt="自动补充value" style="zoom:50%;border-radius:20px" /> 
+>
+> 2. `reactive`重新分配一个新对象，会**失去**响应式（可以使用`Object.assign`去整体替换）。
+
+- 使用原则：
+
+> 1. 若需要一个基本类型的响应式数据，必须使用`ref`。
+> 2. 若需要一个响应式对象，层级不深，`ref`、`reactive`都可以。
+> 3. 若需要一个响应式对象，且层级较深，推荐使用`reactive`。
+
+## 【toRefs 与 toRef】
+
+- 作用：将一个响应式对象中的每一个属性，转换为`ref`对象。
+- 备注：`toRefs`与`toRef`功能一致，但`toRefs`可以批量转换。
+- 语法如下：
+
+```vue
+<template>
+  <div class="person">
+    <h2>姓名：{{person.name}}</h2>
+    <h2>年龄：{{person.age}}</h2>
+    <h2>性别：{{person.gender}}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeGender">修改性别</button>
+  </div>
+</template>
+
+<script lang="ts" setup name="Person">
+  import {ref,reactive,toRefs,toRef} from 'vue'
+
+  // 数据
+  let person = reactive({name:'张三', age:18, gender:'男'})
+	
+  // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
+  let {name,gender} =  toRefs(person)
+	
+  // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
+  let age = toRef(person,'age')
+
+  // 方法
+  function changeName(){
+    name.value += '~'
+  }
+  function changeAge(){
+    age.value += 1
+  }
+  function changeGender(){
+    gender.value = '女'
+  }
+</script>
+```
+
+## 【computed】
+
+作用：根据已有数据计算出新数据（和`Vue2`中的`computed`作用一致）。
+
+<img src="C:/Users/Administrator/Desktop/资料/images/computed.gif" style="zoom:20%;" />  
+
+```vue
+<template>
+  <div class="person">
+    姓：<input type="text" v-model="firstName"> <br>
+    名：<input type="text" v-model="lastName"> <br>
+    全名：<span>{{fullName}}</span> <br>
+    <button @click="changeFullName">全名改为：li-si</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="App">
+  import {ref,computed} from 'vue'
+
+  let firstName = ref('zhang')
+  let lastName = ref('san')
+
+  // 计算属性——只读取，不修改
+  /* let fullName = computed(()=>{
+    return firstName.value + '-' + lastName.value
+  }) */
+
+
+  // 计算属性——既读取又修改
+  let fullName = computed({
+    // 读取
+    get(){
+      return firstName.value + '-' + lastName.value
+    },
+    // 修改
+    set(val){
+      console.log('有人修改了fullName',val)
+      firstName.value = val.split('-')[0]
+      lastName.value = val.split('-')[1]
+    }
+  })
+
+  function changeFullName(){
+    fullName.value = 'li-si'
+  } 
+</script>
+```
+
+## 【watch】
+
+- 作用：监视数据的变化（和`Vue2`中的`watch`作用一致）
+- 特点：`Vue3`中的`watch`只能监视以下**四种数据**：
+
+> 1. `ref`定义的数据。
+> 2. `reactive`定义的数据。
+> 3. 函数返回一个值（`getter`函数）。
+> 4. 一个包含上述内容的数组。
+
+我们在`Vue3`中使用`watch`的时候，通常会遇到以下几种情况：
+
+### * 情况一
+
+监视`ref`定义的【基本类型】数据：直接写数据名即可，监视的是其`value`值的改变。
+
+```vue
+<template>
+  <div class="person">
+    <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
+    <h2>当前求和为：{{sum}}</h2>
+    <button @click="changeSum">点我sum+1</button>
+  </div>
+</template>
+
+<script lang="ts" setup name="Person">
+  import {ref,watch} from 'vue'
+  // 数据
+  let sum = ref(0)
+  // 方法
+  function changeSum(){
+    sum.value += 1
+  }
+  // 监视，情况一：监视【ref】定义的【基本类型】数据
+  const stopWatch = watch(sum,(newValue,oldValue)=>{
+    console.log('sum变化了',newValue,oldValue)
+    if(newValue >= 10){
+      stopWatch()
+    }
+  })
+</script>
+```
+
+### * 情况二
+
+监视`ref`定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。
+
+> 注意：
+>
+> * 若修改的是`ref`定义的对象中的属性，`newValue` 和 `oldValue` 都是新值，因为它们是同一个对象。
+>
+> * 若修改整个`ref`定义的对象，`newValue` 是新值， `oldValue` 是旧值，因为不是同一个对象了。
+
+```vue
+<template>
+  <div class="person">
+    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
+    <h2>姓名：{{ person.name }}</h2>
+    <h2>年龄：{{ person.age }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changePerson">修改整个人</button>
+  </div>
+</template>
+
+<script lang="ts" setup name="Person">
+  import {ref,watch} from 'vue'
+  // 数据
+  let person = ref({
+    name:'张三',
+    age:18
+  })
+  // 方法
+  function changeName(){
+    person.value.name += '~'
+  }
+  function changeAge(){
+    person.value.age += 1
+  }
+  function changePerson(){
+    person.value = {name:'李四',age:90}
+  }
+  /* 
+    监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
+    watch的第一个参数是：被监视的数据
+    watch的第二个参数是：监视的回调
+    watch的第三个参数是：配置对象（deep、immediate等等.....） 
+  */
+  watch(person,(newValue,oldValue)=>{
+    console.log('person变化了',newValue,oldValue)
+  },{deep:true})
+  
+</script>
+```
+
+### *  情况三
+
+监视`reactive`定义的【对象类型】数据，且默认开启了深度监视。
+
+```vue
+<template>
+  <div class="person">
+    <h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
+    <h2>姓名：{{ person.name }}</h2>
+    <h2>年龄：{{ person.age }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changePerson">修改整个人</button>
+    <hr>
+    <h2>测试：{{obj.a.b.c}}</h2>
+    <button @click="test">修改obj.a.b.c</button>
+  </div>
+</template>
+
+<script lang="ts" setup name="Person">
+  import {reactive,watch} from 'vue'
+  // 数据
+  let person = reactive({
+    name:'张三',
+    age:18
+  })
+  let obj = reactive({
+    a:{
+      b:{
+        c:666
+      }
+    }
+  })
+  // 方法
+  function changeName(){
+    person.name += '~'
+  }
+  function changeAge(){
+    person.age += 1
+  }
+  function changePerson(){
+    Object.assign(person,{name:'李四',age:80})
+  }
+  function test(){
+    obj.a.b.c = 888
+  }
+
+  // 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
+  watch(person,(newValue,oldValue)=>{
+    console.log('person变化了',newValue,oldValue)
+  })
+  watch(obj,(newValue,oldValue)=>{
+    console.log('Obj变化了',newValue,oldValue)
+  })
+</script>
+```
+
+### * 情况四
+
+监视`ref`或`reactive`定义的【对象类型】数据中的**某个属性**，注意点如下：
+
+1. 若该属性值**不是**【对象类型】，需要写成函数形式。
+2. 若该属性值是**依然**是【对象类型】，可直接编，也可写成函数，建议写成函数。
+
+结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。
+
+```vue
+<template>
+  <div class="person">
+    <h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
+    <h2>姓名：{{ person.name }}</h2>
+    <h2>年龄：{{ person.age }}</h2>
+    <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeC1">修改第一台车</button>
+    <button @click="changeC2">修改第二台车</button>
+    <button @click="changeCar">修改整个车</button>
+  </div>
+</template>
+
+<script lang="ts" setup name="Person">
+  import {reactive,watch} from 'vue'
+
+  // 数据
+  let person = reactive({
+    name:'张三',
+    age:18,
+    car:{
+      c1:'奔驰',
+      c2:'宝马'
+    }
+  })
+  // 方法
+  function changeName(){
+    person.name += '~'
+  }
+  function changeAge(){
+    person.age += 1
+  }
+  function changeC1(){
+    person.car.c1 = '奥迪'
+  }
+  function changeC2(){
+    person.car.c2 = '大众'
+  }
+  function changeCar(){
+    person.car = {c1:'雅迪',c2:'爱玛'}
+  }
+
+  // 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
+  /* watch(()=> person.name,(newValue,oldValue)=>{
+    console.log('person.name变化了',newValue,oldValue)
+  }) */
+
+  // 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
+  watch(()=>person.car,(newValue,oldValue)=>{
+    console.log('person.car变化了',newValue,oldValue)
+  },{deep:true})
+</script>
+```
+
+### * 情况五
+
+监视上述的多个数据
+
+```vue
+<template>
+  <div class="person">
+    <h1>情况五：监视上述的多个数据</h1>
+    <h2>姓名：{{ person.name }}</h2>
+    <h2>年龄：{{ person.age }}</h2>
+    <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeC1">修改第一台车</button>
+    <button @click="changeC2">修改第二台车</button>
+    <button @click="changeCar">修改整个车</button>
+  </div>
+</template>
+
+<script lang="ts" setup name="Person">
+  import {reactive,watch} from 'vue'
+
+  // 数据
+  let person = reactive({
+    name:'张三',
+    age:18,
+    car:{
+      c1:'奔驰',
+      c2:'宝马'
+    }
+  })
+  // 方法
+  function changeName(){
+    person.name += '~'
+  }
+  function changeAge(){
+    person.age += 1
+  }
+  function changeC1(){
+    person.car.c1 = '奥迪'
+  }
+  function changeC2(){
+    person.car.c2 = '大众'
+  }
+  function changeCar(){
+    person.car = {c1:'雅迪',c2:'爱玛'}
+  }
+
+  // 监视，情况五：监视上述的多个数据
+  watch([()=>person.name,person.car],(newValue,oldValue)=>{
+    console.log('person.car变化了',newValue,oldValue)
+  },{deep:true})
+
+</script>
+```

吴光慧学习笔记/11.1/hello_vue3/.gitignore

@@ -0,0 +1,36 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/

吴光慧学习笔记/11.1/hello_vue3/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

吴光慧学习笔记/11.1/hello_vue3/README.md

@@ -0,0 +1,42 @@
+# hello_vue3
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) 
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```

吴光慧学习笔记/11.1/hello_vue3/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

吴光慧学习笔记/11.1/hello_vue3/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

吴光慧学习笔记/11.1/hello_vue3/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "hello_vue3",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build"
+  },
+  "dependencies": {
+    "vue": "^3.5.22"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.2",
+    "@types/node": "^22.18.11",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "npm-run-all2": "^8.0.4",
+    "typescript": "~5.9.0",
+    "vite": "^7.1.11",
+    "vite-plugin-vue-devtools": "^8.0.3",
+    "vue-tsc": "^3.1.1"
+  }
+}

吴光慧学习笔记/11.1/hello_vue3/src/App.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="person">
+    <h2>姓名：{{name}}</h2>
+    <h2>年龄：{{age}}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">年龄+1</button>
+    <button @click="showTel">点我查看联系方式</button>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name:'App',
+    data() {
+      return {
+        name:'张三',
+        age:18,
+        tel:'13888888888'
+      }
+    },
+    methods:{
+      changeName(){
+        this.name = 'zhang-san'
+      },
+      changeAge(){
+        this.age += 1
+      },
+      showTel(){
+        alert(this.tel)
+      }
+    },
+  }
+</script>

吴光慧学习笔记/11.1/hello_vue3/src/assets/base.css

@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

吴光慧学习笔记/11.1/hello_vue3/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

吴光慧学习笔记/11.1/hello_vue3/src/assets/main.css

@@ -0,0 +1,35 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}

吴光慧学习笔记/11.1/hello_vue3/src/components/HelloWorld.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{
+  msg: string
+}>()
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      You’ve successfully created a project with
+      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>

吴光慧学习笔记/11.1/hello_vue3/src/components/TheWelcome.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import WelcomeItem from './WelcomeItem.vue'
+import DocumentationIcon from './icons/IconDocumentation.vue'
+import ToolingIcon from './icons/IconTooling.vue'
+import EcosystemIcon from './icons/IconEcosystem.vue'
+import CommunityIcon from './icons/IconCommunity.vue'
+import SupportIcon from './icons/IconSupport.vue'
+
+const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
+</script>
+
+<template>
+  <WelcomeItem>
+    <template #icon>
+      <DocumentationIcon />
+    </template>
+    <template #heading>Documentation</template>
+
+    Vue’s
+    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
+    provides you with all information you need to get started.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <ToolingIcon />
+    </template>
+    <template #heading>Tooling</template>
+
+    This project is served and bundled with
+    <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
+    recommended IDE setup is
+    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
+    +
+    <a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
+      >Vue - Official</a
+    >. If you need to test your components and web pages, check out
+    <a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
+    and
+    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
+    /
+    <a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
+
+    <br />
+
+    More instructions are available in
+    <a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
+    >.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <EcosystemIcon />
+    </template>
+    <template #heading>Ecosystem</template>
+
+    Get official tools and libraries for your project:
+    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
+    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
+    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
+    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
+    you need more resources, we suggest paying
+    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
+    a visit.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <CommunityIcon />
+    </template>
+    <template #heading>Community</template>
+
+    Got stuck? Ask your question on
+    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
+    (our official Discord server), or
+    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
+      >StackOverflow</a
+    >. You should also follow the official
+    <a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
+    Bluesky account or the
+    <a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
+    X account for latest news in the Vue world.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <SupportIcon />
+    </template>
+    <template #heading>Support Vue</template>
+
+    As an independent project, Vue relies on community backing for its sustainability. You can help
+    us by
+    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
+  </WelcomeItem>
+</template>

吴光慧学习笔记/11.1/hello_vue3/src/components/WelcomeItem.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="item">
+    <i>
+      <slot name="icon"></slot>
+    </i>
+    <div class="details">
+      <h3>
+        <slot name="heading"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  margin-top: 2rem;
+  display: flex;
+  position: relative;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+i {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  width: 32px;
+  height: 32px;
+
+  color: var(--color-text);
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+@media (min-width: 1024px) {
+  .item {
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+  }
+
+  i {
+    top: calc(50% - 25px);
+    left: -26px;
+    position: absolute;
+    border: 1px solid var(--color-border);
+    background: var(--color-background);
+    border-radius: 8px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
+  }
+}
+</style>

吴光慧学习笔记/11.1/hello_vue3/src/main.ts

@@ -0,0 +1,6 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

吴光慧学习笔记/11.1/hello_vue3/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

吴光慧学习笔记/11.1/hello_vue3/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

吴光慧学习笔记/11.1/hello_vue3/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

吴光慧学习笔记/11.1/hello_vue3/vite.config.ts

@@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})

吴光慧学习笔记/11.1/study/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

吴光慧学习笔记/11.1/study/README.md

@@ -0,0 +1,24 @@
+# study
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

吴光慧学习笔记/11.1/study/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

吴光慧学习笔记/11.1/study/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

吴光慧学习笔记/11.1/study/jsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": ".",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+  },
+  "include": ["src/**/*.js", "src/**/*.vue"]
+}

吴光慧学习笔记/11.1/study/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "study",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "dev": "vite"
+  },
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "vue": "^3.2.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "vite": "^7.1.12"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

吴光慧学习笔记/11.1/study/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

吴光慧学习笔记/11.1/study/src/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

吴光慧学习笔记/11.1/study/src/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import study from './view/study.vue'
+
+createApp(study).mount('#study')

吴光慧学习笔记/11.1/study/src/view/study.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="person">
+    姓：<input type="text" v-model="firstName"> <br>
+    名：<input type="text" v-model="lastName"> <br>
+    全名：<span>{{fullName}}</span> <br>
+    <button @click="changeFullName">全名改为：li-si</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="App">
+  import {ref,computed} from 'vue'
+
+  let firstName = ref('zhang')
+  let lastName = ref('san')
+
+  // 计算属性——只读取，不修改
+  /* let fullName = computed(()=>{
+    return firstName.value + '-' + lastName.value
+  }) */
+
+
+  // 计算属性——既读取又修改
+  let fullName = computed({
+    // 读取
+    get(){
+      return firstName.value + '-' + lastName.value
+    },
+    // 修改
+    set(val){
+      console.log('有人修改了fullName',val)
+      firstName.value = val.split('-')[0]
+      lastName.value = val.split('-')[1]
+    }
+  })
+
+  function changeFullName(){
+    fullName.value = 'li-si'
+  } 
+</script>

吴光慧学习笔记/11.1/study/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()]
+})

吴光慧学习笔记/11.1/study/vue.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()]
+})

吴光慧学习笔记/11.1/ts/helloworld.js

@@ -0,0 +1,5 @@
+function greeter(person) {
+    return 'Hello, ' + person;
+}
+var user = 'Yee';
+console.log(greeter(user));

吴光慧学习笔记/11.1/ts/helloworld.ts

@@ -0,0 +1,27 @@
+function greeter1 (person: string) {
+  return 'Hello, ' + person
+}
+
+let userr = 'Yee'
+
+console.log(greeter1(userr))
+
+//person:string 类型注释
+/**
+ 使用接口来描述一个拥有 firstName 和 lastName 字段的对象
+ interface Person {
+  firstName: string
+  lastName: string
+}
+
+function greeter (person: Person) {
+  return 'Hello, ' + person.firstName + ' ' + person.lastName
+}
+
+let user = {
+  firstName: 'Yee',
+  lastName: 'Huang'
+}
+
+console.log(greeter(user))
+ */

吴光慧学习笔记/11.1/ts/user.js

@@ -0,0 +1,23 @@
+// 基于类的面向对象编程示例
+// 定义一个User类，用于表示用户信息
+var User = /** @class */ (function () {
+    // 类的构造函数，用于初始化实例
+    // 参数：firstName（名）、lastName（姓）
+    function User(firstName, lastName) {
+        this.firstName = firstName; // 初始化名
+        this.lastName = lastName; // 初始化姓
+        this.fullName = firstName + ' ' + lastName; // 拼接全名
+    }
+    return User;
+}());
+// 定义greeter函数，用于向符合Person接口结构的对象打招呼
+// 参数：person（符合Person接口的对象）
+function greeter2(person) {
+    // 返回拼接好的问候语
+    return 'Hello, ' + person.firstName + ' ' + person.lastName;
+}
+// 创建User类的实例，传入名"Yee"和姓"Huang"
+var user2 = new User('Yee', 'Huang');
+// 调用greeter函数并打印结果
+// 虽然传入的是User实例，但User类包含firstName和lastName属性，符合Person接口要求，因此可以正常使用
+console.log(greeter2(user2)); // 输出：Hello, Yee Huang

吴光慧学习笔记/11.1/ts/user.ts

@@ -0,0 +1,37 @@
+// 基于类的面向对象编程示例
+
+// 定义一个User类，用于表示用户信息
+class User {
+  // 声明类的属性
+  fullName: string;  // 用户的全名
+  firstName: string; // 用户的名
+  lastName: string;  // 用户的姓
+
+  // 类的构造函数，用于初始化实例
+  // 参数：firstName（名）、lastName（姓）
+  constructor(firstName: string, lastName: string) {
+    this.firstName = firstName;  // 初始化名
+    this.lastName = lastName;    // 初始化姓
+    this.fullName = firstName + ' ' + lastName;  // 拼接全名
+  }
+}
+
+// 定义Person接口，规定了包含firstName和lastName属性的对象结构
+interface Person {
+  firstName: string;  // 名
+  lastName: string;   // 姓
+}
+
+// 定义greeter函数，用于向符合Person接口结构的对象打招呼
+// 参数：person（符合Person接口的对象）
+function greeter2(person: Person) {
+  // 返回拼接好的问候语
+  return 'Hello, ' + person.firstName + ' ' + person.lastName;
+}
+
+// 创建User类的实例，传入名"Yee"和姓"Huang"
+let user2 = new User('Yee', 'Huang');
+
+// 调用greeter函数并打印结果
+// 虽然传入的是User实例，但User类包含firstName和lastName属性，符合Person接口要求，因此可以正常使用
+console.log(greeter2(user2));  // 输出：Hello, Yee Huang