【前端Vue】Vue3+Pinia小兔鲜电商项目第1篇:认识Vue3,1. Vue3组合式API体验【附代码文档】

  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第1篇:认识Vue3,1. Vue3组合式API体验【附代码文档】已关闭评论
  • 25 次浏览
  • A+
所属分类:Web前端
摘要

通过 Counter 案例 体验Vue3新引入的组合式API特点:![image.png](create-vue是Vue官方新的脚手架工具,底层切换到了 vite (下一代前端工具链),为开发提供极速响应

【前端Vue】Vue3+Pinia小兔鲜电商项目第1篇:认识Vue3,1. Vue3组合式API体验【附代码文档】

全套笔记资料代码移步: 前往gitee仓库查看

感兴趣的小伙伴可以自取哦,欢迎大家点赞转发~


全套教程部分目录:

【前端Vue】Vue3+Pinia小兔鲜电商项目第1篇:认识Vue3,1. Vue3组合式API体验【附代码文档】

【前端Vue】Vue3+Pinia小兔鲜电商项目第1篇:认识Vue3,1. Vue3组合式API体验【附代码文档】


部分文件图片:

【前端Vue】Vue3+Pinia小兔鲜电商项目第1篇:认识Vue3,1. Vue3组合式API体验【附代码文档】

认识Vue3

1. Vue3组合式API体验

通过 Counter 案例 体验Vue3新引入的组合式API

<script> export default {   data(){     return {       count:0     }   },   methods:{     addCount(){       this.count++     }   } } </script> 
<script setup> import { ref } from 'vue' const count = ref(0) const addCount = ()=> count.value++ </script> 

特点:

  1. 代码量变少
  2. 分散式维护变成集中式维护

2. Vue3更多的优势

![image.png](

使用create-vue搭建Vue3项目

1. 认识create-vue

create-vue是Vue官方新的脚手架工具,底层切换到了 vite (下一代前端工具链),为开发提供极速响应

![image.png](

2. 使用create-vue创建项目

前置条件 - 已安装16.0或更高版本的Node.js

执行如下命令,这一指令将会安装并执行 create-vue

npm init vue@latest 

![image.png](

熟悉项目和关键文件

![image.png](

组合式API - setup选项

1. setup选项的写法和执行时机

写法

<script>   export default {     setup(){            },     beforeCreate(){            }   } </script> 

执行时机

在beforeCreate钩子之前执行

![image.png](

2. setup中写代码的特点

在setup函数中写的数据和方法需要在末尾以对象的方式return,才能给模版使用

<script>   export default {     setup(){       const message = 'this is message'       const logMessage = ()=>{         console.log(message)       }       // 必须return才可以       return {         message,         logMessage       }     }   } </script> 

3.