Vue3入门

1. 为什么要学 Vue3 ?

Vue3 的优势:

Vue3入门_第1张图片

Vue2 选项式 API vs Vue3 组合式API

Vue3入门_第2张图片
Vue3入门_第3张图片

2. create-vue搭建Vue3项目

2.1 认识 create-vue

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

2.2 使用create-vue创建项目

  1. 前提环境条件
    已安装 16.0 或更高版本的 Node.js
    查看Node.js的版本node -v
  2. 创建一个Vue应用
    npm init vue@latest
    这一指令将会安装并执行 create-vue
    Vue3入门_第4张图片

3. 熟悉项目目录和关键文件

关键文件:

  1. vite.config.js - 项目的配置文件 基于vite的配置
  2. package.json - 项目包文件 核心依赖项变成了 Vue3.x 和 vite
  3. main.js - 入口文件 createApp函数创建应用实例
  4. app.vue - 根组件 SFC单文件组件 script - template - style
    变化一:脚本script和模板template顺序调整
    变化二:模板template不再要求唯一根元素
    变化三:脚本script添加setup标识支持组合式API
  5. index.html - 单页入口 提供id为app的挂载点
    Vue3入门_第5张图片

4. 组合式API - setup选项

4.1 setup选项的写法和执行时机

Vue3入门_第6张图片

4.2 setup选项中写代码的特点

Vue3入门_第7张图片

4.3

Vue3入门_第8张图片

4.4

Vue3入门_第9张图片

小总结

  1. setup选项的执行时机?
    beforeCreate钩子之前 自动执行

  2. setup写代码的特点是什么?
    定义数据 + 函数 然后以对象方式return

5. 组合式API - reactive和ref函数

5.1 reactive()

作用:接受对象类型数据的参数传入并返回一个响应式的对象
核心步骤:

<script setup>
//导入
import { reactive } from 'vue'

//执行函数 传入参数 变量接收
const state = reactive(对象类型)
</script>
  1. 从 vue 包中导入 reactive 函数

你可能感兴趣的:(前端学习之旅,vue.js,前端,javascript)