vue(一)

Nash

Dec 5, 2024 • 9 min read

Vue 数据响应式与 diff 算法的关系

Vue 虽然有数据响应式系统,但仍然需要 diff 算法,主要原因如下:

响应式系统只能追踪到数据的变化,但无法精确知道 DOM 需要如何更新
diff 算法可以最小化 DOM 操作,提高性能
有些复杂的更新情况(如列表重排),单靠响应式难以处理

Vue 3 不需要时间分片的原因

Vue 3 不需要时间分片主要是因为:

采用了 Proxy based 响应式系统,性能得到大幅提升
优化了 Virtual DOM 的实现,减少了不必要的更新
编译器优化,生成更高效的渲染函数

Vue 3 引入 Composition API 的原因

引入 Composition API 的主要目的是:

更好的逻辑复用和代码组织
更好的类型推导
减小打包体积
对 tree-shaking 更友好

Vue 事件机制及手写实现

Vue 的事件机制基于发布订阅模式。以下是简化版的实现:

class EventEmitter {
  constructor() {
    this._events = {};
  }

  $on(event, fn) {
    if (!this._events[event]) {
      this._events[event] = [];
    }
    this._events[event].push(fn);
  }

  $off(event, fn) {
    if (!this._events[event]) return;
    if (!fn) {
      this._events[event] = [];
    } else {
      this._events[event] = this._events[event].filter(cb => cb !== fn);
    }
  }

  $emit(event, ...args) {
    if (!this._events[event]) return;
    this._events[event].forEach(fn => fn.apply(this, args));
  }

  $once(event, fn) {
    const wrapper = (...args) => {
      fn.apply(this, args);
      this.$off(event, wrapper);
    };
    this.$on(event, wrapper);
  }
}

computed 依赖另一个 computed 的原理

computed 可以依赖另一个 computed,是因为:

Vue 内部会建立一个依赖图
当一个 computed 依赖另一个 computed 时,会被添加到依赖图中
当最底层的数据变化时,会触发整个依赖链的更新

vm.$set 原理

vm.$set 的主要作用是处理 Vue 2.x 中响应式系统的限制。其原理是:

对于数组,调用 splice 方法触发更新
对于对象,先判断是否是响应式对象
如果不是响应式对象,直接赋值
如果是响应式对象,使用 defineReactive 添加新属性

Vue 中定义全局方法

在 Vue 中定义全局方法有以下几种方式:

使用 Vue.prototype
使用插件
使用 mixin
Vue 3 中可以使用 app.config.globalProperties

父组件监听子组件生命周期

可以通过以下方式实现:

在子组件中使用 $emit 触发自定义事件
使用 @hook 监听生命周期钩子

Vue 组件中的原生事件监听器销毁

在 Vue 2.x 中,需要手动销毁。在 Vue 3 中,如果是在 template 中添加的事件监听,会自动销毁。如果是在 setup 或生命周期钩子中添加的,仍需手动销毁。

Vue 3 响应式设计原理

Vue 3 的响应式系统基于 Proxy,主要原理包括:

使用 Proxy 拦截对象的读写操作
使用 effect 函数收集依赖
当数据变化时,触发相关的 effect 重新执行

created 和 mounted 钩子之间的时间差

这个时间差主要受以下因素影响:

组件的复杂度
子组件的数量
异步组件的加载时间
服务端渲染的情况

Vue 中推荐的发起请求的生命周期

通常推荐在 created 或 mounted 钩子中发起请求。具体选择取决于:

是否需要操作 DOM
是否需要等待子组件挂载完成

React 需要 Fiber 而 Vue 不需要的原因

主要原因包括:

Vue 的更新粒度更细,可以精确跟踪组件的依赖关系
Vue 的模板编译可以提供更多优化机会
React 的 JSX 渲染机制决定了需要一次性完成整个组件树的递归

SPA 首屏加载速度优化

优化方法包括:

路由懒加载
代码分割
静态资源 CDN
服务端渲染 (SSR)
预渲染
骨架屏

Vite 原理

Vite 的主要原理包括:

利用浏览器原生 ES 模块支持
在开发环境中不打包,而是直接服务源码
生产环境使用 Rollup 进行打包

Vue 2.0 数组变化检测及解决方案

Vue 2.0 不能检测数组变化的原因是 Object.defineProperty 的限制。解决方案包括:

使用 Vue.set 或 vm.$set
使用数组的变异方法 (push, pop, shift 等)
替换整个数组

Vue 页面渲染流程

主要流程包括:

解析模板

生成虚拟 DOM

首次渲染,生成真实 DOM

数据变化时,生成新的虚拟 DOM

新旧虚拟 DOM 对比 (diff)

更新真实 DOM

computed 和 watch 的区别

主要区别包括:

computed 是计算属性,有缓存
watch 是监听数据变化,可以执行异步操作
computed 依赖其他数据,而 watch 监听单个数据源

Vuex 辅助函数使用

Vuex 提供了以下辅助函数:

mapState
mapGetters
mapMutations
mapActions

使用示例:

import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}

Vue 3.0 实现 Modal 的设计思路

可以考虑以下设计:

使用 Teleport 组件将 Modal 渲染到 body 下
使用 Composition API 封装 Modal 的逻辑
利用 provide/inject 实现多层级组件通信

Vue 3.0 Treeshaking 特性

Treeshaking 是指移除未使用的代码。Vue 3.0 通过以下方式支持更好的 Treeshaking:

核心库的模块化设计
编译器生成的代码更易于 Treeshaking
可选特性按需引入

Composition API 与 Options API 的比较

主要区别:

Composition API 提供更好的代码组织和复用
Composition API 有更好的类型推导
Options API 更直观,适合简单组件

Vue 3.0 性能提升

主要体现在:

响应式系统重写,使用 Proxy
虚拟 DOM 重构,更快的 diff 算法
编译器优化,生成更高效的代码
更好的 Treeshaking 支持

Vue 3.0 设计目标和优化

设计目标:

更小的包体积
更好的性能
更好的 TypeScript 支持
更好的可维护性

优化:

重写响应式系统
优化编译器
重构虚拟 DOM
提供 Composition API

Vue 项目错误处理

可以通过以下方式处理错误:

使用全局错误处理 (errorHandler)
在组件中使用 errorCaptured 钩子
使用 try/catch 捕获异步错误
使用第三方错误监控服务

Vue 项目部署及 404 问题解决

部署步骤:

构建生产版本
将构建结果上传到服务器
配置服务器

404 问题解决:

配置服务器将所有请求重定向到 index.html
使用 Hash 模式的路由

好的,我将从第27题开始,为您提供高质量的技术文档式回答:

Vue项目中如何解决跨域问题?

在Vue项目中解决跨域问题通常有以下几种方法:

配置开发环境代理

在 vue.config.js 中配置 devServer.proxy:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

使用 CORS

在后端服务器中设置 CORS 头:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

使用 JSONP

虽然不推荐,但在某些情况下可以使用 JSONP:

import jsonp from 'jsonp'

jsonp('http://example.com/data', null, (err, data) => {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});

使用服务器端代理

在生产环境中,可以使用 Nginx 等服务器进行反向代理。

Vue怎么实现权限管理?控制到按钮级别的权限怎么做?

Vue 中实现权限管理通常涉及以下几个方面:

路由级权限控制

使用 Vue Router 的 beforeEach 钩子:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

组件级权限控制

创建一个权限指令:

Vue.directive('permission', {
  inserted(el, binding) {
    if (!hasPermission(binding.value)) {
      el.parentNode && el.parentNode.removeChild(el);
    }
  }
});

按钮级权限控制

使用自定义指令或计算属性:

<button v-if="hasPermission('edit')">编辑</button>

computed: {
  hasPermission() {
    return (permission) => {
      return this.$store.state.userPermissions.includes(permission);
    }
  }
}

API 请求权限控制

在 Axios 拦截器中处理:

axios.interceptors.request.use(config => {
  const token = getToken();
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

大型项目中,Vue项目怎么划分结构和划分组件比较合理呢?

在大型 Vue 项目中,合理的结构和组件划分可以提高代码的可维护性和可重用性:

项目结构划分

src/
  ├── assets/            # 静态资源
  ├── components/        # 公共组件
  ├── views/             # 页面级组件
  ├── router/            # 路由配置
  ├── store/             # Vuex 状态管理
  ├── api/               # API 请求
  ├── utils/             # 工具函数
  ├── directives/        # 自定义指令
  ├── mixins/            # 混入
  ├── plugins/           # 插件
  ├── styles/            # 全局样式
  ├── locales/           # 国际化
  └── constants/         # 常量定义

组件划分原则

单一职责: 每个组件只负责一个功能
高内聚低耦合: 组件内部功能紧密相关,与外部依赖最小化
可重用性: 设计通用组件,提高复用率
合理粒度: 既不过于庞大,也不过于细小

组件类型

基础组件: 如按钮、输入框等
业务组件: 针对特定业务场景的组件
容器组件: 负责数据获取和状态管理
展示组件: 纯展示,不涉及业务逻辑

状态管理

使用 Vuex 进行全局状态管理
按模块划分 store
使用 getters 派生状态
异步操作放在 actions 中处理

性能优化

路由懒加载
组件异步加载
长列表虚拟滚动
大型组件拆分

通过以上方式,可以使大型 Vue 项目结构清晰,易于维护和扩展。