Vue3入门

1. 为什么要学 Vue3 ？

Vue3 的优势：

在这里插入图片描述

Vue2 选项式 API vs Vue3 组合式API

在这里插入图片描述

2. create-vue搭建Vue3项目

2.1 认识 create-vue

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

2.2 使用create-vue创建项目

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

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

关键文件：

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

4. 组合式API - setup选项

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

在这里插入图片描述

4.2 setup选项中写代码的特点

在这里插入图片描述

4.3

在这里插入图片描述

4.4

在这里插入图片描述

小总结

setup选项的执行时机？
beforeCreate钩子之前自动执行
setup写代码的特点是什么？
定义数据 + 函数然后以对象方式return

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

5.1 reactive()

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

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

//执行函数 传入参数 变量接收
const state = reactive(对象类型)
</script>

从 vue 包中导入 reactive 函数
在 <script setup> 中执行 reactive 函数并传入类型为对象的初始值，并使用变量接收返回值

5.2 ref()

作用：接收简单类型或者对象类型的数据传入并返回一个响应式的对象
核心步骤：

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

//执行函数 传入参数 变量接收
const state = ref(简单类型或者复杂类型数据)
</script>

从 vue 包中导入 ref 函数
在

小总结

reactive和ref函数的共同作用是什么？
用函数调用的方式生成响应式数据
reactive vs ref ？
1. reactive不能处理简单类型的数据
2. ref参数类型支持更好但是必须通过.value访问修改
3. ref函数的内部实现依赖于reactive函数
在实际工作中推荐使用哪个？
推荐使用ref函数，更加灵活统一

6. 组合式API - computed

6.1 computed计算属性函数

计算属性基本思想和Vue2的完全一致，组合式API下的计算属性只是修改了写法
核心步骤： 1. 导入computed函数
2. 执行函数 在回调参数中return基于响应式数据做计算的值，用变量接收
在这里插入图片描述

<script setup>
// const 计算属性 = computed（（） => {
  // return 计算返回的结果
// }

import { computed,ref } from 'vue';

// 声明数据
const list = ref([1,2,3,4,5,6,7,8])

// 基于list派生一个计算属性，从list中过滤出 >2
const computedList = computed(() =>{
  return list.value.filter(item => item >2)
})

</script>

<template>
  <div>原始数据：{{ list }}</div>
  <div>计算后的数据：{{ computedList }}</div>
</template>