标签: vue

前端物语|面试物语-vue

h7ml大约 2 分钟

你有写过自定义指令吗？自定义指令的应用场景有哪些？

一、什么是指令

开始之前我们先学习一下指令系统这个词

指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力

h7ml大约 6 分钟

Vue 项目中有封装过 axios 吗？主要是封装哪方面的？

一、axios 是什么

axios 是一个轻量的 HTTP客户端

h7ml大约 6 分钟

你知道 vue 中 key 的原理吗？说说你对它的理解

一、Key 是什么

开始之前，我们先还原两个实际工作场景

当我们在使用v-for时，需要给单元加上key

h7ml大约 5 分钟

说下你的 vue 项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？

一、为什么要划分

使用vue构建项目，项目结构清晰会提高开发效率，熟悉项目的各种配置同样会让开发效率更高

h7ml大约 5 分钟

说说你对 keep-alive 的理解是什么？

h7ml大约 6 分钟

你对 SPA 单页面的理解，它的优缺点分别是什么？如何实现 SPA 应用呢

一、什么是 SPA

SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面举个例子来讲就是一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们发现，变的始终是杯子里的内容，而杯子始终是那个杯子结构如下图

h7ml大约 5 分钟

Vue 中的过滤器了解吗？过滤器的应用场景有哪些？

一、是什么

过滤器（filter）是输送介质管道上不可缺少的一种装置

大白话，就是把一些不必要的东西过滤掉

h7ml大约 6 分钟

vue 项目本地开发完成后部署到服务器后报 404 是什么原因呢？

一、如何部署

前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可

h7ml大约 4 分钟

v-if 和 v-for 的优先级是什么？

一、作用

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染

h7ml大约 3 分钟

为什么 data 属性是一个函数而不是一个对象？

一、实例和组件定义 data 的区别

vue实例的时候定义data属性既可以是一个对象，也可以是一个函数

h7ml大约 3 分钟

什么是虚拟 DOM？如何实现一个虚拟 DOM？说说你的思路

一、什么是虚拟 DOM

虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）

h7ml大约 8 分钟

请描述下你对 vue 生命周期的理解？在 created 和 mounted 这两个生命周期中请求数据有什么区别呢？

一、生命周期是什么

生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程在Vue中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载 Dom→ 渲染、更新 → 渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线，每个工人（生命周期）站在各自的岗位，当任务流转到工人身边的时候，工人就开始工作 PS：在Vue生命周期钩子会自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())

h7ml大约 5 分钟

Vue 中组件和插件有什么区别？

一、组件是什么

回顾以前对组件的定义：

组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件

h7ml大约 4 分钟

你是怎么处理 vue 项目中的错误的？

一、错误类型

任何一个框架，对于错误的处理都是一种必备的能力

在Vue 中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。

h7ml大约 7 分钟

动态给 vue 的 data 添加一个新的属性时会发生什么？怎样解决？

一、直接添加属性的问题

我们从一个例子开始

定义一个p标签，通过v-for指令进行遍历

h7ml大约 3 分钟

Vue 项目中你是如何解决跨域的呢？

一、跨域是什么

跨域本质是浏览器基于同源策略的一种安全手段

同源策略（Sameoriginpolicy），是一种约定，它是浏览器最核心也最基本的安全功能

h7ml大约 3 分钟

vueuse实用方法

浏览器

使用屏幕断点

import { useBreakpoints } from '@vueuse/core';
/**
 * 浏览器屏幕断点
 */
export const handleBreakpoints = () => {
  const breakpoints = useBreakpoints({
    xs: 0,
    sm: 768,
    md: 992,
    lg: 1200,
    xl: 1920,
    xxl: 2560,
  });
  const xs = breakpoints.between('xs', 'sm');
  const sm = breakpoints.between('sm', 'md');
  const md = breakpoints.between('md', 'lg');
  const lg = breakpoints.between('lg', 'xl');
  const xl = breakpoints.between('xl', 'xxl');

  return { xs, sm, md, lg, xl };
};