Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
  • Loading branch information
jasonren0403 committed Jul 9, 2023
1 parent eaa66a7 commit ea219e1
Showing 1 changed file with 1 addition and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_m

Vue 和其他一些框架一样,使用一个虚拟 DOM(VDOM)来管理元素。这意味着 Vue 在内存中保留了我们应用程序中所有节点的表示。任何更新首先在内存中的节点上执行,然后所有需要对页面上的实际节点进行的更改都会被批量同步。

由于读写实际的 DOM 节点通常比虚拟节点更昂贵,这可以带来更好的性能。然而,这也意味着在使用框架时,你往往不应该直接通过本地浏览器 API(如 [`Document.getElementById`](/zh-CN/docs/Web/API/Document/getElementById))来编辑你的 HTML 元素,因为这会导致 VDOM 和真实 DOM 不同步。
由于读写实际的 DOM 节点通常比虚拟节点开销更大,虚拟 DOM 可以带来更好的性能。然而,这也意味着在使用框架时,你往往不应该直接通过本地浏览器 API(如 [`Document.getElementById`](/zh-CN/docs/Web/API/Document/getElementById))来编辑你的 HTML 元素,因为这会导致 VDOM 和真实 DOM 不同步。

相反,如果你需要访问底层 DOM 节点(比如设置焦点时),你可以使用 [Vue 模板引用](https://cn.vuejs.org/guide/essentials/template-refs.html)。对于自定义的 Vue 组件,你也可以使用 refs 来直接访问子组件的内部结构,然而这样做应该是谨慎的,因为这会使代码更难推理和理解。

Expand Down

0 comments on commit ea219e1

Please sign in to comment.