VUE3

为未捕获的错误提供一个全局的处理函数

errorHandler?:(err:unknow,instance:ComponentPublicInstance|null, info:string)=>void

三个参数分别是错误对象，触发错误的组件实例，支出错误来源信息的字符串（例如是从哪个生命周期抛出的）

为运行时警告指定一个自定义处理函数

warnHandler(msg:string, instance:ComponentPublicInstance|undefined, trcace:string)=>void

三个参数：警告信息、来源组件实例、组件追踪字符串

设置为true可以在浏览器开发工具的性能/时间线页面中启用对组件初始化、编译、渲染和修补的性能表现追踪。仅开发模式和支持performance.mark的浏览器中工作

运行时的编译选项。设置到此对象上的值会在浏览器进行模板编译时使用，会影响所有配置应用的组件。也可以通过compileroptions选项在每个组件上付给这些选项

注意这个选项只在完整构建版本，即在浏览器中编译模板的vuejs中使用。如果使用的是带构建的项目配置且仅含运行时的vue，那么编译器必须通过构建工具的相关配置传递给@vue/compiler-dom

app.config.compilerOptions.isCustomELement

app.config.compilerOptions.whitespace

app.config.compilerOptions.delimiters

app.config.compilerOptions.comments

用于注册能够被应用中所有组件实例访问的全局属性对象

globalProperties：Record<string, any>

如果全局属性和组件自己属性有冲突，则组件自己的属性优先级更高

用于定义自定义组件选项合并策略的对象

optionMergeStrategies：Record<string, OptionMergeFunction>

OptionMergeFunction = (to:unknown, from:unknown)=>any

用于多个mixin合并时的策略，合并策略函数接受附实例和子实例上定义的该选项额值作为第一个和第二个参数

watchEffect(async (onCleanup) => {
  const { response, cancel } = doAsyncWork(id.value)
  // `cancel` 会在 `id` 更改时调用
  // 以便取消之前
  // 未完成的请求
  onCleanup(cancel)
  data.value = await response
})

const stop = watchEffect(() => {})

// 当不再需要此侦听器时:
stop()

默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。

如果想在侦听器回调中能访问被 Vue 更新之后的DOM，你需要指明 flush: 'post' 选项

// 侦听单个来源
function watch<T>(
  source: WatchSource<T>,
  callback: WatchCallback<T>,
  options?: WatchOptions
): StopHandle

// 侦听多个来源
function watch<T>(
  sources: WatchSource<T>[],
  callback: WatchCallback<T[]>,
  options?: WatchOptions
): StopHandle

type WatchCallback<T> = (
  value: T,
  oldValue: T,
  onCleanup: (cleanupFn: () => void) => void
) => void

type WatchSource<T> =
  | Ref<T> // ref
  | (() => T) // getter
  | T extends object
  ? T
  : never // 响应式对象

interface WatchOptions extends WatchEffectOptions {
  immediate?: boolean // 默认：false
  deep?: boolean // 默认：false
  flush?: 'pre' | 'post' | 'sync' // 默认：'pre'
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
}

immediate

deep如果源是对象，强制深度遍历，一遍在深层级变更时触发回调，默认false

flush 调整回调函数的刷新时机

ontrack onTrigger 调试侦听器的依赖

val = isRef(val)?val.value:val

所有同步子组件都被挂载

自身DOM树已经创建完成并插入了父容器中。

这个钩子在服务器端渲染期间不会被调用

左右子组件都已经被卸载

所有相关的响应式作用都已经停止

返回false可以阻止错误向上传递

1. 组件渲染

2、 事件处理器

3. 生命周期钩子

4. setup函数

5. 侦听器

6. 自定义指令钩子

7. 过度钩子

1. 默认情况下，所有错误都会被发送到应用级的app.config.errorHandler,这样错误都能在一个同一的地方报告给分析服务

2. 如果组件的继承链或组件链上存在多个errprCapture钩子，对于同一个错误，这些钩子会被按从底至上的顺序一一调用。这个过程被称为向上传递

3. 如果errorCapture钩子本身抛出错误，这个错误和原来的错误都会被发送到app.config.errorHandler

4. errprCapture可以返回false来阻止向上传递

使用字符串数组

使用对象的完整形式，key对应props名称，值对应具有的类型的构造函数或者其他选项

type

defalut

boolean

validator

immediate

deep

flush

onTrack/onTrigger

1.字符串数组

2.对象的完整形式，key是事件的名称，value是null或者验证函数，验证函数会接收到传递给组件的￥emit调用的额外参数，返回boolean

1.字符串数组

2.一个对象

.stop

.prevent

.capture

.self

.once

.left

.right

.middle

.passive

.{keuyAlias}

.camel

.prop

.attr

.lazy

.number

.trim

@before-enter

@before-leave

@enter

@leave

@after-enter

@after-leave

@after-appear

@enter-cancelled

@leave-cancelled

@appear-cancelled

需要缓存的组件名称数组

不需要缓存的组件名称数组

最大缓存数

string|HTMLElemet

@resolve

@pending

@fallback

#default

#fallback

string，决定渲染成什么组件

如果处于scoped样式中的样式想要做深度的选择，想要影响到子组件可以使用:deep这个伪类

默认作用域样式不会影响插槽中的内容

使用:slotted伪类明确的将插槽内容作为选择器目标

：global

import { mergeProps } from 'vue'

const one = {
  class: 'foo',
  onClick: handlerA
}

const two = {
  class: { bar: true },
  onClick: handlerB
}

const merged = mergeProps(one, two)
/**
 {
   class: 'foo bar',
   onClick: [handlerA, handlerB]
 }
 */

cloneVNode(original,{id:'foo'})

import { PropType } from 'vue'

interface Book {
  title: string
  author: string
  year: number
}

export default {
  props: {
    book: {
      // 提供一个比 `Object` 更具体的类型
      type: Object as PropType<Book>,
      required: true
    }
  }
}

import axios from 'axios'

declare module 'vue' {
  interface ComponentCustomProperties {
    $http: typeof axios
    $translate: (key: string) => string
  }
}

import { Route } from 'vue-router'

declare module 'vue' {
  interface ComponentCustomOptions {
    beforeRouteEnter?(to: any, from: any, next: () => void): void
  }
}

// 现在即使没有在组件选项上定义过 hello 这个 prop 也依然能通过类型检查了
<MyComponent hello="world" />

<div style={ { '--bg-color': 'blue' } }>

<div :style="{ '--bg-color': 'blue' }">