企业官网建设流程全解析

一.Vue相关

1.在vue中，echarts初始化放在哪个钩子

在Vue中，ECharts的初始化通常放在mounted钩子中。因为在mounted钩子中，组件已经挂载到DOM上，你可以访问到模板中的DOM元素。

2.为什么vue中的data不是个对象，而是个函数？

data特别像一个闭包，闭包可以简单理解为：方法里面返回一个方法；闭包最重要的特性是实现对数据的私有和封装；data写成函数（闭包）的形式，相当于给每一个组件创建了一个私有数据空间，也就是说：A组件数据data只可以为A服务，B组件数据data只可以为B服务，各组件数据不会受影响；如果用对象，所有组件的就不能实现私有，只能共用，会造成数据污染的问题，最终导致数据错乱。

3.vue事件绑定原理是什么？

原生事件绑定是通过addEventListener绑定给真实元素的，

组件事件绑定是通过Vue自定义的$on实现的，

4.子组件如何修改父组件的值

  4.1 使用事件

子组件可以通过触发事件的方式通知父组件进行数据的修改。父组件可以通过v-on指令监听子组件触发的事件，并在事件处理程序中修改相应的数据。

  4.2 使用.sync修饰符

Vue还提供了.sync修饰符，用于简化子组件向父组件传递数据并修改父组件数据的操作。

<child-component :message.sync="message"></child-component>

5.vue的双向绑定原理

链接：https://www.cnblogs.com/jiajia-hjj/p/15395815.html

原理主要通过数据劫持和发布订阅模式实现的

通过Object.defineProperty()来劫持各个属性的setter，getter，监听数据的变化

在数据变动时发布消息给订阅者(watcher)，订阅者触发响应的回调(update)更新视图

6.什么是SPA单页应用

单页应用（Single Page Application，简称 SPA）是一种 Web 应用程序架构，它通过动态重写当前页面，而不是加载整个新页面来与用户进行交互。这种技术主要依赖于 AJAX 和前端路由来实现页面的无刷新更新，从而提供更流畅和快速的用户体验。

1.整个应用只有一个 HTML 页面。初次加载时，服务器返回这个页面，此后所有的页面内容切换和数据加载都通过 JavaScript 在客户端完成。

2.通过前端路由（例如 Vue Router、React Router）管理不同的视图和状态，用户在浏览器地址栏中的 URL 变化不会触发整个页面的刷新，而是由 JavaScript 捕获并处理。

3.利用 AJAX 技术（如 Fetch API 或 Axios）与后端服务器进行数据交换，获取数据后动态更新页面内容，而不需要重新加载页面。

4.由于不需要重新加载整个页面，只需更新部分内容，用户体验更加流畅和快速。大部分渲染工作由客户端的 JavaScript 完成，减轻了服务器的负担。

SPA的优缺点
优点：
1、用户体验好：页面切换流畅，无需整页刷新，类似于桌面应用的操作体验。

2、减少服务器压力：由于大部分渲染和逻辑在客户端完成，服务器只需提供数据接口，减少了服务器的压力。

3、前后端分离：更明确的前后端分离，前端负责页面显示和交互，后端负责数据处理和业务逻辑。

更明确的前后端分离，前端负责页面显示和交互，后端负责数据处理和业务逻辑。

缺点：
1、首次加载时间长：由于初次加载需要下载所有必要的 HTML、CSS 和 JavaScript 文件，可能导致首次加载时间较长。

2、SEO 问题：传统搜索引擎难以抓取动态内容，SEO 优化较困难。不过，这个问题可以通过服务器端渲染（SSR）或预渲染等技术来缓解。

3、前端复杂度增加：需要处理复杂的前端路由和状态管理，增加了开发和维护的难度。

7.vue数据响应式原理

8.vuex中mutation和action的区别

视图触发Action，Action再触发Mutation，

Mutation：必须同步执行，专注于修改State，理论上是修改State的唯一途径；

Action：可以异步，但不能直接操作State，里面可以写一些业务代码、异步请求。

9.$nextTick实现原理

nextTick，它可以在DOM更新完毕之后执行一个回调。当我们需要在dom更新完之后进行某些操作的时候，就会用到$nextTick，原理就是：vue用异步队列的方式来控制DOM更新和nextTick回调先后执行。

Vue.js 中的 nextTick 机制确保在DOM更新后执行回调函数。 它主要处理在数据变更后，如何确保在DOM实际更新后执行某些操作的问题。以下是其工作原理的详细解释：

• DOM更新与异步处理： Vue.js 使用异步更新队列来处理DOM更新。当数据发生变化时，Vue不会立即重新渲染DOM，而是将这些变更缓冲起来，并在下一个事件循环“tick”中执行实际的DOM更新。1
• nextTick的实现： 当开发者调用 this.$nextTick() 或 Vue.nextTick() 时，它们实际上是在告诉Vue：“我在这里等待，直到所有的DOM更新完成后再继续执行我的回调函数。” 这通过维护一个回调函数队列实现，确保所有在同一“tick”内的回调都在DOM更新后执行。23
• 回调函数的处理： 当Vue完成DOM的更新后，它会遍历并执行这个队列中的所有回调函数。这样，开发者可以确保他们的代码在DOM实际更新后执行，而不是在数据变更的那一刻。2
• 与Promise的集成： nextTick() 方法返回一个Promise对象，这使得开发者可以使用 async/await 语法来等待DOM更新完成，从而以更简洁的方式编写异步代码。13

总体来说，nextTick 是Vue.js中一个关键机制，它允许开发者在数据变更后安全地操作DOM，确保所有相关的DOM更新都已完成。

10.watch和computer的原理，以及区别

当需要在数据变化时执行异步或开销较大的操作时，使用watch最有用的。

11.路由导航守卫

导航守卫可以控制路由的访问权限。

全局前置守卫的回调函数中接收 3 个形参，格式为：

不允许跳转到后台主页：next(false)

12.路由切换，前进，后退

vue-router 提供了许多编程式导航的 API，其中最常用的导航 API 分别是：

① this.$router.push(‘hash 地址’)

跳转到指定 hash 地址，并增加一条历史记录
② this.$router.replace(‘hash 地址’)

跳转到指定的 hash 地址，并替换掉当前的历史记录
③ this.$router.go(数值 n)

实现导航历史前进、后退

简化：在实际开发中，一般只会前进和后退一层页面。因此 vue-router 提供了如下两个便捷方法：

① $router.back()

• 在历史记录中，后退到上一个页面

② $router.forward()

• 在历史记录中，前进到下一个页面

13.v-html会有什么问题

14.less,sass

15.vue中hash路由跟history路由区别

Vue中的hash路由和history路由模式是指两种处理路由的方式。

1. hash模式：

   • URL中永远带有#符号，#后面的部分称为hash值。
   • 使用window.location.hash来读取或设置hash值，不会引起页面的重新加载。
   • 主要用于兼容旧版本的浏览器，因为一些老的浏览器不支持HTML5的history API。

2. history模式：

   • URL中看不到#符号。
   • 依赖HTML5 History API（pushState和replaceState方法）实现。
   • 需要服务器支持，否则用户直接访问非首页路由时会出现404错误。

Vue Router中使用mode属性来设置路由模式：

javascriptconst router = new VueRouter({ mode: 'history', // 或者 'hash' routes: [...] });

在实际开发中，如果不需要为旧版本浏览器提供支持，或者你不介意URL中带有#符号，可以选择hash模式。如果想要更加现代的URL，并且确信你的服务器配置可以处理路由，可以选择history模式。

16.简述vue中虚拟dom和diff算法

在Vue中，虚拟DOM是一种抽象层面的表现，它使得Vue可以高效地更新DOM。虚拟DOM是由VNode表示的，是一个抽象的JavaScript对象，用以描述真实DOM的信息。

当数据更新时，Vue会重新运行渲染函数，生成新的VNode树，然后Vue会用深度优先的递归比较新旧VNode树的差异，最终只应用必要的变更到真实DOM上，避免了对整个列表进行重新渲染。

这个过程就是所谓的"Diff算法"。

Vue通过Diff算法比较新旧两棵虚拟DOM树的差异，并只将"Item C"添加到真实的DOM中，这就是虚拟DOM和Diff算法的实际应用。

vue虚拟dom和真实dom的区别

Vue的虚拟DOM（Virtual DOM）是一种可以理解为在真实DOM之上的抽象层，它使得Vue可以高效地更新DOM。

真实DOM：是由浏览器提供的一种抽象层，它使得我们可以用JavaScript操作文档结构。当我们直接操作真实DOM时，会引起浏览器的重绘和重排，性能开销较大。

虚拟DOM：是用JavaScript对真实DOM的一种抽象。Vue通过新旧虚拟DOM的对比，找出实际变化的部分，然后只更新这部分，减少对真实DOM的操作，从而提高性能。

17.vue 中的 provide 和 inject 用法

provide 和 inject 允许你在祖先组件和后代组件之间传递数据，而不需要通过props和events进行逐层传递。provide 在祖先组件中定义要传递的数据，inject 在后代组件中接收数据。

18.vue中父子组件渲染的生命周期执行顺序，

19.vue生命周期，在什么时候发请求，

通常在create时发请求

 20.vuex有几部分，每部分的含义

21.路由怎么传参，路由跳转有几种方式

22.v-if和v-for比较

v-for优先级比较高,注意我们不推荐在同一元素上使用 v-if 和 v-for

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：

<li v-for="todo in todos" v-if="!todo.isComplete"> { { todo }} </li>

上面的代码将只渲染未完成的 todo。

而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 "><template>) 上。如：

<ul v-if="todos.length"> <li v-for="todo in todos"> { { todo }} </li> </ul> <p v-else>No todos left!</p>

23.插槽

1.我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。

注意： v-slot 只能添加在 <template> 上 (只有一种例外情况，如下红色字体，)

#独占默认插槽的缩写语法

当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：

<current-user v-slot:default="slotProps"> { { slotProps.user.firstName }} </current-user>

这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：

<current-user v-slot="slotProps"> { { slotProps.user.firstName }} </current-user>

2.跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

<current-user #header="{ user }"> { { user.firstName }} </current-user>

24.uni-app

25.组件传值

在Vue.js中，组件通信是构建复杂应用的基础。Vue提供了多种方式来实现组件间的通信。以下是几种常见的组件通信方法：

1. Props（父子组件通信）

‌父组件向子组件传递数据‌：

在子组件中，你可以通过props接收从父组件传递过来的数据。

<!-- 子组件 -->

<template> <div>{ { message }