• 小括号() 不传任何函数实参

• 尖括号<> 传递泛型类型参数

编译器会尽可能地尝试根据类型参数推导出等价的运行时选项。

defineProps 宏函数，非标准的 JS 函数，主要是给脚手架编译用的，使用的时候不需要导入

defineProps<{
    money: number
  	car?: string
}>()
使用  src/App.vue
 
<ChildCom :moeny="200" />
props默认值和开启响应性
 
 
解决没有默认值的情况
 
 src/components/ChildCom.vue
 
const { moeny=100 } = defineProps<{ moeny:number }>
 
<h3>moeny: {{ moeny }}</h3>
 
vite.config.ts
 
plugins:[
    Vue({
        reactivityTransform:true
defineEmits与Typescript
 
src/components/ChildCom.vue
 
运行时声明(能用，但不严谨)
 
const emit = defineEmits(['getValFromSon','changeMoney'])
基于类型声明(推荐使用)
 
const emit = defineEmits<{
    (e:'getValFromSon',val:number):void,
    (e:'changeMoney'):void
}>()
触发自定义事件并传递参数
 
const btn = () => {
    emit('getValFromSon',100)
父子组件通讯与TS
 
绑定自定义事件获取子组件传递的数据 src/App.vue
 
<ChildCom :moeny="200" @getValFromSon="getValFromSon" />
 
const getValFromSon = (val:number) = {
    console.log('父组件接收到数据', val)
ref 与 TS
 
ref 基本类型，可以省略泛型的类型注解
 
const num = ref(1400)
 
ref 复杂类型，建议通过泛型指定
 
const list = ref<number[]>([])
 
// Todo 对象结构
interface Todo{
    id:number
    content:string
    done:boolean
// Todo[]   数组的每一项都是 Todo 对象结构
const todoList = ref<Todo[]>()
todoList.value = [
    id: 1,
    content: '吃饭',
    done: true,
reactive 与 TS
 
 
大部分情况下不需要书写类型声明，reactive 能自动根据初始值自动推导
 
import { reactive } from 'vue'
// 不使用类型声明
const obj1 = reactive({ title: 'Hello' })
// 使用类型声明
interface ObjType = {
    title:string
const obj2:ObjType = reactive({ title: 'Hello' })
computed与TS
 
 
大部分情况下是不需要写类型注解，computed 会根据返回值自动推导类型
 
const num = ref(100)
// 使用类型声明
const doubleNum = computed<number>(()=>{ return num.value*2 })
事件处理函数与TS
 
Event 通用事件对象
 
通用事件对象 Event 能访问通用属性 .target
 
MouseEvent 鼠标事件对象(鼠标坐标属性)
 
鼠标事件对象 MouseEvent 能访问鼠标坐标 .clentX .clientY
 
const handleClick = ( e:MouseEvent ) => {
    console.log(e.clientX)
// @click="handleClick"
KeyboardEvent 键盘事件对象(键盘按键属性)
 
键盘事件对象 KeyboardEvent 能访问键盘按键 .key
❗配合 as 断言指定为 input 标签类型，才可访问 .value 属性
 
const handleKeyup = (e:KeyboardEvent) =>{
    console.log(e.key)
    ❗// 配合 as 断言指定为 input 标签类型，才可访问 .value 属性
    ;(e.target as HTMLInputElement).value
<input v-model="num" @keyup="handelChange" />
✨开发技巧：鼠标悬停事件，看类型提示
 
<button @click="handleClick">点击获取事件对象</button>
<input @keyup="handleKeyup" type="text" />
模板引用与TS
 
<input type="text" ref="inputRef" />
const inputRef = ref<HTMLInputElement>()
// const inputRef = ref<null| HTMLInputElement>(null)
// 组件挂载完毕后
onMounted(() => {
  // 1.✅更安全的调用，分支判断(类型守卫)
  // if (inputRef.value) {
  //   inputRef.value.focus()
  // 2.更安全的调用，可选链
  // (?.) 可选操作符 允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。
  // 参考文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining
  inputRef.value?.focus()
  // 3.类型断言的写法
  (inputRef.value as HTMLInputElement).focus()
内置类型声明文件
 
✨Ctrl + 鼠标左键 来查看内置类型声明文件内容
 
分别查看：Math random Date getDate 这些内置的类型声明
 
第三方库类型声明文件
 
下载第三方包
 
yarn add axios 或者 npm i axios
 
axios 自带类型声明文件，书写代码有提示
 
yarn add lodash  或者 npm i lodash
 
lodash 源码通过JS写的，默认无类型声明文件
 
yarn add @types/lodash -D 或者 npm i @types/lodash -D
 
lodash 的类型声明文件，DefinitelyTyped 开源提供
 
 
一般较为出名的第三方包，都会有开发者补全对应的类型声明文件
 
 
下载命令为 yarn add @types/包名 -D
 
 
import axios from 'axios'
import lodash from 'lodash'
// ✨ Ctrl + 鼠标左键，来查看类型声明文件内容，axios，create，baseURL
axios.create({
  baseURL: '',
lodash.chunk(['a', 'b', 'c', 'd'], 2)
共享自定义类型声明文件
 
项目需求：
 
电商网站在很多的模块中都要用到商品信息类型
 
解决方案：
 
把共享的类型定义到独立的文件并导出，哪里需要导入即可
 
src/types/index.d.ts 导出
 
// 导出共享的类型 Goods
export interface Goods{
    id:string
    name:string
    desc:string
    price:number
// 导入类型 Goods
import { Goods } from './types'
// 使用类型
const goods:Goods = {
    id: '123',
    name: '商品名称',
    desc: '商品描述',
    price: 99,
点击查看TypeScript基础知识梳理
TypeScript 是一种由微软开发的自由开源的编程语言，主要提供了类型系统和对 ES6的支持。它是JavaScript的一个超集，扩展了JavaScript的 语法，因此现有的 JavaScript 代码可与TypeScript 一起工作无需任何修改。
TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript可以运行在任何浏览器上。  TypeScript 是 Angular2、vue3的开发语言
				
和 Vue2 子传父案例简单入门 相比，Vue 3 子传父的 emit 使用略有不同，同样 通过 Father.vue 和 Child.vue 展示
首先是 Child.vue，重点在 setup 函数中引入 context 形参，配合 emit 使用。定义了两个函数，toFatherNum(), toFatherObject() 分别向父组件传递数字和对象
<template>
  <a-button @click="toFatherNum">子传父数字</a-button&
				
参考vue-typescript-admin-element-ui 基于Vue+typescript版的后台管理系统模板。
众所周知，js是一门弱类型的语言，尤其是在变量赋值时，永远都是给变量直接赋值各种类型值来初始化，线上一些隐藏的bug就冷不防会暴露出来。把这种错误扼杀在项目开发编译阶段而非上线阶段，所有就有了typescript超集的出现。那Vue中是怎么引用typescript项目的呢
一、vue-property-decorator
vue-property-decorator在vue-class
				
### 回答1：
Vue3 是一种用于构建用户界面的开源JavaScript 框架。它提供了许多功能和工具，使用户能够更轻松地创建可交互、响应式的应用程序。Vue3 采用了一些新的语法和技术，使其在性能和开发效率方面有了明显的改进。
Vite4 是一个基于原生ES模块解析的构建工具。它具有快速冷启动和快速热更新的能力，使开发人员能够更快速地进行开发和调试。与传统的打包工具不同，Vite4 通过在浏览器运行时进行模块解析，避免了不必要的打包和编译步骤，提供了更加流畅的开发体验。
Element Plus 是一个基于Vue3 的组件库，提供了丰富的UI组件和交互式工具，可以帮助开发人员快速构建出现代化的Web界面。Element Plus 是Element UI 的升级版，针对Vue3 进行了优化和改进，提供了更好的性能和更丰富的功能。
TypeScript 是一种强类型的JavaScript 超集，允许开发人员在JavaScript 代码中添加静态类型注解。这样可以在开发过程中提早发现错误并提供更好的代码提示。Vue3 通过与TypeScript 的集成，使开发人员能够使用类、接口、泛型等高级特性来构建更健壮的应用程序。
综上所述，Vue3、Vite4、Element Plus 和 TypeScript 的结合，可以提供一个高效、灵活和强大的开发环境。开发人员可以利用Vite4 的快速构建能力和热更新功能，结合Element Plus 提供的丰富组件，通过TypeScript 的类型检查和提示，更加轻松地构建出现代化的Vue 应用程序。  
### 回答2：
Vue 3 是一款非常流行的 JavaScript 框架，用于构建现代化的用户界面。它的核心思想是组件化开发，通过将界面拆分成独立的组件，使开发者能够更好地管理和重用代码。
Vite 4 是 Vue 3 的一个新型构建工具，用于快速构建现代化的前端应用。相比传统的打包工具，Vite 4 支持开箱即用的单文件组件，可以进行更快的热重载和快速启动，从而提高开发效率。
Element Plus 是一套基于 Vue 3 的UI组件库，它提供了大量的高质量的组件，可以用于构建漂亮、响应式的用户界面。Element Plus 的组件易于使用，灵活且高度可定制，适合开发各种类型的应用。它还提供了强大的工具和样式库，使开发者能够更轻松地定制和管理应用的外观和风格。
TypeScript 是一个强类型的 JavaScript 超集，它为开发者提供了更强大的类型检查和代码提示功能。与 JavaScript 不同，TypeScript 在编码过程中能够捕获一些常见的错误，帮助开发者提高代码的质量和可维护性。TypeScript 还支持最新的 JavaScript 特性，并且可以与 Vue 3、Vite 4 和 Element Plus 等工具和库完美集成。
综合上述所述，结合 Vue 3、Vite 4、Element Plus 和 TypeScript 可以实现一种高效、可维护和易于定制的开发方式。开发者可以使用 Vite 4 快速创建 Vue 3 项目，同时借助 Element Plus 的丰富组件库来构建出漂亮的用户界面。而 TypeScript 则提供了更强大的类型检查和代码提示，避免一些潜在的bug，提高开发效率。通过组合使用这些工具和库，可以实现更快速、更可靠的前端开发体验。  
### 回答3：
Vue3是一种流行的JavaScript框架，它具有响应式和组件化的特性，使开发者可以轻松构建现代化的Web应用程序。Vite4是Vue3的一个新的构建工具，旨在提供更快的启动和热重载，以及更好的开发体验。
Element Plus是一个基于Vue3的UI库，它提供了一套美观、易用和高性能的组件，用于构建优雅的用户界面。它使用了TypeScript来提供类型检查和智能提示，这使得在使用Element Plus时能更加轻松地进行开发。
TypeScript是一种由微软开发的编程语言，它是JavaScript的超集，添加了静态类型支持。它允许开发者在编写代码时进行类型检查，并提供了更好的代码补全和智能感知功能。在Vue3和Element Plus使用TypeScript可以提高代码的可读性和可维护性，并减少错误和调试时间。
综上所述，Vue3、Vite4、Element Plus和TypeScript是一组强大的工具和库，可以帮助开发者更快速、高效地构建现代化的Web应用程序。它们的结合提供了优秀的开发体验，并能够轻松满足各种UI需求。无论是构建大型企业应用还是小型个人项目，它们都是很好的选择。
				uni-app项目使用uview-ui报错：Component is not found in path node-modules/uview-ui/components/xx/xx
                uni-app项目使用uview-ui报错：Component is not found in path node-modules/uview-ui/components/xx/xx
                    今天码了没: 
                    重启之后又渲染层错误了
                【小程序错误】chooseAddressfail the api need to be declared in …e requiredPrivateInfos field in app.json
                    求索nnnn: 
                    你是我滴超人
                uni-app项目使用uview-ui报错：Component is not found in path node-modules/uview-ui/components/xx/xx
                    qq_34823363: 
                    你好 我也遇到一样的问题了 怎么解决的？
                uni-app项目使用uview-ui报错：Component is not found in path node-modules/uview-ui/components/xx/xx
                    AC_meimei: 
                    把工具关闭，重启
                Vue项目性能优化之---自定义指令实现图片懒加载、首屏渲染优化（组件数据懒加载）、vue-lazyload的使用
                    wendyymei: 
                    冲冲冲，后续准备好还会加更的