From ac403c029474bf35173fe61a37ba98c1abccd28d Mon Sep 17 00:00:00 2001 From: qiilee Date: Tue, 9 Jan 2024 09:06:44 +0800 Subject: [PATCH] =?UTF-8?q?Update:=20=E9=9D=A2=E8=AF=95=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 5 +++-- content/vue/vue.md | 34 ++++++++++++++++------------------ 2 files changed, 19 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 4fa094e..f94ac4f 100644 --- a/README.md +++ b/README.md @@ -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️⃣ ## 目录 @@ -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) \ No newline at end of file +- [程序员要有自己的云服务器](https://www.aliyun.com/minisite/goods?userCode=yc6paakd) +- [全网最全的影片电视剧搜索引擎](http://m.77998.store/app/index.html?id=test) \ No newline at end of file diff --git a/content/vue/vue.md b/content/vue/vue.md index 400026a..c532790 100644 --- a/content/vue/vue.md +++ b/content/vue/vue.md @@ -4313,29 +4313,27 @@ Vuex使用vue中的reactive方法将state设置为响应式，这样组件就可
211. 说说你对虚拟 DOM 的理解？ -思路 +**思路** 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，此时就