vue3组合式API
组合式API
介绍
介绍：什么是组合式API，组合式API的特点
Vue3提供两种组织代码逻辑的写法：
-
通过data、methods、watch 等配置选项组织代码逻辑是
选项式API写法 -
所有逻辑在setup函数中，使用 ref、watch 等函数组织代码是
组合式API写法 -
在setup中通过vue提供的函数组织代码实现功能，就是组合式API写法。
-
组合式API有什么好处？可复用，可维护
-
ref 是不是一个组合式API？是
setup函数
setup函数是组合式API的入口函数
setup函数是Vue3特有的选项，作为组合式API的起点- 从组件生命周期看，它在
beforeCreate之前执行 - 函数中
this不是组件实例，是undefined - 如果数据或者函数在模板中使用，需要在
setup返回
基本结构:
比较麻烦,写模板,然后用setup(),再继续再setup里面return数据才能调用
import { ref } from 'vue'
总结：
- 今后在vue3的项目中几乎用不到
this, 所有的东西通过函数获取。
reactive函数
通常使用它定义 对象类型 响应式数据
- reactive主要是来定义复杂类型数据
- 比较少用
使用步骤：
- 从
vue中导出reactive函数 - 在
setup函数中，使用reactive函数，传入一个普通对象，返回一个响应式数据对象 - 最后
setup函数返回一个对象，包含该响应式对象即可，模板中可使用
ref：name is {{ person1.name }} age is {{ person1.age }}
reactive：province is {{ address.province }} city is {{ address.city }}
总结：
reactive函数通常定义：复杂类型的响应式数据- 可以转换简单数据吗？不能
ref函数
通常使用它定义响应式数据，不限类型
使用步骤：
- 从
vue中导出ref函数 - 在
setup函数中，使用ref函数，传入普通数据（简单or复杂），返回一个响应式数据 - 最后
setup函数返回一个对象，包含该响应式数据即可 - 注意：使用
ref创建的数据，js中需要.value，template中可省略
总结：
ref可以把简单数据或者复杂数据转换成响应式数据，注意使用加上.value，不过模板可省略。- 疑问：定义响应式数据使用
ref还是reactive呢？
reactive 与 ref 的选择
知道：在定义响应式数据的时候如何选择reactive和ref
开始分析：
-
reactive可以转换对象成为响应式数据对象，但是不支持简单数据类型。 -
ref可以转换简单数据类型为响应式数据对象，也支持复杂数据类型，但是操作的时候需要.value。 -
它们各有特点，现在也没有最佳实践，没有明显的界限，所有大家可以自由选择。
- ref：既可以定义简单类型数据、也可以定义复杂类型数据，但是它在js中访问模型数据的时候，要加一个.value
- reactive：只能定义复杂类型数据，在js中访问模型数据的时候，不需要加.value（因为它没有）
* - ref这个用得很多，因为它不仅仅可以用于定义模型数据（简单、复杂）还可以操作dom，等等之类
推荐用法：
- 如果能确定数据是对象且字段名称也确定，可使用
reactive转成响应式数据，其他一概使用ref。这样就没有 心智负担 。
参考代码：
// 1. 明确表单对象有两个字段
const form = reactive({
username: '',
password: ''
})
// 2. 后台返回的数据对象
const data = ref(null)
const res = await axios.get('/user/100')
data.value = res.data
总结：
- 在定义响应式数据的函数选择上，遵循：尽量使用
ref函数支持所有场景，确定字段的对象使用reactive可以省去.value。
setup语法糖
简化 setup 固定套路代码 ，让代码更简洁
经常使用
案例：
小结：
- 在
script setup中的顶层变量都可以在模板使用，数据，函数，组件。
computed函数
掌握：使用 computed 函数定义计算属性
大致步骤：
- 从
vue中导出computed函数 - 在
setup函数中，使用computed函数，传入一个函数，函数返回计算好的数据 - 最后
setup函数返回一个对象，包含该计算属性数据即可，然后模板内使用
落地代码：
分数：{{ scoreList }}
优秀：{{ betterList }}
总结：
- 使用
computed定义计算属性，场景：当需要依赖一个数据得到新的数据使用计算属性
watch函数
掌握：使用watch函数监听数据的变化
大致内容：
- 使用
watch监听响应式对象数据中的一个属性(复杂)，配置深度监听(常用) - 使用
watch监听，配置默认执行(
落地代码：
- 使用
watch监听响应式对象数据中的一个属性(复杂)，配置深度监听
count is {{ count }} name is {{ name }}
- 使用
watch监听，配置默认执行
{
// 开启深度监听
deep: true,
// 默认执行一次
immediate: true
}
总结：
watch(需要监听的数据,数据改变执行函数,配置对象)来进行数据的侦听- 数据：单个数据，多个数据，函数返回对象属性，属性复杂需要开启深度监听
- 配置对象：
deep深度监听immediate默认执行
生命周期函数
掌握：vue3的常用生命周期函数
使用步骤：
- 先从vue中导入以
on打头的生命周期钩子函数 - 在setup函数中调用生命周期函数并传入回调函数
- 生命周期钩子函数可以调用多次
具体内容：
- Vue3和vue2的生命周期对比
| 选项式API下的生命周期函数使用 | 组合式API下的生命周期函数使用 |
|---|---|
| beforeCreate | 不需要（直接写到setup函数中） |
| created | 不需要（直接写到setup函数中） |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroyed | onBeforeUnmount |
| destroyed | onUnmounted |
| activated | onActivated |
| deactivated | onDeactivated |
- 参考代码
生命周期函数
总结：
- 常用的
onMounted组件渲染完毕：发请求，操作dom，初始化图表…
ref获取DOM元素
元素上使用 ref属性关联响应式数据，获取DOM元素
步骤：
- 创建 ref =>
const hRef = ref(null) - 模板中建立关联 =>
我是标题
- 使用 =>
hRef.value
代码：
用户名:
注意：默认值是null，需要在渲染完毕后访问DOM属性。
ref操作组件-defineExpose
组件上使用 ref属性关联响应式数据，获取组件实例
步骤：
- 使用
我是Form组件
ref操作组件
总结：
- 配合
defineExpose暴露数据和方法，ref获取的组件实例才可以使用
父传子-defineProps函数
目标：能够实现组件通讯中的父传子组件通讯
父亲
father
儿子
son{{ name }}吃{{ foods }}
相关表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kVBSTBSa-1678379222427)(C:\Users\13193\AppData\Roaming\Typora\typora-user-images\image-20230309211031605.png)]
子传父-defineEmits函数
目标：能够实现组件通讯中的子传父组件通讯
父亲
<template> 父亲 <hr/> <Son @pay="getValue" /> </template> <script setup> // 导入子组件 import Son from './Son.vue' const getValue = val => { console.log('---parent---', val) } </script>儿子
<div class=""> 儿子 <hr /> <button @click="sendValue">传值给父组件</button> </div> <script setup> const emit = defineEmits(['pay']) const sendValue = () => { emit('pay', 50) } </script>案例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FCl4FqHI-1678379222428)(C:\Users\13193\AppData\Roaming\Typora\typora-user-images\image-20230309233840845.png)]
跨级组件通讯provide与inject函数
通过provide和inject函数可以简便的实现跨级组件通讯
接下来我们通过一个小案例，运用一下provide和inject函数
落地代码：
- 祖先组件：
App.vue
app 组件 {{ count }} updateCount- 父级组件：
ParentCom.vue
parent 组件
- 子级组件：
ChildCom.vue
child 组件 {{ count }}总结：
- provide和inject是解决跨级组件通讯的方案
- provide 提供后代组件需要依赖的数据或函数
- inject 注入（获取）provide提供的数据或函数
- 官方术语：依赖注入
- App是后代组件
依赖的数据和函数的提供者，Child是注入（获取）了App提供的依赖
- App是后代组件
保持响应式-toRefs函数
掌握：在使用reactive创建的响应式数据被展开或解构的时候使用toRefs保持响应式
大致步骤：
- 解构响应式数据，踩坑
- 使用
toRefs处理响应式数据，爬坑 toRefs函数的作用，与使用场景
落地代码：
- 基础案例
姓名：{{ user.name }}
年龄：{{ user.age }}
- 使用响应式数据，踩坑
姓名：{{ name }}
年龄：{{ age }}
- 使用
toRefs处理响应式数据，爬坑
import { reactive, toRefs } from "vue"; const user = reactive({ name: "tom", age: 18 }); const { name, age } = toRefs(user)toRefs函数的作用，与使用场景- 作用：把对象中的每一个属性做一次包装成为响应式数据
- 响应式数据展开的时候使用，解构响应式数据的时候使用
总结：
- 当去解构和展开响应式数据对象使用
toRefs保持响应式
第一天
项目准备
相关插件
vscode配置代码片段
"vue3": { "prefix": "vue3", "body": [ "", " ", "", "", "", "", "" ], "description": "vue3 Components" },拓展程序要6.5以上
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UQzbFyo2-1678379231188)(C:\Users\13193\AppData\Roaming\Typora\typora-user-images\image-20230309122102452.png)]
vite 创建项目
掌握：使用 vite 构建工具创建项目
- 运行创建项目命令：
# 使用npm npm create vite@latest # 使用yarn yarn create vite # 使用pnpm pnpm create vite-
输入项目名称，默认是 vite-project
如果出现下面的图，直接按y即可，然后再往下继续
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NL2w4VpS-1678379231189)(https://secure2.wostatic.cn/static/bjB728i7859nmcWihYhBZT/image.png?auth_key=1678335601-sR6CjWdJmRxTqGEgg5tpqu-0-69b44359e011967f55c8598e66715930)]
输入项目名称
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IdAhcK6f-1678379231190)(https://secure2.wostatic.cn/static/2ES75qZ6X1hVPNt85gFth2/image.png?auth_key=1678335601-rfa9j1Jz1xcq5gXGgUsS1L-0-6a85dafb27848d14dd5e4265b2c3e456)]
-
选择前端框架
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-84PDDplk-1678379231191)(https://secure2.wostatic.cn/static/hxdop1U6psbgotNgAXKAAn/image.png?auth_key=1678335601-uVf61zDfZL2cuRA54StxUT-0-b54e005c46c219ea0eeb31073b68e9bb)]
-
选择项目类型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AkkRX5c6-1678379231192)(https://secure2.wostatic.cn/static/3QcDfQ2E2FNgb3ZpNdyaB/image.png?auth_key=1678335601-4bNZmZg4RSCKzV8ru52t9W-0-b735f4110a475557daa6a393ed48e905)]
-
创建完毕
图示
-
进入项目目录，安装依赖，启动项目即可。
组合式API
介绍
介绍：什么是组合式API，组合式API的特点
Vue3提供两种组织代码逻辑的写法：
-
通过data、methods、watch 等配置选项组织代码逻辑是
选项式API写法 -
所有逻辑在setup函数中，使用 ref、watch 等函数组织代码是
组合式API写法 -
在setup中通过vue提供的函数组织代码实现功能，就是组合式API写法。
-
组合式API有什么好处？可复用，可维护
-
ref 是不是一个组合式API？是
setup函数
setup函数是组合式API的入口函数
setup函数是Vue3特有的选项，作为组合式API的起点- 从组件生命周期看，它在
beforeCreate之前执行 - 函数中
this不是组件实例，是undefined - 如果数据或者函数在模板中使用，需要在
setup返回
基本结构:
比较麻烦,写模板,然后用setup(),再继续再setup里面return数据才能调用
import { ref } from 'vue'总结：
- 今后在vue3的项目中几乎用不到
this, 所有的东西通过函数获取。
reactive函数
通常使用它定义 对象类型 响应式数据
- reactive主要是来定义复杂类型数据
- 比较少用
使用步骤：
- 从
vue中导出reactive函数 - 在
setup函数中，使用reactive函数，传入一个普通对象，返回一个响应式数据对象 - 最后
setup函数返回一个对象，包含该响应式对象即可，模板中可使用
ref：name is {{ person1.name }} age is {{ person1.age }}
reactive：province is {{ address.province }} city is {{ address.city }}
总结：
reactive函数通常定义：复杂类型的响应式数据- 可以转换简单数据吗？不能
ref函数
通常使用它定义响应式数据，不限类型
使用步骤：
- 从
vue中导出ref函数 - 在
setup函数中，使用ref函数，传入普通数据（简单or复杂），返回一个响应式数据 - 最后
setup函数返回一个对象，包含该响应式数据即可 - 注意：使用
ref创建的数据，js中需要.value，template中可省略
总结：
ref可以把简单数据或者复杂数据转换成响应式数据，注意使用加上.value，不过模板可省略。- 疑问：定义响应式数据使用
ref还是reactive呢？
reactive 与 ref 的选择
知道：在定义响应式数据的时候如何选择reactive和ref
开始分析：
-
reactive可以转换对象成为响应式数据对象，但是不支持简单数据类型。 -
ref可以转换简单数据类型为响应式数据对象，也支持复杂数据类型，但是操作的时候需要.value。 -
它们各有特点，现在也没有最佳实践，没有明显的界限，所有大家可以自由选择。
- ref：既可以定义简单类型数据、也可以定义复杂类型数据，但是它在js中访问模型数据的时候，要加一个.value
- reactive：只能定义复杂类型数据，在js中访问模型数据的时候，不需要加.value（因为它没有）
* - ref这个用得很多，因为它不仅仅可以用于定义模型数据（简单、复杂）还可以操作dom，等等之类
推荐用法：
- 如果能确定数据是对象且字段名称也确定，可使用
reactive转成响应式数据，其他一概使用ref。这样就没有 心智负担 。
参考代码：
// 1. 明确表单对象有两个字段 const form = reactive({ username: '', password: '' }) // 2. 后台返回的数据对象 const data = ref(null) const res = await axios.get('/user/100') data.value = res.data总结：
- 在定义响应式数据的函数选择上，遵循：尽量使用
ref函数支持所有场景，确定字段的对象使用reactive可以省去.value。
setup语法糖
简化 setup 固定套路代码 ，让代码更简洁
经常使用
案例：
小结：
- 在
script setup中的顶层变量都可以在模板使用，数据，函数，组件。
computed函数
掌握：使用 computed 函数定义计算属性
大致步骤：
- 从
vue中导出computed函数 - 在
setup函数中，使用computed函数，传入一个函数，函数返回计算好的数据 - 最后
setup函数返回一个对象，包含该计算属性数据即可，然后模板内使用
落地代码：
分数：{{ scoreList }}
优秀：{{ betterList }}
总结：
- 使用
computed定义计算属性，场景：当需要依赖一个数据得到新的数据使用计算属性
watch函数
掌握：使用watch函数监听数据的变化
大致内容：
- 使用
watch监听响应式对象数据中的一个属性(复杂)，配置深度监听(常用) - 使用
watch监听，配置默认执行(
落地代码：
- 使用
watch监听响应式对象数据中的一个属性(复杂)，配置深度监听
count is {{ count }} name is {{ name }}
- 使用
watch监听，配置默认执行
{ // 开启深度监听 deep: true, // 默认执行一次 immediate: true }总结：
watch(需要监听的数据,数据改变执行函数,配置对象)来进行数据的侦听- 数据：单个数据，多个数据，函数返回对象属性，属性复杂需要开启深度监听
- 配置对象：
deep深度监听immediate默认执行
生命周期函数
掌握：vue3的常用生命周期函数
使用步骤：
- 先从vue中导入以
on打头的生命周期钩子函数 - 在setup函数中调用生命周期函数并传入回调函数
- 生命周期钩子函数可以调用多次
具体内容：
- Vue3和vue2的生命周期对比
选项式API下的生命周期函数使用 组合式API下的生命周期函数使用 beforeCreate 不需要（直接写到setup函数中） created 不需要（直接写到setup函数中） beforeMount onBeforeMountmounted onMountedbeforeUpdate onBeforeUpdateupdated onUpdatedbeforeDestroyed onBeforeUnmountdestroyed onUnmountedactivated onActivateddeactivated onDeactivated- 参考代码
生命周期函数总结：
- 常用的
onMounted组件渲染完毕：发请求，操作dom，初始化图表…
ref获取DOM元素
元素上使用 ref属性关联响应式数据，获取DOM元素
步骤：
- 创建 ref =>
const hRef = ref(null) - 模板中建立关联 =>
我是标题
- 使用 =>
hRef.value
代码：
用户名:注意：默认值是null，需要在渲染完毕后访问DOM属性。
ref操作组件-defineExpose
组件上使用 ref属性关联响应式数据，获取组件实例
步骤：
- 使用
我是Form组件
ref操作组件
总结：
- 配合
defineExpose暴露数据和方法，ref获取的组件实例才可以使用
父传子-defineProps函数
目标：能够实现组件通讯中的父传子组件通讯
父亲
father
儿子
son{{ name }}吃{{ foods }}
相关表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WddTUX9E-1678379231194)(C:\Users\13193\AppData\Roaming\Typora\typora-user-images\image-20230309211031605.png)]
子传父-defineEmits函数
目标：能够实现组件通讯中的子传父组件通讯
父亲
<template> 父亲 <hr/> <Son @pay="getValue" /> </template> <script setup> // 导入子组件 import Son from './Son.vue' const getValue = val => { console.log('---parent---', val) } </script>儿子
<div class=""> 儿子 <hr /> <button @click="sendValue">传值给父组件</button> </div> <script setup> const emit = defineEmits(['pay']) const sendValue = () => { emit('pay', 50) } </script>案例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8zzrlEt5-1678379231194)(C:\Users\13193\AppData\Roaming\Typora\typora-user-images\image-20230309233840845.png)]
跨级组件通讯provide与inject函数
通过provide和inject函数可以简便的实现跨级组件通讯
接下来我们通过一个小案例，运用一下provide和inject函数
落地代码：
- 祖先组件：
App.vue
app 组件 {{ count }} updateCount- 父级组件：
ParentCom.vue
parent 组件
- 子级组件：
ChildCom.vue
child 组件 {{ count }}总结：
- provide和inject是解决跨级组件通讯的方案
- provide 提供后代组件需要依赖的数据或函数
- inject 注入（获取）provide提供的数据或函数
- 官方术语：依赖注入
- App是后代组件
依赖的数据和函数的提供者，Child是注入（获取）了App提供的依赖
- App是后代组件
保持响应式-toRefs函数
掌握：在使用reactive创建的响应式数据被展开或解构的时候使用toRefs保持响应式
大致步骤：
- 解构响应式数据，踩坑
- 使用
toRefs处理响应式数据，爬坑 toRefs函数的作用，与使用场景
落地代码：
- 基础案例
姓名：{{ user.name }}
年龄：{{ user.age }}
- 使用响应式数据，踩坑
姓名：{{ name }}
年龄：{{ age }}
- 使用
toRefs处理响应式数据，爬坑
import { reactive, toRefs } from "vue"; const user = reactive({ name: "tom", age: 18 }); const { name, age } = toRefs(user)toRefs函数的作用，与使用场景- 作用：把对象中的每一个属性做一次包装成为响应式数据
- 响应式数据展开的时候使用，解构响应式数据的时候使用
总结：
- 当去解构和展开响应式数据对象使用
toRefs保持响应式
- 配合
- 配合