Skip to content

Commit

Permalink
Update: 面试题
Browse files Browse the repository at this point in the history
  • Loading branch information
qiilee committed Jan 9, 2024
1 parent 33824e2 commit ac403c0
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 20 deletions.
5 changes: 3 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
-->

🚀 欢迎`Star`与分享,后续会不断更新。[gitee版本阅读更流畅,点击阅读](https://gitee.com/qiilee/web-interview)
🇨🇳 最后更新日期:2️⃣0️⃣2️⃣3️⃣`/`0️⃣9️⃣`/`0️⃣7️⃣
🇨🇳 最后更新日期:2️⃣0️⃣2️⃣4️⃣`/`0️⃣1️⃣`/`0️⃣9️⃣


## 目录
Expand Down Expand Up @@ -211,4 +211,5 @@
- [程序员考公指南](https://github.com/coder2gwy/coder2gwy)
- [开源项目挣钱实用手册](https://github.com/wizicer/FinancialSupportForOpenSource)
- [程序员如何优雅的挣零花钱](https://github.com/easychen/howto-make-more-money)
- [程序员要有自己的云服务器](https://www.aliyun.com/minisite/goods?userCode=yc6paakd)
- [程序员要有自己的云服务器](https://www.aliyun.com/minisite/goods?userCode=yc6paakd)
- [全网最全的影片电视剧搜索引擎](http://m.77998.store/app/index.html?id=test)
34 changes: 16 additions & 18 deletions content/vue/vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -4313,29 +4313,27 @@ Vuex使用vue中的reactive方法将state设置为响应式,这样组件就可

<b><details><summary>211. 说说你对虚拟 DOM 的理解?</summary></b>

思路
**思路**
1. vdom是什么
2. 引入vdom的好处
3. vdom如何生成,又如何成为dom
4. 在后续的diff中的作用
回答范例
1. 虚拟dom顾名思义就是虚拟的dom对象,它本身就是一个 JavaScript 对象,只不过它是通过不同的属性去
描述一个视图结构。

**回答范例**

1. 概念:虚拟dom顾名思义就是虚拟的dom对象,它本身就是一个JavaScript对象,只不过它是通过不同的属性去描述一个视图结构,相比于真实dom只保留了核心属性,进而使后续操作更加快速;

2. 通过引入vdom我们可以获得如下好处:
将真实元素节点抽象成 VNode,有效减少直接操作 dom 次数,从而提高程序性能
直接操作 dom 是有限制的,比如:diff、clone 等操作,一个真实元素上有许多的内容,如果直接对其
进行 diff 操作,会去额外 diff 一些没有必要的内容;同样的,如果需要进行 clone 那么需要将其全部内
容进行复制,这也是没必要的。但是,如果将这些操作转移到 JavaScript 对象上,那么就会变得简单
了。
操作 dom 是比较昂贵的操作,频繁的dom操作容易引起⻚面的重绘和回流,但是通过抽象 VNode 进行
中间处理,可以有效减少直接操作dom的次数,从而减少⻚面重绘和回流。
方便实现跨平台
同一 VNode 节点可以渲染成不同平台上的对应的内容,比如:渲染在浏览器是 dom 元素节点,渲染在
Native( iOS、Android) 变为对应的控件、可以实现 SSR 、渲染到 WebGL 中等等
Vue3 中允许开发者基于 VNode 实现自定义渲染器(renderer),以便于针对不同平台进行渲染。
3. vdom如何生成?在vue中我们常常会为组件编写模板 - template, 这个模板会被编译器 - compiler编译为渲
染函数,在接下来的挂载(mount)过程中会调用render函数,返回的对象就是虚拟dom。但它们还不是真
正的dom,所以会在后续的patch过程中进一步转化为dom。
- 将真实元素节点抽象成VNode,有效减少直接操作dom次数,从而提高程序性能;
- 直接操作 dom是有限制的,比如:diff、clone等操作,一个真实元素上有许多的内容,如果直接对其进行diff操作,会去额外diff一些没有必要的内容;同样的,如果需要进行clone,那么需要将其全部内容进行复制,这也是没必要的。但是,如果将这些操作转移到JavaScript 对象上,那么就会变得简单了;
- 操作 dom 是比较昂贵的,频繁的dom操作容易引起页面的重绘和回流,但是通过抽象VNode进行中间处理,可以有效减少直接操作dom的次数,从而减少页面重绘和回流;
- 方便实现跨平台
- 同一VNode节点可以渲染成不同平台上的对应的内容,比如:渲染在浏览器是dom元素节点,渲染在Native(iOS、Android)变为对应的控件、可以实现SSR(服务端渲染)、渲染到WebGL中等等;
- Vue3中允许开发者基于VNode实现自定义渲染器(renderer),以便于针对不同平台进行渲染;

3. dom如何生成,又如何成为真实dom?以及在diff中的作用

- 在vue中我们常常会为组件编写模板template,这个模板会被编译器compiler编译为渲染函数(render function),在接下来的挂载(mount)过程中会调用render函数,返回的对象就是虚拟dom。但它们还不是真正的dom,会在后续的patch过程中进一步转化为真实dom:
![vue_007](../../images/vue_007.jpg)

4. 挂载过程结束后,vue程序进入更新流程。如果某些响应式数据发生变化,将会引起组件重新render,此时就
Expand Down

0 comments on commit ac403c0

Please sign in to comment.