宜昌 公司 网站建设,清苑住房和城乡建设局网站,网站如何做绿标,网站后台改成只有一个管理员登陆文章目录 一、认识Vue31. Vue2 选项式 API vs Vue3 组合式API2. Vue3的优势二、使用create-vue搭建Vue3项目1、认识create-vue2. 使用create-vue创建项目三、组合式API - setup选项1. setup选项的写法和执行时机2. setup中写代码的特点3. `script setup`语法糖4.小结四… 文章目录 一、认识Vue31. Vue2 选项式 API vs Vue3 组合式API2. Vue3的优势 二、使用create-vue搭建Vue3项目1、认识create-vue2. 使用create-vue创建项目 三、组合式API - setup选项1. setup选项的写法和执行时机2. setup中写代码的特点3. `script setup`语法糖4.小结 四、组合式API - reactive和ref函数1. reactive()2、ref()3. 小结 五、组合式API - computed 一、认识Vue3
1. Vue2 选项式 API vs Vue3 组合式API
Vue2选项式API格式如下：
script
export default {data(){return {count:0}},methods:{addCount(){this.count++}}
}
/scriptVue3组合式API格式如下：
script setup
import { ref } from 'vue'
const count = ref(0)
const addCount = ()= count.value++
/script通过对比可以看出，Vue2的变量要要集中写在data中，方法是要集中写在methods中的；而Vue3的编程代码更少，而且变量和方法是不需要写在特定的地方的，可以随意写在你想放的位置，你可以把有关联的变量和方法集中在一块，这样也非常方便维护哦。 由此可看出Vue3的特点：
代码量变少分散式维护变成集中式维护，更易封装复用2. Vue3的优势 二、使用create-vue搭建Vue3项目
1、认识create-vue
create-vue是Vue官方新的脚手架工具，底层切换到了 vite（下一代构建工具），为开发提供极速响应
2. 使用create-vue创建项目 前置条件 - 已安装16.0或更高版本的Node.js 执行如下命令，这一指令将会安装并执行 create-vue
npm init vue@latest这一指令将会安装并执行 create-vue 项目创建完成后，项目的目录结构如下： 关键文件有：
vite.config.js - 项目的配置文件基于vite的配置. package.json - 项目包文件 核心依赖项变成了 Vue3.x 和 vitemain.js - 入口文件createApp函数创建应用实例. app.vue - 根组件 SFC单文件组件 script - template - style 变化一：脚本script和模板template顺序调整 变化二：模板template不再要求唯一根元素 变化三：脚本script添加setup标识支持组合式API 5.index.html - 单页入口 提供id为app的挂载三、组合式API - setup选项
1. setup选项的写法和执行时机
setup选项的写法
scriptexport default {setup(){},
