1. vue3 中的app实例对象，
app.mount()
只能调用一次
2. app.provide()方法
// 全局app对象
app.provide("key值" , "value值")
// 在其他组件中使用：
import { inject } from 'vue'
export default {
setup() {
console.log(inject('key值')）
}
}
3. app.component()
// 注册一个全局组件
app.component('组件名称', { /* ... */ })
// 获取一个全局组件
app.component("组件名称")
4. app.directive()
// 自定义全局指令
// 方式1 对象形式
app.directive('指令名称', { /* 自定义指令钩子 */ })
// 方式2 函数形式
app.directive('指令名称', () => { /* ... */ })
// 获取一个全局指令
app.directive("指令名称")
5. app.use()
使用一个插件
import 插件 from "某一个文件或位置"
app.use(插件)
如何制作一个插件： 插件制作
6. app.config
整个Vue3应用程序实例对象app暴露的一个config对象， 里面有很多的配置属性
app.config.errorHandler
app 运行时 错误捕获处理函数
app.config.warnHandler
app 运行时 警告捕获处理函数
app.config.performance = true
开发模式下， 在浏览器 监测组件 加载 渲染定性能
app.config.compilerOptions
运行时 编译器的 配置选项
app.config.globalPropertied
app全局实例对象属性配置
app.config.optionMergeStrategied ---> obj
自定义组件选项的合并策略
7. setup(props , context) 注意事项
- setup 函数内 不存在 this
- 可以在选项式API中访问组合式API暴露的值， 反反过来不行
- setup函数的第一个参数是 props
注意： 响应式对象 中的 属性， 并非响应式
可通过如下方式， 将属性也变成响应式：
import { toRefs, toRef } from 'vue'
// 将 `响应式对象` 转为一个其中全是 ref 的对象，然后解构
const { 某个属性 } = toRefs(响应式对象)
// 或者，将 `响应式对象` 的单个属性转为一个 ref
const 某个属性 = toRef(响应式对象, 'title')
属性 props 同理
- setup函数的第二个参数 是一个 setup上下文对象
export default {
setup(props, context) {
// 该上下文对象 context 是 非响应式的
// 透传 Attributes（非响应式的对象，等价于 $attrs）
console.log(context.attrs)
// 插槽（非响应式的对象，等价于 $slots）
console.log(context.slots)
// 触发事件（函数，等价于 $emit）
console.log(context.emit)
// 暴露公共属性（函数）
// 也就是说可以只暴露部分数据给 父组件的 引用
console.log(context.expose)
context.expose({
a,
b
})
}
}
- setup 函数最后也可以不返回数据， 而返回一个渲染函数
import {h} from "vue"
.....
setup(){
........
return () => h('div', count.value)
}
8. ref() 函数
- ref(基本类型 比如6) ---> {value: 6}
- ref(引用类型 比如{...}) ----> 内部将 调用 reactive({...})
9. reactive()
深层次的响应式， 若想要避免 深层次的 响应式转换， 可使用 shallowReactive()
10. readonly()
将数据变成只读的 不可修改
11. watch() 和 watchEffect()
可参考我的另一篇教程 # vue3 知识点 和 对比 部分总结， 更新中。。。。。
12. isRef() unRef() toRef() toRefs() isProxy() isReactive() isReadonly()
这些就是工具函数 看名称应该能知道是什么意思的
