🙋‍请注意，由于本人项目中引入了unplugin-auto-import的依赖，所以所有的代码示例中均未手动引入各种依赖库（ref、reactive、useRouter等等）

初始环境搭建

npm init vue@latest

模板语法

插值

同 Vue2

<span>Message: {{ msg }}</span>

HTML

同 Vue2

<p>HTML Text: {{ rawHtml }}</p>
<p>v-html: <span v-html="rawHtml"></span></p>

Attribute

同 Vue2

<div :txt="text"></div>

绑定多个值

同 Vue2

<script setup>import exampleCom from "./exampleCom.vue"import { ref } from "vue"const a = ref("21")const name = ref("Jae")
</script><template><example-com v-bind="{age, name}"></example-com>
</template>

JavaScript 表达式

同 Vue2

<template>{{ num + 1 }}{{ izCorrect ? 'YES' : 'NO' }}{{ string.split('').reverse().join('') }}<div :id="`div-${id}`"></div>
</template>

函数

同 Vue2

<template><span :title="formatTitle(date)">{{ formatDate(date) }}</span>
</template>

指令

同 Vue2

<template><p v-if="izShow">Hello</p>
</template>

参数

同 Vue2

<template><a :href="url">点我</a>
</template>

事件

同 Vue2

<template><button @click="handleClickBtn">点我</button>
</template>

动态参数

同 Vue2

<template><a :[attributeName]="url">点我</a>
</template>

动态的事件名称

同 Vue2

<template><button @[eventName]="handleClickBtn">点我</button>
</template>

修饰符

同 Vue2

<template><form @submit.prevent="onSubmit">...</form>
</template>

响应式基础

开始学习，基本上是Vue3的船新版本🤣

声明状态

<template>{{ state.count }}
</template><script setup>
const state = reactive({count: 0
})
</script><style scoped></style>

声明方法

<template><button @click="add">{{ state.count }}</button>
</template><script setup>
const state = reactive({count: 0
})
function add() {state.count++
}
</script><style scoped></style>

ref

reactive只能用于对象、数组和 Map、Set 这样的集合类型，对 string、number 和 boolean 这样的原始类型则需要使用ref

<template><!--在 html 模板中不需要写 .value 就可以使用-->{{ count }}
</template><script setup>
const count = ref(0);
console.log(count); // { value: 0 }
console.log(count.value); // 0
</script><style scoped></style>

响应式样式

<template><button @click="open = !open">切换</button><div>Hello</div>  
</template><script setup>
const open = ref(false);
</script><style scope>div{overflow: hidden;height: v-bind("open ? '30px' : '0px'");}
</style>

Watch 和 Computed

监听状态

<template><button @click="add">{{ count }}</button><p> 是否为偶数: {{ isEvent ? '是' : '否' }} </p>
</template><script setup>
const count = ref(0)
const isEvent = ref(false)function add() {state.count++
}watch(count, () => {isEvent.value = count.value % 2 === 0
})// 立即监听
watch(count, function() {isEvent.value = count.value % 2 === 0
}, {//立即执行一次immediate: true
})
</script>

WatchEffect

会立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数（类似计算属性）。而且是非惰性,会默认调用一次

<script setup lang="ts">
let num = ref(0)setTimeout(() => {num.value++
}, 3000)watchEffect(() => {// 第一次进入页面时，打印出num 值改变：0;三秒后，再次打印num 值改变：1console.log('num 值改变：', num.value)
})</script>

计算状态

<script setup>
const text = ref('')
// 用watch也能实现，但是computed更好，有缓存，可以根据已有并用到的状态计算出新的状态
const str = computed(() => {return text.value.toUpperCase(); // 转换成大写
})
</script><template><input v-model="text" /><p>STR: {{ str }}</p>
</template>

组件通信

到重点了，要注意咯🙋‍

defineProps

<!--子组件-->
<script setup>
defineProps({name: String
})
</script><template><p>username: {{ name }}</p>
</template>

<!--父组件-->
<script setup>
const sonName = 'Jack'
</script><template><children :name="sonName" />
</template>

defineEmits

<!--子组件-->
<template><input v-model="keyword" /><button @click="onSearch">search</button>
</template><script setup>
const emit = defineEmits(['search'])
const keyword = ref('')
const onSearch = function() {emit('search', keyword.value)
}
</script>

<!--父组件-->
<template><children @search="onSearch" />
</template><script setup>
const onSearch = (keyword) => {console.log(keyword)
}
</script>

defineProps + defineEmits + computed 组件初尝试

来写一个经典的弹窗组件吧😀

<template><div v-if="dialogVisible" class="child-class"><span @click="handleClickClose">×</span><div>我是一个模拟弹窗</div></div>
</template><script setup>
const props = defineProps({visible: {type: Boolean,default: false}
})const emit = defineEmits(['update:visible'])let dialogVisible = computed({get() {return props.visible},set(val) {emit('update:visible', val)}
})
const handleClickClose = () => {dialogVisible.value = false
}
</script><style scoped>
.child-class {width: 300px;height: 200px;margin-top: 20px;border: 2px solid #000;span {float: right;clear: both;font-size: 20px;color: red;cursor: pointer;}
}
</style>

<!--父组件-->
<script setup lang="ts">
import ChildrenCom from './components/icons/ChildrenCom.vue';const open = ref(false)
const handleClick = () => {open.value = !open.value
}
</script><template><button @click="handleClick">打开</button><children-com v-model:visible="open" />
</template><style scoped></style>

注意：父组件中的 v-model="open" 等同于 Vue2 中我们常写的 :visible.sync="open"

看下效果吧👇

defineExpose

<!--子组件-->
<template>{{ sonTxt }}
</template><script setup>
const props = defineProps({sonTxt: {type: String,default: '1'}
})const test = '777'defineExpose({test
})
</script><style scoped></style>

<!--父组件-->
<template><children ref="compRef" :son-txt="txt" />
</template><script setup>
const txt = ref('Hello')const compRef = ref(null)
onMounted(() => {console.log(compRef.value.test); // 777
})
</script><style scoped></style>

使用 TypeScript

更难了，做好准备🏇

为 props 标注类型

<script setup lang="ts">
// 当使用 <script setup> 时，defineProps支持从它的参数中推导类型
const props = defineProps({param1: { type: String, required: true },param2: Number
})
props.param1 // string
props.param2 // number | undefined// 或者使用接口定义
interface IProps {param1: string,param2: number
}
const props = defineProps<IProps>()
</script>

Props 默认值

<script setup lang="ts">
interface IProps {msg?: string,strArray?: (string | number)[]
}
const props = withDefaults(defineProps<IProps>(), {msg: 'hello',strArray: () => [1, '2', '3']
})console.log(props.strArray); // [1, '2', '3']
</script><template>{{ msg }}
</template><style scoped></style>

Props 解构

Vue3 中为了保持响应性，始终需要以 props.x 的方式访问这些 prop

所以不能够解构 defineProps 的返回值，因为得到的变量将不是响应式的、也不会更新😶

<!--子组件-->
<template><!-- count 始终为 0 --><div>{{ count }}</div><!-- info 始终为 { age: 21 } --><div>{{ info }}</div>
</template><script setup lang="ts">const props = defineProps<{count: number;info: object;
}>()const { count, info } = props
</script>

<!--父组件-->
<template><comp :count="count" :info="info" />
</template><script setup>
import comp from './components/comp.vue'const count = ref(0);
const info = ref({age: 21
})
// 模拟数据变化
setTimeout(() => {count.value++info.value = { age: 99 }
}, 1000)
</script><style scoped></style>

有两种方式解决😀

方式一:直接解构。但是请注意：vue@3.5 才支持

<template><!-- count 会在1秒后变为1 --><div>{{ count }}</div><!-- info 会在1秒后变为 { age: 99 } --><div>{{ info }}</div>
</template><script setup lang="ts">
const { count, info } = defineProps<{count: number;info: object;
}>()
</script>

方式二：toRef 与 toRefs

toRef，基于响应式对象上的一个属性，创建一个对应的 ref，这个 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值

toRefs，将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的

<template><!-- count 会在1秒后变为1 --><div>{{ count }}</div><!-- info 会在1秒后变为 { age: 99 } --><div>{{ info }}</div>
</template><script setup lang="ts">
const props = defineProps<{count: numberinfo: object
}>()// const count = toRef(props, "count")
// const info  = toRef(props, "info")
const { count, info } = toRefs(props)
</script>

为 emits 标注类型

<!--子组件-->
<template><button @click="handleClickBtn">click me</button>
</template><script setup lang="ts">
const emit = defineEmits<{(e: 'change', value?: string): void
}>()
function handleClickBtn() {emit('change', '我是从子组件来的')
}
</script>

<!--父组件-->
<template><comp @change="emitChange" />
</template><script setup>
import comp from './components/comp.vue'function emitChange(val) {console.log(val);
}
</script><style scoped></style>

为 ref 标注类型

<template><comp :msg="msg" />
</template><script setup lang="ts">
import comp from './components/comp.vue'
import type { Ref } from 'vue'// 不能写msg: string，因为ref函数返回的是一个 Ref 类型的对象，而这么写实际是将其类型定义为了 string
// 因此，TypeScript 会报告类型不匹配的错误（不能将类型“Ref<string>”分配给类型“string”）
const msg: Ref<string> = ref('hello2')
</script><style scoped></style>

为reactive标注类型

<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import ChildrenCom from './components/icons/ChildrenCom.vue';
interface IBook {title: string,person?: string
}const book: IBook = reactive({title: '为reactive标注'
})
onMounted(() => {console.log(book.title); // 为reactive标注
})
</script><template><children-com  />
</template><style scoped></style>

为 computed() 标注类型

<script setup lang="ts">
const count = ref(0)
const double = computed<number>(() => {// 若返回值不是 number 类型则会报错return count.value * 2
})
</script>

<template><button @click="handleClick">Click</button>
</template><script lang="ts" setup>
const emit = defineEmits(['click'])
const handleClick = (e: MouseEvent) => {emit('click', e)
}
</script><style scoped></style>

当你启用了 ts 后，这么写会报错 参数“e”隐式具有“any”类型，这是因为TypeScript 检测到函数 handleClick 的参数 e 没有明确的类型声明，默认情况下被隐式地视为 any 类型，这不符合 TypeScript 的严格类型检查规则。

<template><button @click="handleClick">Click</button>
</template><script lang="ts" setup>
const emit = defineEmits(['click'])
const handleClick = (e: MouseEvent) => {emit('click', e)
}
</script><style scoped></style>

为事件处理函数标注类型

<!--子组件-->
<template><input @change="handleChange" />
</template><script lang="ts" setup>
const emit = defineEmits(['change'])
const handleChange = (e: Event) => { // 或者e: MouseEvent也可以emit('change', e)
}
</script><style scoped></style>

<!--父组件-->
<script setup lang="ts">
import ChildrenCom from './components/icons/ChildrenCom.vue';const handleChildChange = (e: Event) => {console.log(e.target.value);
}
</script><template><children-com @change="handleChildChange" />
</template><style scoped></style>

父组件这样子直接输出e.target.value是会报错的哦，会报错e.target 可能为 null 和 类型 EventTarget 上不存在属性 value。这是因为Event 类型是一个通用类型，而 value 属性通常存在于特定类型的事件目标（如 HTMLInputElement）上

使用类型断言改进👇：

const handleChildChange = (e: Event) => {console.log((e.target as HTMLInputElement).value);
}

为模板引用标注类型

<template><input ref="el" />
</template><script lang="ts" setup>
const el = ref(null)
onMounted(() => {el.value.focus()
})
</script><style scoped></style>

这么写的话 ts 报错 el.value 可能为 null ，这是因为在 onMounted 钩子执行时，el 可能还没有被正确引用到 DOM 元素，所以我们可以使用可选链操作符 ?. 来避免直接调用 focus 方法时出现的 null 错误。

const el = ref(null)
onMounted(() => {el.value?.focus()
})

这时候 ts 又报错了 类型“never”上不存在属性 focus,看来直接声明 el 为 ref(null) 是不行的，那怎么办呢？🧐

const el = ref<HTMLInputElement | null>(null)
onMounted(() => {el.value?.focus()
})

介绍一种 Vue3.5 以上可使用的更直接的方法，使用 useTemplateRef：

const element = useTemplateRef<HTMLInputElement>('el') // 甚至变量名都不需要跟template中ref的名字一样
onMounted(() => {element.value?.focus()
})

路由跳转，获取路由参数

直接上示例🤣
路由文件：

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/home',name: 'home',component: () => import('@/views/Home.vue')},{path: '/about',name: 'about',component: () => import('@/views/About.vue')}]
})export default router

关于页：

<template><div>我是关于页</div>
</template><script setup></script><style scoped></style>

首页：

<template><div>我是首页</div>
</template><script setup></script><style scoped></style>

App.vue

<script setup>
const router = useRouter()
const route = useRoute()
let title = ref('')
let url = ref('')watch(route, val => {const routeName = val.nametitle.value = routeName === 'home' ? '前往关于页' : '前往首页'url.value = routeName === 'home' ? '/about' : '/home'
})
const goToPage = () => {router.push(url.value)
}
</script><template><router-view></router-view><button @click="goToPage">{{ title }}</button>
</template><style scoped></style>

获取上下文对象

Vue3 中无法使用 this 获取上下文对象了，虽然 Vue3 的开发中不使用这个问题也不大，但是对于刚从 Vue2 转到 Vue3 的同学可能依然还是想获取到类似 Vue2 中this 中的数据，有办法吗？🧐

有的👇

// 如果你没有安装自动导入依赖的依赖库，需要手动引入哦，import { getCurrentInstance } from 'vue'
const { ctx } = getCurrentInstance()
console.log(ctx); // 和 this 的属性基本一样，只不过这里每个都是Proxy

缓存路由组件

缓存一般的动态组件，Vue3 和 Vue2 的用法是一样的，都是使用 KeepAlive 包裹 Component。但缓存路由组件，由于Vue 3 由于引入了组合式 API 和 v-slot 功能，有更简洁的方式来实现动态缓存：

Vue2👇

<KeepAlive><router-view />
</KeepAlive>

Vue3👇

<router-view v-slot="{ Component }"><keep-alive v-if="Component.meta && Component.meta.keepAlive"><component :is="Component" /></keep-alive><component v-else :is="Component" />
</router-view>

逻辑复用

Vue2 中逻辑复用主要是采用 mixin，但 mixin 会有数据来源不明、引起命名冲突、可重用性有限等问题。所以 Vue3 推荐使用 hooks🥸

来个最经典的鼠标位置跟踪功能吧🤣

// useMouse.ts
export function useMouse() {const x = ref(0)const y = ref(0)function update(e: MouseEvent) {x.value = e.pageXy.value = e.pageY}onMounted(() => {window.addEventListener('mousemove', update)})onUnmounted(() => {window.addEventListener('mousemove', update)})return { x, y }
}

<script setup lang="ts">
import { useMouse } from './hooks/useMouse'const { x, y } = useMouse()
</script><template><div>鼠标位置为：{{ x }}, {{ y }}</div>
</template><style scoped></style>

生命周期

这部分看文档吧，比较简单就不多说了，注意一下如果需要在组件创建前注入逻辑，直接在 <script setup> 中编写同步代码就可以了

全局 API

还记得Vue2 怎么添加全局属性和全局方法吗？是这样的：Vue.prototype.$http = () => {}，在构造函数Vue的原型对象上添加。但是在Vue3中，需要在 app 实例上添加：

// main.ts
const app = createApp({})
app.config.globalProperties.$http = () => {}

CSS 样式穿透

<style lang="scss" scoped>
/* Vue2 */
/deep/ .el-form {.el-form-item { ... }
}/* Vue3 */
:deep(.el-form) {.el-form-item { ... }
}
</style>

异步组件

通过 defineAsyncComponent 异步加载

<template><Children></Children>
</template><script setup lang="ts">
// import Children from './Children.vue'
const Children = defineAsyncComponent(() => import('./Children.vue'))
</script>

Teleport

<Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。因为Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响

<script setup lang="ts">
import ChildrenCom from './components/icons/ChildrenCom.vue';
</script><template><!-- 插入至body --><Teleport to='body'><children-com /></Teleport><!-- #app下 --><children-com />
</template><style scoped></style>