一、Vue3的优势
二、create-vue搭建Vue3项目
三、熟悉项目目录和关键文件
关键文件:
- vite.config.js - 项目的配置文件 基于vite的配置
- package.json - 项目包文件 核心依赖项变成了 Vue3.x 和 vite
- main.js - 入口文件 createApp函数创建应用实例
- index.html - 单页入口 提供id为app的挂载点
- app.vue - 根组件 SFC单文件组件 script - template - style
- 变化一:脚本script和模板template顺序调整
- 变化二:模板template不再要求唯一根元素
- 变化三:脚本script添加setup标识支持组合式API
四、组合式API - setup选项
1.setup选项的执行时机?
beforeCreate钩子之前 自动执行
2. setup写代码的特点是什么?
定义数据 + 函数 然后以对象方式return
3. <script setup>解决了什么问题?
经过语法糖的封装更简单的使用组合式API
4. setup中的this还指向组件实例吗?
指向undefined
五、组合式API - reactive和ref函数
1.reactive()
作用:接受对象类型数据的参数传入并返回一个响应式的对象。
1. 从 vue 包中
导入 reactive 函数。
2. 在 <script setup> 中
执行 reactive 函数
并传入
类型为对象
的初始值,并使用变量接收返回值。
2.ref()
作用:
接收
简单类型或者对象类型的数据
传入
并返回一个
响应式的对象。
1. 从 vue 包中
导入 ref 函数。
2. 在 <script setup> 中
执行 ref 函数
并传入初始值,使用
变量接收
ref 函数的返回值。
1.reactive和ref函数的共同作用是什么 ?
用函数调用的方式生成响应式数据
2.reactive vs ref ?
- 1. reactive不能处理简单类型的数据
- 2. ref参数类型支持更好但是必须通过.value访问修改
- 3.ref函数的内部实现依赖于reactive函数
3.在实际工作中推荐使用哪个?
推荐使用ref函数,更加灵活统一
六、组合式API - computed
1.computed计算属性函数
核心步骤:
1.
导入
computed函数
2.
执行函数
在回调参数中
return基于响应式数据做计算的值
,用
变量接收
七、组合式API - watch
作用: 侦听
一个或者多个数据
的变化,数据变化时执行回调函数
俩个额外参数:
1.基础使用 - 侦听单个数据
1.
导入watch
函数
2.
执行watch函数
传入要侦听的响应式数据
(ref对象)
和回调函数
![](https://i-blog.csdnimg.cn/blog_migrate/ef1af1650613670f430cf0422d8215b3.png)
2.基础使用 - 侦听多个数据
说明:同时侦听多个响应式数据的变化,不管哪个数据变化都需要执行回调
3. immediate(立即执行)
说明:在侦听器创建时立即触发回调, 响应式数据变化之后继续执行回调
4. deep(深度侦听)
默认机制:通过watch监听的ref对象默认是
浅层侦听的,直接修改嵌套的对象属性不会触发回调执行
,需要开启deep 选项
![](https://i-blog.csdnimg.cn/blog_migrate/b9313b71fc721dee7c26be51c4589088.png)
八、组合式API - 生命周期函数
1.Vue3生命周期
Vue各生命周期函数的描述
2.Vue2和Vue3的生命周期函数。
九、组合式API - 父子通信
1.组合式API下的父传子
2.组合式API下的子传父
-
父传子
1. 父传子的过程中通过什么方式接收props?
defineProps( { 属性名:类型 } )
2. setup语法糖中如何使用父组件传过来的数据?
const props = defineProps( { 属性名:类型 } )
props.xxx
-
子传父
1. 子传父的过程中通过什么方式得到emit方法?
defineEmits( [‘事件名称’] )
2. 怎么触发事件
emit('自定义事件名' , 参数)
十、组合式API - 模版引用
1.defineExpose()
默认情况下在<script setup>语法糖下
组件内部的属性和方法是不开放
给父组件访问的,
可以通过defineExpose编译宏
指定哪些属性和方法允许访问
2.组合式API - provide和inject 1
作用和场景
顶层组件向任意的底层组件
传递数据和方法
,实现
跨层组件通信
跨层传递普通数据
1. 顶层组件通过
provide函数提供
数据
2. 底层组件通过
inject函数获取
数据
![](https://i-blog.csdnimg.cn/blog_migrate/b0f8760e0729e3ac980dea5728352f78.png)
跨层传递响应式数据
在调用provide函数时,第二个参数设置为
ref对象
跨层传递方法
顶层组件可以向底层组件传递方法,
底层组件调用方法修改顶层组件中的数据
十一、Vue3.3新特性
1.defineOptions
背景说明:
有
<script setup>
之前,如果要定义 props, emits 可以轻而易举地添加一个与 setup 平级的属性。
但是用了
<script setup>
后,就没法这么干了 setup 属性已经没有了,自然无法添加与其平级的属性。
为了解决这一问题,引入了
defineProps
与
defineEmits
这两个宏。但这只解决了
props
与
emits
这两个属性。
如果我们要定义组件的 name 或其他自定义的属性,还是得回到最原始的用法——再添加一个普通的 <script> 标签。
这样就会存在两个 <script> 标签。让人无法接受。