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

这篇具有很好参考价值的文章主要介绍了【前端Vue】Vue3+Pinia小兔鲜电商项目第1篇：认识Vue3,1. Vue3组合式API体验【附代码文档】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

【前端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体验【附代码文档】

认识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>

特点：

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

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，才能给模版使用文章来源地址https://www.toymoban.com/news/detail-840969.html

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