Vue整理

来源于前端框架体系思维导图

Vue使用

Vue原理

基本知识

1. 和使用相关联的原理，如vdom、模板渲染
2. 整体流程
3. 热门技术
4. 组件化
5. 响应式
6. vdom和diff
7. 渲染过程
8. 前端路由

如何理解MVVM

1. 组件化基础
2. 传统组件
3. 只静态渲染，更新还要依赖于操作D OM(不好维护)
4. 数据驱动视图
5. view
6. ViewModel
7. Model

监听data变化的核心API是什么

1. 响应式
2. 组件data的数据一旦变化，立刻触发视图的更新
3. 实现数据驱动视图的第一步
4. 核心API Object. defineProperty
5. 如何实现响应式
6. 监听对象，监听数组
7. 复杂对象，深度监听
8. 几个缺点
9. Vue3启用Proxy
10. 有兼容性问题，且无法polyfill

如何深度监听data变化

1. 深度监听，需要递归到底，一次性计算量大
2. 无法监听新增属性／删除属性（Vue. set Vue. delete)

如何监听数组变化

1. 可以使用watch或者watchEffect监听数组的变化。在watch或者watchEffect中访问数组时，Vue会自动追踪数组的变化并触发相应的回调函数。

虚拟DOM

1. vdom是实现vue和React的重要基石
2. diff算法是vdom中最核心、最关键的部分
3. 用js模拟D OM结构
4. tag
5. props
6. children
7. 通过snabbdom学习vdom

用过虚拟DOM吗

1. s nabbdom
2. h函数
3. vnode数据结构
4. patch函数
5. 新旧vnode对比，得出最小的更新范围，最后更新DOM
6. 数据驱动视图的模式下，有效控制DOM操作

虚拟DOM-diff算法概述

1. diff算法是vdom中最核心、最关键的部分
2. diff算法能在日常使用中体现出来（如key）
3. 树diff时间复杂度度n＾3
4. 遍历tree1
5. 遍历tree2
6. 排序
7. 优化时间复杂度O(n)
8. 只比较同一层级，不跨级比较
9. tag不相同，则直接删掉重建，不再深度比较
10. tag和key，两者都相同，则认为是相同节点，不再深度比较

虚拟DOM-diff算法源码-生成vnode

1. snabbdom源码解读
2. h函数最后返回vnode
3. 最终返回对象

虚拟DOM-diff算法源码-patch函数

1. 虚拟DOM diff算法源码中，patch 函数是用于将新的虚拟节点渲染成真实的DOM，并通过与旧的虚拟节点进行比对，进行必要的更新操作，以实现高效的DOM更新。

虚拟DOM-diff算法源码-patchVnode函数

1. patchVnode 函数是Vue虚拟DOM diff算法源码中的核心函数之一，用于比较和更新两个虚拟节点。它根据新旧节点的类型进行不同的操作，同时使用一些优化策略来尽可能减少实际DOM的操作。

虚拟DOM-diff算法源码-updateChildren函数

1. 虚拟DOM diff算法源码中的updateChildren函数主要用于更新子节点。它使用了双端比对（双指针）的方式来尽可能少地操作DOM，以提高性能。

Vue3学习

对vue2有什么优势

1. 性能更好
2. 体积更小
3. 更好的TS支持
4. 更好的代码组织
5. 更好的逻辑抽离
6. 更多的新功能

vue3和vue2的生命周期有什么区别

1. vue3生命周期
2. Options API生命周期
3. beforeDestory改为beforeUnmount
4. destortyed改为unmouted
5. 其他沿用Vue2的生命周期
6. Composition API生命周期
7. setup()
8. 等于beforeCreate和Created

如何理解Compostion API和Options API

1. Composition API带来了什么
2. 更好的代码组织
3. setup()统一的组织
4. 更好的逻辑复用（有一道专门的面试题）
5. 更好的类型推导

Composition API和Options API如何选择

1. 不建议共用，会引起混乱
2. 小型项目、业务逻辑简单，用Options API
3. 中大型项目、逻辑复杂，用Composition API

别误解Composition API

1. 属于高阶技巧，不是基础必会
2. 是为解决复杂业务逻辑而设计
3. 就像Hooks在React中的地位

如何理解ref、toRef和toRefs

1. 是什么
2. ref
3. 生成值类型的响应式数据
4. 可用于模板和reactive
5. 通过.value修改值
6. toRef
7. 针对一个响应式对象(reactive封装)的prop
8. 创建一个ref,具有响应式
9. 两者保持引用关系
10. toRefs
11. 将响应式对象（reactive封装）转换成普通对象
12. 对象的每个prop都是对应的ref
13. 两者保持引用关系
14. 最佳使用方式
15. 用reactive做对象的响应式，用ref做值类型响应
16. setup中返回toRefs(state)，或者toRef(state,‘xxx’)
17. ref的变量命名都用xxxRef
18. 合成函数返回响应式对象时，使用toRefs
19. 进阶、深入理解

toRef和toRefs如何使用

ref toRef和toRefs的最佳使用方式

1. 使用 ref 用于创建简单的响应式数据
2. 使用 toRef 将响应式对象中的单个属性转换为 ref
3. 使用 toRefs 将整个响应式对象转换为 ref 对象的集合,方便在组合式 API 中使用。

为什么需要用ref

1. Vue 中需要用 ref 主要是为了在函数式组件或者 Composition API 中创建响应式数据。通过 ref，可以确保数据的响应式更新，并且可以在模板中直接访问到这些响应式数据。

为何ref需要value属性

1. ref 需要 value 属性是因为在 Vue 3 中，ref 创建的是一个包装对象，而实际的值存储在 value 属性中。这样做的目的是为了保持响应式性，使得当 value 发生变化时，能够触发视图更新。

为什么需要toRef和toRefs

1. Vue中的toRef和toRefs函数用于在组合式API中创建响应式数据的引用。它们的存在使得在组合式API中更方便地处理响应式数据。

vue3升级了哪些重要功能

1. createApp
2. 多事件
3. emits属性
4. Fragment
5. 生命周期
6. 移除.sync
7. 异步组件的写法
8. 移除filter
9. Composition API
10. Teleport

composition API如何实现逻辑复用

1. 可以使用函数来将逻辑进行封装和复用。通过创建可重用的函数来组织逻辑，并在各个组件中使用这些函数，从而实现逻辑的复用。

Vue3如何实现响应式

1. 可以使用 reactive 函数创建一个响应式的对象，该对象的属性变化会触发视图更新

import { reactive } from 'vue'

const state = reactive({
  count: 0
})

state.count++

这样做会使 state 对象成为一个响应式对象，其属性的变化会被自动追踪和触发更新。

proxy基本使用

import { reactive, readonly } from 'vue'

const state = reactive({
  count: 0
})

state.count++ 
// 当 count 改变时，会自动触发相应的更新

const readonlyState = readonly(state)
// readonlyState.count++ 会触发警告，因为它是只读的

vue3用Proxy实现响应式

1. 在Vue 3中，使用 Proxy 对象来实现响应式。当对象被包装在 Proxy 中时，任何对它的属性的访问和修改都会被捕获，并且触发相应的响应式更新。

v-model参数的用法

1. v-model 参数用于自定义组件中，可以用它来接收父组件中的值，并且通过 emit 方法将变化的值传递给父组件。

watch和watchEffect的区别

1. watch 和 watchEffect 都是用于监视数据变化的函数
2. watch 接收回调函数和可选的选项参数，可以精确控制监视的数据和行为
3. watchEffect 只接收一个回调函数，会自动追踪其中使用的响应式数据，并在其发生变化时触发回调。

setup中如何获取组件实例

1. setup 函数中，可以通过 getCurrentInstance 方法获取当前组件实例。

什么是PatchFlag

1. PatchFlag 是一种用于标记虚拟 DOM 节点的标志，用于在更新过程中进行优化，提高渲染性能。

什么是HoistStatic和CacheHandler

1. HoistStatic 是指静态根节点的提升，用于优化渲染性能
2. CacheHandler 用于缓存事件处理程序，避免每次渲染时都创建新的事件处理函数，以提高性能。

SSR和Tree-shaking的优化

1. SSR（服务器端渲染）和 Tree-shaking（摇树优化）都能优化前端性能。 SSR可以加速首屏加载，提升SEO；Tree-shaking能去除未使用的代码，减少包体积，提升加载速度。

Vite为什么启动非常快

1. Vite启动非常快，因为它使用了ES模块作为开发服务器的原生模块格式，无需打包，不需要在每次修改时重新构建整个应用程序。

ES Module在浏览器中的应用

1. 在浏览器中，可以使用

Composition API和React Hooks的对比

1. Composition API 和 React Hooks 都是用于在函数式组件中处理状态和逻辑的工具。 Composition API 提供了更灵活的选项来组织逻辑代码，而 React Hooks 也允许开发者在函数式组件中使用状态和效果。 两者都鼓励将代码逻辑按照功能划分，并使得代码可复用性更高。

Vue真题演练

v-for为何使用key

1. diff算法中通过tag和key来判断，是否是有sameNode
2. 减少渲染次数、提升渲染性能

组件data为何是函数

1. 组件是个class
2. 使用组件时，是实例化
3. 不会相互影响

何时使用keep-alive

1. 缓存组件，不需要重复渲染
2. 如多个静态tab页切换
3. 优化性能

何时需要使用beforeDestory

1. 解绑自定义事件event. $off
2. 造成内存涉漏
3. 消除定时器
4. 解绑自定义DOM事件，如window scroll等

diff算法时间复杂度

1. O(n)

vue常见性能优化

1. 合理使用show和if
2. 合理使用computed(缓存)
3. for时加key,避免和if同时使用
4. 自定义事件、DOM事件及时销毁
5. 合理使用异步组件
6. 合理使用keep-alive
7. data层级不要太深
8. 设计扁平一点
9. 使用v-load在开发环境做模板编译（预编译）
10. webpack层面优化
11. 使用SSR

computed有何特点

1. 缓存，data不变不会重新计算
2. 提高性能

ajax请求应该放在哪个生命周期

1. mounted
2. dom渲染完成
3. 组件渲染完成
4. js是单线程，ajax异步获取数据
5. 在mounted之前只会让逻辑混乱

如何将组件所有props传递给子组件

1. 使用v-bind="$props"将所有props传递给子组件

什么是作用域插槽

1. 作用域插槽是Vue中用于向子组件传递数据的一种机制。它允许父组件在插槽中包裹数据，并将数据传递给子组件，从而实现更灵活的组件组合。

vuex中action和mutation有何区别

1. action中处理异步
2. mutation不可以
3. mutation做原子操作（做一个操作）
4. action可以整合多个mutation

router常用的路由模式

1. hash默认
2. h5 history(需要服务端支持)

请用vnode描述一个DOM结构

1. tag（标签）
2. prpos（属性）
3. children

监听data变化的核心API是什么

1. Object. defineProperty
2. 深度监听、监听数组
3. 不能监听数组变化
4. 重新定义原型，重写push pop等方法，实现监听
5. Proxy可以原生支持监听数组变化
6. 有何缺点
7. vue3

描述响应式原理

1. 监听data变化
2. 组件渲染和更新流程

简述diff算法过程

1. update children(key的重要性)