Merge pull request #208 from vuejs-translations/185a5f33

docs: update template refs render function

* docs: update template refs render function

* chore: remove sample

* Update src/guide/extras/render-function.md

resolved conversation

Co-authored-by: Natalia Tepluhina <[email protected]>

---------

Co-authored-by: Natalia Tepluhina <[email protected]> (#207)

src/api/component-instance.md

@@ -42,7 +42,7 @@
 
   ```ts
   interface ComponentPublicInstance {
-    $el: Node | undefined
+    $el: any
   }
   ```
 

src/api/options-lifecycle.md

@@ -209,6 +209,12 @@
 
   - يمكن لخطاف `()errorCaptured` أن يرجع `false` لمنع الخطأ من الانتشار أكثر. هذا يعني بشكل أساسي "تم التعامل مع هذا الخطأ ويجب تجاهله." سيمنع أي خطافات `()errorCaptured` إضافية أو `app.config.errorHandler` من الاستدعاء لهذا الخطأ.
 
+  **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.
+
+  - <sup class="vt-badge" data-text="SSR only"></sup> Replacing errored child component in parent component deep inside `<Suspense>` 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 <sup class="vt-badge dev-only" /> {#rendertracked}
 
 يستدعى عندما يتم تتبع اعتمادية تفاعلية بواسطة تأثير تصيير المكون.

src/guide/extras/render-function.md

@@ -676,6 +676,21 @@ export default {
 }
 ```
 
+or (with version >= 3.5)
+
+```js
+import { h, useTemplateRef } from 'vue'
+
+export default {
+  setup() {
+    const divEl = useTemplateRef('my-div')
+
+    // <div ref="divEl">
+    return () => h('div', { ref: 'my-div' })
+  }
+}
+```
+
 </div>
 <div class="options-api">