vue3.0创建项目 cache miss（【Vue3】如何创建Vue3项目及组合式API）
前言
例如：随着前端领域的不断发展 ，vue3学习这门技术也越来越重要 ，很多人都开启了学习vue3的进程 ，本文就介绍了vue3的创建及组合式api 。
一 、如何创建vue3项目？
有四种办法可以进行vue3项目的创建
①使用 vue-cli 创建
vue create vue_test②使用可视化ui创建
打开cmd ，输入下面命令 vue ui③npm init vite-app
④npm init vue@latest
二 、 API 风格
Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API 。
传统OptionsAPI中 ，新增或者修改一个需求 ，就需要分别在data ，methods ，computed里修改 。传统的组件随着业务复杂度越来越高 ，代码量会不断的加大 ，整个代码逻辑都不易阅读和理解 。
Vue3 组合式 API（Composition API） 主要用于在大型组件中提高代码逻辑的可复用性 。Vue3 使用组合式 API 的地方为 setup 。在 setup 中 ，我们可以按逻辑关注点对部分代码进行分组 ，然后提取逻辑片段并与其他组件共享代码 。因此 ，组合式 API（Composition API） 允许我们编写更有条理的代码 。
2.1 选项式 API (Options API)
使用选项式 API ，我们可以用包含多个选项的对象来描述组件的逻辑 ，例如 data 、 methods 和
mounted 。选项所定义的属性都会暴露在函数内部的 this 上 ，它会指向当前的组件实例 。
<template> <button @click="increment">Count is: {{ count }}</button> </template> <script> export default { // data() 返回的属性将会成为响应式的状态 // 并且暴露在 `this` 上 data() { return {count: 0} }, // methods 是一些用来更改状态与触发更新的函数 // 它们可以在模板中作为事件监听器绑定 methods: { increment() { this.count++ } }, // 生命周期钩子会在组件生命周期的各个不同阶段被调用 // 例如这个函数就会在组件挂载完成后被调用 mounted() { console.log(`The initial count is ${this.count}.`) } } </script>2.2 组合式 API (Composition API)
setup() 钩子是在组件中使用组合式 API 的入口 。
方式一
<template> <div>{{ count }}</div> <button @click="onClick">增加 1</button> </template> <script> import { ref } from vue; export default { // 注意这部分 setup() { let count = ref(1); const onClick = () => {count.value += 1;}; return {count,onClick,}; }, } </script>组件中所用到的：数据 、方法等等 ，均要配置在setup中
1. 不要与Vue2.x配置混用
2. Vue2.x配置（data 、methos 、computed...）中可以访问到setup中的属性 、方法 。
3. 在setup中不能访问到Vue2.x配置（data 、methos 、computed...） 。
4. 如果有重名, setup优先 。方式二
<template> <div>{{ count }}</div> <button @click="onClick">增加 1</button> </template> <script setup> import { ref } from vue; const count = ref(1); const onClick = () => {count.value += 1;}; </script>总结
以上就是今天要讲的内容 ，本文仅仅简单介绍了vue3组合的使用 ，vue3提供了大量能使我们快速便捷地创建项目的方法 ，基于webpack的脚手架 ，基于vite的创建工具
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！