![](https://file.jishuzhan.net/article/1769524708866265090/affd975c8904ac1965d68e953477c403.webp) ## 全套笔记资料代码移步： [前往gitee仓库查看](https://gitee.com/yinuo112/Frontend/tree/master/Vue/Vue3+ElementPlus+Pinia开发小兔鲜电商项目/note.md) #### 感兴趣的小伙伴可以自取哦，欢迎大家点赞转发\~ *** ** * ** *** ### 全套教程部分目录： ![](https://file.jishuzhan.net/article/1769524708866265090/d7f213728119afe4f74cfe130f604b94.webp) ![](https://file.jishuzhan.net/article/1769524708866265090/556b95fdf804a79a2615bb0974a18523.webp) *** ** * ** *** ### 部分文件图片： ![](https://file.jishuzhan.net/article/1769524708866265090/dded7ff50cd76ffbe8c5c61b4e378eba.webp) ## 认识Vue3 ### 1. Vue3组合式API体验 > 通过 Counter 案例体验Vue3新引入的组合式API \`\`\`vue \ export default { data(){ return { count:0 } }, methods:{ addCount(){ this.count++ } } } \ \`\`\` \`\`\`vue \` ### 3. 执行多次 > 生命周期函数执行多次的时候，会按照顺序依次执行 \`\`\`vue import { onMounted } from 'vue' onMounted(()=\>{ // 自定义逻辑 }) onMounted(()=\>{ // 自定义逻辑 }) \ \`\`\` ## 组合式API - 父子通信 ### 1. 父传子 > 基本思想 1. 父组件中给子组件绑定属性 2. 子组件内部通过props选项接收数据 !\[image.png\]( ### 2. 子传父 > 基本思想 1. 父组件中给子组件标签通过@绑定事件 2. 子组件内部通过 emit 方法触发事件 !\[image.png\]( ## 组合式API - 模版引用 > 概念：通过 ref标识获取真实的 dom对象或者组件实例对象 ### 1. 基本使用 > 实现步骤： 1. 调用ref函数生成一个ref对象 2. 通过ref标识绑定ref对象到标签 !\[image.png\]( ### 2. defineExpose > 默认情况下在