diff --git a/src/api/custom-renderer.md b/src/api/custom-renderer.md index 6303ea14d5..13989293d4 100644 --- a/src/api/custom-renderer.md +++ b/src/api/custom-renderer.md @@ -22,24 +22,16 @@ Creates a custom renderer. By providing platform-specific node creation and mani key: string, prevValue: any, nextValue: any, - // the rest is unused for most custom renderers - isSVG?: boolean, - prevChildren?: VNode[], + namespace?: ElementNamespace, parentComponent?: ComponentInternalInstance | null, - parentSuspense?: SuspenseBoundary | null, - unmountChildren?: UnmountChildrenFn - ): void - insert( - el: HostNode, - parent: HostElement, - anchor?: HostNode | null ): void + insert(el: HostNode, parent: HostElement, anchor?: HostNode | null): void remove(el: HostNode): void createElement( type: string, - isSVG?: boolean, + namespace?: ElementNamespace, isCustomizedBuiltIn?: string, - vnodeProps?: (VNodeProps & { [key: string]: any }) | null + vnodeProps?: (VNodeProps & { [key: string]: any }) | null, ): HostElement createText(text: string): HostNode createComment(text: string): HostNode @@ -47,8 +39,6 @@ Creates a custom renderer. By providing platform-specific node creation and mani setElementText(node: HostElement, text: string): void parentNode(node: HostNode): HostElement | null nextSibling(node: HostNode): HostNode | null - - // optional, DOM-specific querySelector?(selector: string): HostElement | null setScopeId?(el: HostElement, id: string): void cloneNode?(node: HostNode): HostNode @@ -56,7 +46,9 @@ Creates a custom renderer. By providing platform-specific node creation and mani content: string, parent: HostElement, anchor: HostNode | null, - isSVG: boolean + namespace: ElementNamespace, + start?: HostNode | null, + end?: HostNode | null, ): [HostNode, HostNode] } ``` diff --git a/src/api/options-lifecycle.md b/src/api/options-lifecycle.md index bc3b92fd97..a63c304733 100644 --- a/src/api/options-lifecycle.md +++ b/src/api/options-lifecycle.md @@ -215,6 +215,12 @@ Called when an error propagating from a descendant component has been captured. - An `errorCaptured` hook can return `false` to prevent the error from propagating further. This is essentially saying "this error has been handled and should be ignored." It will prevent any additional `errorCaptured` hooks or `app.config.errorHandler` from being invoked for this error. + **Error Capturing Caveats** + + - In components with async `setup()` function (with top-level `await`) Vue **will always** try to render component template, even if `setup()` throwed error. This will likely cause more errors because during render component's template might try to access non-existing properties of failed `setup()` context. When capturing errors in such components, be ready to handle errors from both failed async `setup()` (they will always come first) and failed render process. + + - Replacing errored child component in parent component deep inside `` will cause hydration mismatches in SSR. Instead, try to separate logic that can possibly throw from child `setup()` into separate function and execute it in the parent component's `setup()`, where you can safely `try/catch` the execution process and make replacement if needed before rendering the actual child component. + ## renderTracked {#rendertracked} Called when a reactive dependency has been tracked by the component's render effect. diff --git a/src/api/options-state.md b/src/api/options-state.md index b975a50f54..4aa176a250 100644 --- a/src/api/options-state.md +++ b/src/api/options-state.md @@ -93,7 +93,7 @@ Declare the props of a component. - **`required`**: Defines if the prop is required. In a non-production environment, a console warning will be thrown if this value is truthy and the prop is not passed. - - **`validator`**: Custom validator function that takes the prop value as the sole argument. In development mode, a console warning will be thrown if this function returns a falsy value (i.e. the validation fails). + - **`validator`**: Custom validator function that takes the prop value and props object as arguments. In development mode, a console warning will be thrown if this function returns a falsy value (i.e. the validation fails). - **Example** diff --git a/src/guide/essentials/component-basics.md b/src/guide/essentials/component-basics.md index a7342e7898..651a5f8d9c 100644 --- a/src/guide/essentials/component-basics.md +++ b/src/guide/essentials/component-basics.md @@ -468,7 +468,7 @@ Something bad happened. This can be achieved using Vue's custom `` element: -```vue{4} +```vue{5}