谈谈你对vue的理解

1.谈谈你对 vue 的理解 ？

官方： Vue是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层

声明式渲染（data，mathod），功能不够，大型项目需要拆分，提供了组件化功能，有提供了客户端路由的模式，需要通信，提供了状态管理（vuex，pinia），上线打包，提供了构建工具等..,渐进式框架，我们可以使用其中的部分功能，需要了再拿过来

1.1 声明式框架

令式和声明式的区别

• 早在 JQ 的时代编写的代码都是命令式的，命令式框架重要特点就是关注过程

• 声明式框架更加关注结果。命令式的代码封装到了 Vuejs 中，过程靠 vuejs 来实现

  声明式代码更加简单，不需要关注实现，按照要求填代码就可以 （给上原材料就出结果）

- 命令式编程：
let numbers = [1,2,3,4,5]
let total = 0
for(let i = 0; i < numbers.length; i++) {
  total += numbers[i] - 关注了过程
}
console.log(total)

- 声明式编程：
let total2 = numbers.reduce(function (memo,current) {
  return memo + current
},0)
console.log(total2)

1.2 MVVM 模式

1.2.1 MVC 模式

这是一个单向的过程

用户请求资源到控制层，控制层放一些业务逻辑，然后然后去掉 service 服务层通过 model 去查数据，渲染到页面 view 层

对于前端而言就是如何将数据同步到页面上，也是借鉴后端思想。

1.2.3 MVVM 模式 : 映射关系的简化 （隐藏 controller）

ViewModel ：自动监听 dom 变化，将数据更新到 Model 中，也可以把数据绑定到视图中，v-model

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。(可以通过 ref 更改数据)

1.3 采用虚拟 DOM

传统更新页面，拼接一个完整的字符串 innerHTML 全部重新渲染，添加虚拟 DOM 后，可以比较新旧虚拟节点，找到变化在进行更新。虚拟 DOM 就是一个对象，用来描述真实 DOM 的

最大的优势是什么

• 可以跨平台，对象是可以跨平台的
• 虚拟 dom 可以做缓存层，所有的修改都可以在虚拟 dom 层面【diff 算法】

https://github.com/vuejs/vue/blob/main/src/core/vdom/vnode.ts

tag?: string
data: VNodeData | undefined
children?: Array<VNode> | null
text?: string
elm: Node | undefined
ns?: string
context?: Component // rendered in this component's scope
key: string | number | undefined
componentOptions?: VNodeComponentOptions
componentInstance?: Component // component instance
parent: VNode | undefined | null // component placeholder node
// strictly internal
raw: boolean // contains raw HTML? (server only)
isStatic: boolean // hoisted static node
isRootInsert: boolean // necessary for enter transition check
isComment: boolean // empty comment placeholder?
isCloned: boolean // is a cloned node?
isOnce: boolean // is a v-once node?
asyncFactory?: Function // async component factory function
asyncMeta: Object | void
isAsyncPlaceholder: boolean
ssrContext?: Object | void
fnContext: Component | void // real context vm for functional nodes
fnOptions?: ComponentOptions | null // for SSR caching
devtoolsMeta?: Object | null // used to store functional render context for devtools
fnScopeId?: string | null // functional scope id support
isComponentRootElement?: boolean | null // for SSR directives

1.4 区分编译时(打包)和运行(浏览器)时

• Vue 的渲染核心就是调用渲染（render）方法将虚拟 DOM 渲染成真实 DOM （缺点就是虚拟 DOM 编写麻烦）
• 专门写个编译时可以将模板编译成虚拟 DOM （在构建的时候进行编译性能更高，不需要再运行的时候进行编译）

1.5 组件化

实现高内聚、低耦合、单向数据流

• 组件化开发能大幅提高应用开发效率、测试性、复用性等;
• 降低更新范围，只重新渲染变化的组件

模块化：针对的业务逻辑，逻辑上的封装和抽离。组件化是对 UI 的抽离

总结：

vue 声明式框架，里面借鉴了 mvvm 思想，有虚拟 dom，有编译，渲染的时候有组件化的特点，做一些拆分