一、分析工程结构
创建应用实例对象-app（类似于之前vue2中的vm，但app比vm更“轻”）
二、常用组合式API
1.setup
-
vue3中一个新的配置项，值为一个函数
-
组件中用到的：数据、方法，均要配置在setup中
-
setup函数的两种返回值
- 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用
- 若返回一个渲染函数，则可以自定义渲染内容
注意：
2.ref函数
需要引入，ref加工生成引用对象（ref对象），实现响应式
- ref函数处理基本类型
- ref函数处理对象类型
3.reactive函数
需要引入，只能定义对象类型或数组类型的响应式数据，不可以定义基本类型响应式数据
- 对象类型
- 数组类型
4.computed计算属性
- 简写
- 完整写法（读和写）
<template>
<h1>一个人的信息</h1>
姓：<input type="text" v-model="person.firstName"><br>
名：<input type="text" v-model="person.lastName">
<p>全名：{{ person.fullName }}</p>
<p>全名：<input type="text" v-model="person.fullName"></p>
</template>
<script>
import {computed, reactive} from 'vue'
export default {
name: 'App',
setup(){
let person = reactive({
firstName:'张',
lastName:'三'
})
// 计算属性-简写（没考虑计算属性被修改的情况）
// person.fullName = computed(()=>{
// // 函数体
// return person.firstName + person.lastName
// })
// 计算属性-完整写法（考虑读和写）
person.fullName = computed({
get(){
return person.firstName + '-' + person.lastName
},
set(value){
console.log(value);
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
// 返回一个对象
return{
person
}
}
}
</script>
<style>
</style>
5.watch监视属性
- 监视ref所定义的一个响应式数据
- 监视ref所定义的多个响应式数据
- 监视reactive定义的数据
- 整个对象
如果不需要oldValue，这种情况很常用
- 某个属性
- 某些属性
- 特殊情况
总结：
6.watchEffect函数
7.vue3生命周期
组合式API的生命周期优先级更高
8.自定义hook函数
可复用的自定义hook函数
9.toRef
- toRef
- toRefs
三、其他Composition API
1.shallowReactive与shallowRef
2.readonly与shallowReadonly
“压根不能改”和“能改但不响应式显示出来”不是一回事
3.toRaw与markRaw
- toRaw只能处理reactive生成的响应式对象
4.provide与inject
- 祖先组件
- 子组件
- 孙子组件
5.响应式数据的判断
四、组合式API的优势
1.Options API（配置API）存在的问题
2.Composition API（组合API）的优势
五、新的组件
1.Fragment
2.Teleport
<template>
<div>
<button @click="isShow = true">点我弹个窗</button>
<teleport to="body">
<div class="mask" v-if="isShow">
<div class="dialog" >
<h3>我是一个弹窗</h3>
<h4>内容</h4>
<h4>内容</h4>
<h4>内容</h4>
<h4>内容</h4>
<h4>内容</h4>
<h4>内容</h4>
<button @click="isShow = false">关闭弹窗</button>
</div>
</div>
</teleport>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
let isShow = ref(false)
return {
isShow
}
}
}
</script>
<style>
.mask{
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
}
.dialog {
position: absolute;
/* 水平垂直居中 */
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 300px;
background-color: green;
}
</style>
