一、谈谈你对vue的理解
1 jquery是命令式 vue是声明式框架
2. vue借鉴了mvvm的思想
3. vue采用虚拟DOM
传统更新页面,拼接一个完整的字符串innerHTML全部重新渲染。添加虚拟DOM后,可以比较新旧虚拟节点(diff算法),找到变化再进行更新。虚拟DOM就是一个对象,用来描述真实DOM的。
(虚拟DOM比实际DOM的内容会少, 虚拟DOM的一个强大优势是可以跨平台,所以vue可以在小程序上运行可以在app上运行)
4. vue区分编译时(打包)和运行(浏览器)时
vue的渲染核心就是调用渲染方法(render)将虚拟DOM渲染成真实DOM(缺点就是虚拟DOM编写麻烦)
专门写个编译时可以将模版编译成虚拟DOM(在构建到时候进行编译性能更高,不需要在运行的时间进行编译)
(因为虚拟DOM 在写的时候比较麻烦,难道每个DIV要写个对象吗?所以vue就想到了我能不能生成这样一个对象,vue采用了模版的方向,最终把一个模版生成一个新的DOM, 模版会编译成一个函数
,这个函数执行后会产生虚拟DOM。模版变函数性能肯定不高,所以vue想到了我可以专门去写两个东西,一个是专门负责编译的,把模版变成render函数,另一个是真正运行时候,运行时候我们去掉这个函数
来生成虚拟节点就好了。模版变成render函数应该在打包工具中做,这样它的性能浪费是比较少的,我们开启个webpack或者vite去做这件事。我们运行的时候就不用再把模版编译成函数了,所以性能就比较高了,所以
vue是区分编译时和运行时的)
5.组件化
可以提示代码质量,实现高内聚、低耦合、单项数据流
提高开发效率,快速复用组件
组件化更新:某个组件变化了,只更新这个组件就好了
二、对SPA的理解
1. SPA(single-page-application)单页应用。 默认情况下我们编写vue,react都只有一个html页面,并且提供一个挂载点,最终打包后会在此页面中引入对应的资源(页面的渲染全部是由js动态进行渲染的)。切换页面时
通过监听路由变化,渲染对应的页面Client Side Rendering, 客户端渲染CSR
(缺点是首屏加载速度慢)
2. MPA(multi-page-application) 多页应用,多个html页面。每个页面必须重复加载,js,css等相关资源。(服务端返回完整的html,同时数据也可以在后端进行获取一并返回“模版引擎”)。多页应用跳转需要整页资源刷新。
server side rendering,服务器端渲染ssr.(首页加载速度快)
spa优点:用户体验好、快、内容的改变不需要重新加载整个页面,服务端压力小
spa缺点:不利于搜索引擎的抓取;首次渲染速度相对较慢(第一次返回空的html,需要再次请求首屏数据),白屏时间长。
解决方案:
(1)静态页面预渲染(Static Site Generation)SSG, 在构建时生成完整的html页面(就是在打包的时候,先将页面放到浏览器中运行一下,将html保存起来),仅适合静态页面网站,变化率不高的网站
(2) SSR+CSR的方式,首屏采用服务端渲染的方式,后续交互采用客户端渲染方式 。如vue的Nuxt.js
三、 Vue为什么需要虚拟DOM?
1. 基本概念
基本上所有框架都引入了虚拟DOM来对真实DOM进行抽象,也就是现在大家所熟知的VNode和VDOM
Virtual Dom 就是用js对象来描述真实DOM,是对真实DOM的抽象,由于直接操作DOM性能低但是JS层的操作效率高,可以将DOM操作转化成对象操作,最终通过diff算法比对差异进行更新DOM(减少了对真实DOM的操作)
虚拟DOM不依赖真实平台环境从而也可以实现跨平台。
2. 补充: VDOM是如何生成的?
在vue中我们常常会为组件编写模版 -template
这个模版会被编译器编译为渲染函数 -render
接下来的挂载过程中会调用render函数,返回的对象就是虚拟dom
会在后续的patch过程中进一步转化为真实dom
3. VDOM如何做diff的
挂载过程结束后,会记录第一次生成的VDOM- oldVnode
当响应数据发生变化时,将会引起组件重新render,此时就会生成新的VDOM - newVnode
使用oldVnode与newVnode做diff操作,将更改的部分应用到真实DOM上,从而转换为最小量的dom操作,高效更新视图。
四、组件化的理解
webComponent组件化的核心组成:模版、属性、事件、插槽、生命周期
组件化是对UI的封装, 模块化是指对一块业务的封装
组件化好处:高内聚、可重用、可组合
组件化开发能大幅提高应用开发效率、测试性、复用性等;
降低更新范围,只重新渲染变化的组件;
补充:
vue中的每个组件都有一个渲染函数watcher(vue2中) 、 effect(vue3中)
数据是响应式的,数据变化后会执行watcher或者effect
组件要合理的划分,如果不拆分组件,那更新的时候整个页面都要重新更新
如果过分的拆分组件会导致watcher、effect产生过多也会造成性能浪费。
四、 问题:既然vue通过数据劫持可以精准探测数据变化,为什么还需要虚拟DOM进行diff检测差异?
答:vue内部设计原因导致,vue设计的是每个组件一个watcher(渲染watcher),没有采用一个属性对应一个watcher.这样会导致大量watcher的产生而且
浪费内存,如果粒度过低也无法精准检测变化。所以采用diff算法+组件级watcher.
https://www.bilibili.com/video/BV15ny6YoEDX/?spm_id_from=333.337.search-card.all.click&vd_source=2f48d4b1ea29a400179af6fd6b56a10d
标签:vue,渲染,模版,DOM,学习,虚拟,组件 From: https://www.cnblogs.com/yina-526/p/18622502