首页 > 其他分享 >vue学习(一)

vue学习(一)

时间:2024-12-26 14:09:12浏览次数:4  
标签:vue 渲染 模版 DOM 学习 虚拟 组件

一、谈谈你对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

相关文章

  • 人工智能学习和就业的那些痛点:你也曾经历过吗?
    导语人工智能(AI)作为热门领域,吸引了众多学生投入学习,但在学习和就业过程中却面临诸多挑战:网上资料太多,不知道如何选择?安装环境被卡住,学习进度停滞?不清楚学习方向,浪费了大量时间?就业方向迷茫,不知道自己适合什么岗位?本文将深入探讨这些痛点,并提供解决思路,助您少走弯路......
  • 大数据学习之Redis 缓存数据库二,Scala分布式语言一
    一.Redis缓存数据库二26.Redis数据安全_AOF持久化机制27.Redis数据安全_企业中该如何选择持久化机制28.Redis集群_主从复制概念29.Redis集群_主从复制搭建30.Redis集群_主从复制原理剖析31.Redis集群_哨兵监控概述32.Redis集群_配置哨兵监控33......
  • 零基础自学人工智能路线规划(附快速学习路线图)
    每一波浪潮的到来,都意味一片无人占领的蓝海,也意味着众多新成长起来的巨头,还意味着什么?大量的技术人员需求,供不应求的开发市场,以及从业者的高薪与众多的机会。我们最常做的事情是目送着上一次浪潮的余波远去,感叹自己生不逢时,却没有意识到,下一波浪潮已经到了我们脚下。没错,......
  • 基本数据结构——算法学习(三)上
    数据结构——算法学习(三)上前言数据结构是计算机科学的基石,几乎所有的软件开发、算法设计都离不开对数据的组织与管理。它不仅是程序高效运行的保障,也是解决复杂问题的关键工具。学习数据结构的过程,不仅仅是掌握具体的知识点,更是培养逻辑思维能力和问题解决能力的重要途径。在......
  • 再战博客园美化(三)——Vue和Element UI
    新的技术终究是新的技术,不适合初学者直接使用既然一口气吃不成胖子,那不如从Vue和ElementUI这两个大名鼎鼎的库开始。其实也是因为我发现我原本套用的模板自带了这两个库的使用。我得说我这path是越来越臃肿了这是gpt的输出,gpt更胜一筹(好吧赛道都不一样,vue和elementui这么......
  • STM32 库函数的学习1
        初始化函数,结构体的定义。一直用,不过还真不知道是个结构体呢,所以对结构体这个用法不熟练呢,近期学习正点原子的视频了解到了。    h就是头文件函数库,结构就是:        #ifndef __LED_H__        #define__LED_H__//如果没有定义,下面就......
  • Vue.js组件开发-图片加载失败自动显示默认图片
    在Vue.js组件开发中,处理图片加载失败并自动显示默认图片可以通过Vue的指令和事件绑定来实现这一功能。示例:展示如何在图片加载失败时自动显示默认图片:<template><div><!--使用:src绑定图片的URL,并使用@error事件处理加载失败--><img:src="imageSrc......
  • Vue.js组件开发-使用vue-pdf显示PDF
    安装vue-pdf‌:首先,需要在Vue项目中安装vue-pdf。可以使用npm或yarn来安装。npminstallvue-pdf或者yarnaddvue-pdf‌在Vue组件中引入并使用vue-pdf‌:在Vue组件中引入vue-pdf,并使用<pdf>标签来展示PDF文件。<template><div><pdfsrc="path/to/local/pdf/f......
  • 开展深度学习项目所需要的数学基础|入门书籍·24-12-25
    小罗碎碎念深度学习作为一种复杂的机器学习方法,其核心在于构建和训练多层神经网络模型。为了深入理解和有效应用深度学习技术,掌握一定的数学基础是必不可少的。那么,**深度学习需要哪些数学基础呢?深度学习中的数学难点又在哪里?**这些问题常常困扰着初学者。在网络和书籍......
  • Java学习,文件写入
    Java中文件写入是一个常见的任务,可以使用java.io包中的类来实现这一点。需要注意,写入文件需要写入文件的权限,需要指定文件位置,绝对路径或相对路径来指定。使用FileWriter与BufferedWriter写入文件:importjava.io.BufferedWriter;importjava.io.FileWriter;importjava.io......