​ 1.谈谈对Vue的理解

<!-- 存储为 this.$refs.p -->
<p ref="p">hello</p>

使用组合式 API,引用将存储在与名字匹配的 ref 里:

<script setup>
import { ref } from 'vue'
const p = ref()
</script>
<template>
<p ref="p">hello</p>
</template>)

        模板解析:Vue编译器会解析Vue组件中的模板,识别其中的指令、插值、事件处理等内容。

        AST生成:模板解析完成后,Vue会将解析得到的内容转换为抽象语法树(AST),这个过程将模板转化为一种更容易处理的数据结构。

        静态分析:Vue会对AST进行静态分析,以确定模板中的哪些部分是静态的,可以被提前计算,从而进行性能优化。

        渲染函数生成:根据AST,Vue编译器生成渲染函数,这些渲染函数可以直接在运行时执行,用于动态地生成Virtual DOM。

        虚拟DOM生成:在运行时,Vue使用编译阶段生成的渲染函数(render函数)动态地生成虚拟DOM树。         

        响应式系统:Vue的响应式系统会跟踪数据的变化,并在数据发生变化时更新相关的虚拟DOM。

        虚拟DOM Diff算法:当数据发生变化时,Vue会使用虚拟DOM Diff算法比较新旧虚拟DOM树的差异,并将差异更新到实际的DOM上,以最小化DOM操作。

        组件生命周期:Vue会在适当的时机触发组件的生命周期钩子函数,如创建、挂载、更新和销毁等。

        事件处理:Vue会处理用户的交互事件,如点击、输入等,并触发相应的事件处理函数。

突然想到性能的一个东西:

重绘:当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,叫做重绘

重排:当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排

2.spa的理解 spa 只有一个Html页面 提供一个挂载点 (页面的渲染全部是由js动态进行渲染的)

页面切换时通过监听路由变化,渲染对应的页面 (客户端渲染 CSR client side render)

客户端渲染 CSR

单页应用 页面切换不需要重复引入资源 存在首页白屏现象(首屏加载时间过长) 对seo不友好 mpa

多页应用 每个页面必须重新加载js、css等资源 页面切换需要整页资源刷新 (服务端渲染 SSR server side render)

优缺点: Spa 一个主页面和页面组件 局部刷新 SEO搜索优化无法完成 页面切换速度快 维护容易

Mpa 多个完整的页面 整页刷新 可以进行SEO优化 页面切换需要重新加载资源,速度慢 维护复杂 解决方法: spa (首屏使用服务端渲染的方式,后续交互使用客户端渲染)

优化资料:【Vue面试题七】、SPA (单页面) 首屏加载速度慢怎么解决?_前端页面首屏加载慢-CSDN博客

3.虚拟DOM 是js对象 是对真实DOM的抽象 将性能低的对dom的操作转化为对对象的操作 并且使用diff算法进行优化 支持跨平台 减少对真实dom的操作(性能)

Vom的生成:template模板被编译器编译为渲染函数(render), render被调用生成虚拟dom,虚拟dom在后续的patch过程中转化为真实Dom

Vdom如何diff 第一次挂载结束后记录Vdom -- oldVnode 组件重新render时生成新的VDom -- newVnode oldVnode与newVnode进行diff算法(后续详情学习)

4.对组件化的理解 组件化的核心组成:模板 属性 事件 插槽 生命周期

好处:高内聚 可重用 可组合 提高开发效率、测试性、复用性 降低更新范围,自渲染变化的组件

5.computed和watcher的区别 (渲染watcher、计算属性watcher、用户watcher)

(渲染effect、计算属性effect、用户effect)

本质上都是watcher\effect

computed:具有缓存特性(dirty=true),不支持异步,懒计算

watcher: 用于监控值的变化,调用回调函数(vue3中提供了onCleanup方法)