# setup 选项
# setup 选项的写法和执行时机
# 语法
<script> | |
export default { | |
setup () { | |
}, | |
beforeCreate () { | |
} | |
} | |
</script> |
# 执行时机
# setup 选项写代码特点
# 原始复杂写法
<script> | |
export default { | |
setup () { | |
const message = "this is message" | |
const logMessage = () => { | |
console.log(message) | |
} | |
return { | |
message, | |
logMessage | |
} | |
}, | |
} | |
</script> |
# 语法糖写法
<script setup> | |
const message = 'this is message' | |
const logMessage = () => { | |
console.log(message) | |
} | |
</script> |
# 语法糖原理
# reactive 和 ref 函数
# reactive()
# 作用
接受对象类型数据的参数传入并返回一个响应式对象
# 核心步骤
<script setup> | |
import { reactive } from 'vue' | |
const state = reactive(对象类型数据) | |
</script> |
- 从 vue 中导入 reactive 函数
- 在
<script setup>中执行 reactive 函数并传入类型为对象的初始值，并使用变量接受返回值
# ref()
# 作用
接收简单类型或者对象类型的数据传入并返回一个响应式的对象
# 核心步骤
<script setup> | |
import { ref } from 'vue' | |
const count = ref(简单数据类型或复杂数据类型) | |
</script> |
- 从 vue 中导入 ref 函数
- 在
<script setup>中执行 ref 函数并传入初始值，使用变量接收 ref 函数的返回值
# computed
# computed 计算属性函数
# 核心步骤
- 导入 computed 函数
- 执行函数回调参数中 return 基于响应式数据做计算的值，用变量接收
<script setup> | |
import { computed } from 'vue' | |
const computedState = computed(() => { | |
return 基于响应式数据做计算后的值 | |
}) | |
</script> |
# watch
# 基础使用 - 监听单个数据
- 导入 watch 函数
- 执行 watch 函数传入要侦听的响应式数据 (ref 对象) 和回调函数
<script setup> | |
import { ref, watch } from 'vue' | |
const count = ref(0) | |
watch(count, (newValue, oldValue) => { | |
console.log(oldValue) | |
console.log(newValue) | |
}) | |
</script> |
# immediate
说明：在侦听器创建时立即触发回调，响应式数据变化之后继续执行回调
<script setup> | |
const count = ref(0) | |
watch(count, () => { | |
console.log('count发生了变化') | |
}, { | |
immediate: true | |
}) | |
</script> |
# 精确侦听对象的某个数据
再不开启 deep 的前提下，侦听 age 变化
<script setup> | |
const info = ref({ | |
name: 'cp', | |
age: 18 | |
}) | |
watch(() => info.value.age, () => console.log('age发生变化了')) | |
</script> |
# 声明周期函数
# Vue3 的生命周期 API（选项式 VS 组合式）
| 选项式 API | 组合式 API |
|---|---|
| beforeCreate/create | setup |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeUnmount | onBeforeUnmount |
| unmounted | onUnmounted |
# 父子通信
# 父传子
# 基本思想
- 父组件中给子组件绑定属性
- 子组件通过 props 选项接收
# defineProps 原理
# 子传父
# 基本思想
- 父组件中给子组件标签通过 @绑定事件
- 子组件内部通过 emit 方法触发事件
# 模板应用
# 模板引用的概念
通过 ref 标识 获取真实的 dom 对象或者组件实例对象
# 使用方法
<script setup> | |
import { ref } from 'vue' | |
const h1Ref = ref(null) | |
</script> | |
<template> | |
<h1 ref="h1Ref">我是 dom标签h1</h1> | |
</template> |
- 调用 ref 函数生成一个 ref 对象
- 通过 ref 标识绑定 ref 对象到标签
# defineExpose
默认情况下 <script setup> 语法糖下组件内部的属性和方法是不开放给父组件访问的
可以通过 defineExpose 编译宏指定哪些属性和方法允许访问
<script setup> | |
import { ref } from 'vue' | |
const testMessage = ref('this is test msg') | |
</script> |
<script setup> | |
import { ref } from 'vue' | |
const testMessage = ref('this is test msg') | |
defineExpose({ | |
testMessage | |
}) | |
</script> |
# provide 和 inject
# 作用场景
顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信
# 跨层传递普通数据
- 顶层组件通过 provide 函数提供数据
- 底层组件通过 inject 函数获取数据
# 顶层组件
<script setup> | |
provide('key', 顶层组件中的数据) | |
</script> |
# 底层组件
<script setup> | |
const message = inject('') | |
</script> |
