每天学习一点前端知识-VUE（一）

1.谈谈对Vue的理解

• vue是一个渐进式的框架，专注于构建用户界面（何为渐进式：逐步集成，可以根据需要集成功能，Vuex、vue-router、axios） （渐进式：逐级递增的意思。声明式渲染 => 组件系统 => 客户端路由 => 大规模状态管理 => 构建工具， 需要什么功能就在基础上增加）

• 遵循mvvm模式 但也不是完全遵循 vue中可以使用ref直接获取dom (ref 用于注册元素或子组件的引用。 使用选项式 API，引用将被注册在组件的 this.$refs 对象里：

<!-- 存储为 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>)

• 声明式渲染（声明式和命令式的区别）

• 使用了虚拟Dom（可以做一个缓存）和diff算法 （虚拟dom的作用：实现跨平台以及对真实dom的操作，优化性能） Vue的渲染核心就是调用render方法，将虚拟dom渲染成真实dom

• 采用组件化开发的方式，提高复用性（组件化更新，单项数据流）

• 区分编译时（模板变render函数）和运行时（render函数） 资料：Vue运行时编译时_vue 运行时编译-CSDN博客

• 编译时：

        模板解析：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方法）

参考资料：https://www.jb51.net/javascript/2847721x4.htm