vue知识学习

Nash

• 11 min read

Vue项目中有封装过axios吗?怎么封装的?
通常会对axios进行封装以便统一处理请求和响应。封装步骤可能包括:

  1. 创建axios实例，设置基础URL和超时时间等
  2. 添加请求拦截器，统一处理请求头等
  3. 添加响应拦截器，统一处理响应数据、错误等
  4. 封装get、post等方法
  5. 统一处理错误和loading状态

说说vue中的diff算法
Vue的diff算法是一种高效的DOM更新算法:

  1. 只比较同层级元素
  2. 使用key属性标识节点
  3. 采用双端比较算法
  4. 优先处理常见操作(如头部添加/删除)
  5. 递归对比子节点

什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路
虚拟DOM是对实际DOM的轻量级JavaScript对象表示。实现思路:

  1. 用对象描述DOM结构
  2. 比较新旧虚拟DOM树的差异
  3. 将差异应用到实际DOM

说说你对Vue中keep-alive的理解
keep-alive是Vue的内置组件,用于缓存组件实例,避免重复渲染。

  1. 可以保留组件状态,提高性能
  2. 有include/exclude属性控制缓存组件
  3. 对应activated/deactivated生命周期钩子

Vue.observable是什么?
Vue.observable是Vue 2.6新增的API,用于创建响应式数据。

  1. 可以创建全局响应式对象
  2. 适合非组件数据的响应式管理
  3. Vue 3中可用reactive替代

说说你对slot的理解?slot使用场景有哪些?
slot是组件的内容分发机制:

  1. 允许向组件传递内容
  2. 有默认slot和具名slot
  3. 可以传递数据(作用域插槽)
    使用场景:
  4. 自定义组件布局
  5. 组件复用时保留灵活性
  6. 高阶组件

说说你对vue的mixin的理解,以及有哪些应用场景?
mixin是一种分发Vue组件中可复用功能的方式:

  1. 可以包含任何组件选项
  2. 当组件使用mixin时,mixin的选项将被混合进组件
    应用场景:
  3. 抽取公共逻辑
  4. 全局混入
  5. 自定义选项合并策略

Vue中的$nextTick有什么作用?
$nextTick用于在下次DOM更新循环结束之后执行延迟回调:

  1. 确保获取更新后的DOM
  2. 在数据变化后执行某些操作
  3. 优化性能,避免不必要的DOM操作

Vue组件间通信方式都有哪些?

  1. props / $emit
  2. $parent / $children
  3. provide / inject
  4. ref / $refs
  5. eventBus
  6. Vuex
  7. $attrs / $listeners

Vue中组件和插件有什么区别?
组件:

  1. 用于构建页面
  2. 有完整的生命周期
  3. 可复用的Vue实例

插件:

  1. 用于增强Vue的功能
  2. 可全局使用
  3. 通过Vue.use()使用

为什么Vue中的data属性是一个函数而不是一个对象?
使用函数返回对象是为了保证组件实例之间的数据独立性。如果直接使用对象,所有组件实例将共享同一个数据对象。

说说你对Vue生命周期的理解
Vue实例从创建到销毁的过程,包括:

  1. 创建阶段(beforeCreate, created)
  2. 挂载阶段(beforeMount, mounted)
  3. 更新阶段(beforeUpdate, updated)
  4. 销毁阶段(beforeDestroy, destroyed)

每个阶段都有对应的钩子函数,可以在特定阶段执行代码。

Vue实例挂载的过程中发生了什么?

  1. 初始化事件和生命周期
  2. beforeCreate钩子
  3. 初始化注入和响应式
  4. created钩子
  5. 编译模板
  6. beforeMount钩子
  7. 创建vm.$el并替换el
  8. mounted钩子

谈谈对Vue中双向绑定的理解
Vue的双向绑定基于数据劫持和发布订阅模式:

  1. 使用Object.defineProperty劫持数据
  2. 在getter中收集依赖
  3. 在setter中通知更新
  4. 编译模板,绑定更新函数

Vue模板是如何编译的

  1. 将模板解析成AST(抽象语法树)
  2. 对AST进行静态节点标记和优化
  3. 生成render函数

说说Vue中CSS scoped的原理

  1. 为组件生成唯一的属性标识
  2. 编译时为CSS选择器添加属性选择器
  3. 为组件中的元素添加该属性

说说你对渐进式框架的理解
渐进式框架意味着:

  1. 可以根据需求逐步采用Vue的特性
  2. 从简单应用到复杂应用都适用
  3. 提供了丰富的生态系统,但不强制使用

Vue中的v-show和v-if有什么区别
v-show:

  1. 基于CSS display属性切换
  2. 初始渲染开销大,切换开销小

v-if:

  1. 真正的条件渲染,会销毁和重建内部组件
  2. 初始渲染开销小,切换开销大

Vue3.0里为什么要用Proxy API替代defineProperty API?

  1. Proxy可以直接监听对象和数组
  2. Proxy可以监听属性的添加和删除
  3. Proxy的性能更好
  4. Proxy对象可以劫持整个对象,不需要递归

SSR是什么?Vue中怎么实现?
SSR(服务器端渲染)是在服务器生成HTML字符串,发送到浏览器。
Vue SSR实现:

  1. 创建渲染器
  2. 创建Vue实例
  3. 将Vue实例渲染为HTML字符串
  4. 将HTML发送到客户端
  5. 客户端激活(hydration)

vue的祖孙组件的通信方案有哪些?

  1. props逐级传递
  2. provide / inject
  3. eventBus
  4. Vuex
  5. $attrs / $listeners

如何打破scoped对样式隔离的限制?

  1. 使用 /deep/ 或 >>> 深度选择器
  2. 使用 :global() 包裹选择器
  3. 混用scoped和非scoped样式

Scoped Styles为什么可以实现样式隔离?

  1. 为组件生成唯一的属性标识
  2. 编译时为选择器添加属性选择器
  3. 为组件中的元素添加该属性

vue中怎么实现样式隔离?

  1. 使用scoped属性
  2. CSS Modules
  3. CSS-in-JS方案

created和mounted有什么区别?
created:

  1. 实例创建完成
  2. 可访问数据和方法
  3. DOM未创建

mounted:

  1. DOM已创建
  2. 可进行DOM操作
  3. 子组件也已挂载完成

Vue是怎么把template模版编译成render函数的?

  1. 解析模板为AST
  2. 优化AST(静态节点标记等)
  3. 生成render函数代码字符串
  4. 使用new Function将字符串转为函数

v-model的原理是什么样的?
v-model是语法糖,等价于:

  1. 绑定value属性
  2. 监听input事件
  3. 在事件处理函数中更新数据

说说Vuex的原理
Vuex基于Vue的响应式系统:

  1. 创建全局唯一store实例
  2. 使用Vue实现数据响应式
  3. 通过commit触发mutation修改状态
  4. 通过dispatch触发action执行异步操作
  5. 通过getter计算派生状态

Vue中给对象添加新属性时,界面不刷新怎么办?

  1. 使用Vue.set()或this.$set()
  2. 使用Object.assign()创建新对象
  3. 使用扩展运算符创建新对象
  4. 在Vue 3中,可以直接添加新属性(因为使用了Proxy)

Vue3与Vue2的主要区别包括性能提升、Composition API的引入、更好的TypeScript支持、新增Teleport和Fragments等特性、响应式系统重写使用Proxy替代Object.defineProperty、模板编译优化等。Composition API提供了更灵活的逻辑复用和组织方式。

自定义指令是Vue提供的扩展模板功能的方式,常用于操作DOM元素、绑定第三方库、复杂样式操作、权限控制等场景。它允许开发者自定义元素的行为。

Vue中key的原理是在虚拟DOM算法中用于标识节点身份,帮助Vue跟踪节点变化,提高渲染效率。在diff算法中,key用于比较新旧节点,决定是否可以复用。

Vue常用修饰符包括.prevent(阻止默认事件)、.stop(阻止事件冒泡)、.capture(使用捕获模式)、.self(只在元素自身触发)、.once(只触发一次)等。它们用于简化事件处理逻辑。

响应式开发相比命令式有更简洁的代码、自动UI更新、更好的性能优化、更容易实现组件化等优势。它关注"做什么"而非"怎么做",提高了开发效率。

$route是当前路由信息对象,包含path、params等属性。$router是全局路由实例,包含跳转方法等。前者是只读数据,后者提供了操作方法。

React和Vue的主要技术差异在于模板语法(JSX vs 模板)、响应式实现、组件化方式、状态管理、生命周期等方面。它们采用了不同的设计理念和实现方式。

提高单页应用加载速度的方法包括路由懒加载、组件懒加载、资源压缩、CDN加速、服务端渲染、优化webpack配置、合理使用缓存等。这些方法可以减少首屏加载时间。

v-if和v-for不建议一起使用,因为v-for优先级高于v-if,可能导致不必要的循环。它们一起使用会影响性能和代码可读性。

Vue3中可以通过provide/inject、Vuex、app.config.globalProperties等方式设置全局变量。选择合适的方式取决于具体需求和场景。

Vuex数据存储在内存中,刷新后会丢失。解决方法包括使用localStorage持久化、使用vuex-persistedstate插件、刷新时重新请求数据等。

history模式使用HTML5 History API,URL更美观但需要服务器配置。hash模式使用URL的hash部分,兼容性好但URL中有#。选择取决于项目需求和部署环境。

VNode(虚拟节点)通常包含tag、data、children、text、elm、key等属性,用于描述DOM结构和组件信息。这些属性在diff算法和渲染过程中起重要作用。

React和Vue的主要区别在于模板语法、数据绑定方式、组件化实现、状态管理、渲染优化策略等方面。它们有不同的设计理念和适用场景。

computed的缓存实现基于dirty标志和依赖收集。首次访问时计算并缓存,依赖变化时标记dirty,再次访问时根据dirty决定是否重新计算。

vue-loader主要负责解析.vue文件,提取和处理template、script、style,处理语言块,生成热重载代码等。它是Vue单文件组件的核心编译工具。

直接修改Vue data中的数组元素通常不会触发视图更新。解决方法包括使用Vue提供的变异方法(如push、splice)、Vue.set()或替换整个数组。

Vuex有State、Getter、Mutation、Action、Module五种核心概念,分别用于存储状态、派生状态、修改状态、处理异步操作和模块化管理。它们共同构成了Vuex的状态管理体系。

Vuex是Vue的状态管理模式和库,用于集中式存储管理应用的所有组件状态。它适用于中大型单页应用,确保状态以可预测的方式变化。

keep-alive是Vue的内置缓存组件,用于保留组件状态或避免重新渲染。它可以显著提高组件切换的性能,适用于频繁切换的组件场景。

虚拟DOM是对实际DOM的轻量级JavaScript对象表示,用于提高渲染效率和实现跨平台。它是现代前端框架优化性能的重要技术。

Vue是一个渐进式JavaScript框架,用于构建用户界面。它采用MVVM架构,提供响应式数据绑定和组件化开发。Vue易学易用,性能优秀,生态系统丰富,适合各种规模的Web应用开发。

苏ICP备2025153828号