Web

一、Vue 中，如何实现组件之间的通信?

1. Props和$emit:
   • 父组件通过props向下传递数据给子组件。
   • 子组件通过$emit发射事件，并传递参数给父组件。
2. $refs:
   • 父组件可以通过$refs来直接访问子组件的方法和数据。
3. 𝑝𝑎𝑟𝑒𝑛𝑡和parent和children:
   • 子组件可以通过$parent访问父组件的实例，同样父组件可以通过$children访问子组件的实例。
4. Provide 和 Inject:
   • 祖先组件可以通过provide选项来提供数据，所有的子孙组件都可以通过inject选项来接收这个数据。
5. Event Bus:
   • 创建一个空的Vue实例作为中央事件总线，用于兄弟组件之间的通信。
6. Vuex:
   • 对于大型应用，使用Vuex作为状态管理库，可以实现任何组件之间的通信。
7. 𝑎𝑡𝑡𝑟𝑠和attrs和listeners:
   • $attrs包含了父作用域中不被认为是prop的所有绑定属性（class和style除外）。
   • $listeners包含了父作用域中为当前组件注册的所有监听器。
8. Portals (Vue 3中为Teleport):
   • 使用<teleport>可以在不同的DOM节点之间传递组件内容，而不影响组件之间的逻辑关系。

二、Vue 的生命周期中有哪些主要阶段?

• beforeCreate：实例初始化完成后，在数据观测和事件配置之前调用，在当前阶段 data、methods 等还无法被访问
• created：实力已经创建，可以访问 data，但是不能访问 dom 节点，可以用于在这里发送请求
• beforeMount：在节点挂载之前调用，此时页面呈现的都是未经 Vue 编译的 Dom 结构。在这里对所有的 DOM 的操作，都是不奏效的。
• mounted：节点挂载完成后调用，可以访问 data，也可以访问节点，可以用于在这里发送请求。
• beforeUpdate：数据更新之前调用
• updated：发生在更新之后。注意：不能再此修改数据，因为修改数据后又会导致该函数调用，就会陷入死循环。
• beforeDestroy：实例销毁前，一般在这里进行一些计时器、事件的清除工作。
• destroyed：实例销毁后。

三、解释 Vue 中的“单向数据流”及为什么要使用单向数据流?

易于调试：由于数据流动方向明确，当出现问题时，可以很方便地追踪到问题发生的具体位置。
可预测性：在单向数据流中，数据的变化是可预测的，因为子组件不能直接修改父组件的状态，所有的状态变更都通过明确的流程来进行，这可以避免数据的混乱。
维护性：当应用程序变得越来越大时，单向数据流有助于保持代码的清晰和模块化，使得代码更容易维护。
可复用性：由于子组件不依赖于父组件的状态，因此可以更容易地在不同的上下文中复用子组件。
Vue 的响应式系统：Vue 通过其响应式系统确保了当数据变化时，视图会自动更新。单向数据流与这个系统相结合，确保了高效且准确的数据更新。

四、Vue 中的计算属性和监听属性有什么区别?请举例说明。

• computed 能完成的功能，watch 都能完成，但 watch 能完成的，但 computed 不一定能完成。
• computed 一般应用于 tabs 切换列表数据
• computed 只能执行同步操作，watch 能执行异步操作。
• computed 处理的数据有缓存，只有依赖的 data 或者 props 发生改变后才会重复执行，

五、列举 vue 中的内置指令，并说明作用，至少列举三个。

• 1. v-for
     用于展示列表数据，可用于遍历数组，对象

• v-if 是真正的渲染，会有插入节点和移除节点的过程

• v-show 任何情况下都会被渲染，只是切换 display 属性

六、选择题

cb 对

七、指令 生命周期 vuex vuerouter 事件 插槽 组件通信

指令 (Directives)

指令是Vue模板中最核心的部分之一，它们是带有v-前缀的特殊属性，用于在DOM上应用特殊的响应式行为。例如：

• v-bind用于绑定属性。
• v-model用于在表单输入和应用状态之间建立双向绑定。
• v-for用于渲染列表。
• v-if、v-else-if和v-else用于条件渲染。
• v-on用于监听DOM事件。

生命周期钩子 (Lifecycle Hooks)

生命周期钩子是在组件创建、更新、销毁等不同阶段执行的函数。它们允许用户在特定时刻执行代码。例如：

• created：组件实例创建后调用。
• mounted：组件挂载到DOM后调用。
• updated：组件更新后调用。
• destroyed：组件销毁后调用。

Vuex

Vuex是一个专门为Vue.js应用程序开发的状态管理模式和库。它采用集中式存储管理所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。主要概念包括：

• state：存储应用状态。
• getters：用于访问状态的计算属性。
• mutations：用于同步更改状态。
• actions：用于提交mutations，可以包含任意异步操作。
• modules：将大的store分割成模块。

Vue Router

Vue Router是Vue.js的官方路由管理器。它允许用户为单页应用程序定义路由和导航。主要概念包括：

• routes：路由配置数组，每个路由映射一个组件。
• router-view：用于渲染匹配的组件。
• router-link：用于导航的组件。
• 导航守卫：允许用户在导航发生前后执行一些代码。

事件

在Vue中，事件是指用户和浏览器交互产生的行为，如点击、提交等。使用v-on指令（简写为@）来监听DOM事件，并在事件发生时执行JavaScript代码。

插槽 (Slots)

插槽是Vue模板中用于组件内容分布的机制。它们允许用户自定义组件的内容，而不必改变组件的结构。Vue提供了几种插槽类型：

• 匿名插槽：默认插槽，没有名字。
• 具名插槽：具有特定名字的插槽。
• 作用域插槽：允许父组件访问子组件的数据。

组件通信

Vue组件之间的通信可以通过多种方式实现，包括：

• props和$emit：父组件通过props传递数据给子组件，子组件通过$emit发射事件给父组件。
• provide和inject：允许祖先组件向所有子孙组件传递数据。
• event bus：通过创建一个空的Vue实例作为中央事件总线，实现兄弟组件之间的通信。
• Vuex：用于大型应用的状态管理，实现任何组件之间的通信。
• $refs、$parent、$children：直接访问组件实例的方法和数据。

八、条件，循环指令父子通信异步操作的生命周期项目启动和打包 vuex start mutations

条件渲染

条件渲染指令用于根据表达式的值来决定是否渲染某个元素或组件。常见的条件渲染指令有：

• v-if：条件性地渲染某个元素或组件。
• v-else-if：作为v-if的兄弟节点，提供多个条件渲染选项。
• v-else：作为v-if或v-else-if的兄弟节点，当以上条件都不满足时渲染。

列表渲染

列表渲染指令用于渲染一个列表数据到DOM中。常见的列表渲染指令有：

• v-for：遍历一个数组或对象，渲染一个列表。

父子组件通信

父子组件之间的通信是Vue组件化开发的核心概念。常见的通信方式有：

• props：父组件向子组件传递数据。
• $emit：子组件向父组件发送事件和数据。

异步操作

在Vue中，异步操作通常指的是在组件生命周期钩子中执行的异步任务，如数据获取、API调用等。这些操作通常在以下生命周期钩子中执行：

• created：组件实例创建后，此时可以访问数据和方法，但DOM还未生成。
• mounted：组件挂载到DOM后，此时可以访问DOM元素，并执行异步操作。

生命周期钩子

Vue组件的生命周期钩子是在组件创建、更新、销毁等不同阶段执行的函数。它们允许用户在特定时刻执行代码。常见的生命周期钩子有：

• created：组件实例创建后调用。
• mounted：组件挂载到DOM后调用。
• updated：组件更新后调用。
• destroyed：组件销毁后调用。

项目启动和打包

Vue项目的启动和打包通常使用现代前端构建工具，如Webpack、Vite等。启动项目通常是通过命令行工具运行一个开发服务器，而打包则是将项目编译成生产环境的静态文件。

• npm run serve：启动开发服务器。
• npm run build：打包项目。

Vuex状态管理

Vuex是Vue.js的官方状态管理库，用于集中管理应用程序的状态。Vuex的主要组成部分包括：

• state：存储应用状态。
• getters：用于访问状态的计算属性。
• mutations：用于同步更改状态。
• actions：用于提交mutations，可以包含任意异步操作。

Vuex Start Mutations

在Vuex中，mutations是唯一可以更改state的地方。mutations必须是同步的，这样可以保证状态的变化是可追踪和可预测的。在组件中，可以通过store.commit方法来触发一个mutation。

例如，如果你想要在Vuex中启动一个异步操作，你会在action中执行这个操作，并在操作完成后提交一个mutation来更新状态。

// 在Vuex的action中
actions: {
  async fetchData({ commit }) {
    const data = await someAsyncOperation();
    commit('SET_DATA', data);
  }
}

// 在Vuex的mutation中
mutations: {
  SET_DATA(state, data) {
    state.data = data;
  }
}

管刚

判断题

1. 利用var声明的变量会绑定在块级作用域，不会受外界的影响（x）
2. 字符串实例endsWith（）方法表示参数字符串是否在原字符串的头部，返回布尔值（x）
3. Node.js的文件操作API由file模块提供（x）
4. 默认情况下，exports和module.exports指向同一个对象（对）
5. SetTimeout（）是一个同步方法，会阻塞后续代码的继续执行（x）
6. 客户端与服务器端是组成web应用或网站必不可少的部分（对）
7. Express是一个基于node平台的web应用开发框架（对）
8. Post请求参数的传递会将请求放在send（）方法中（对）
9. FormData对象可以作为post请求参数直接传递给服务器（对）
10. Webpack默认入口和出口文件配置是可以手动修改（对）

选择题

1.下列选项中，不属于let关键字特点是（c）
A. let关键字声明的变量只在所处的块级作用域有效
B. let关键字声明的变量不存在变量提升

C. let关键字声明的变量具有局部作用域

D. let关键字声明的变量具有暂时性性死区特性
2. 下列选项中，说法错误的是（d）
A. 使用var关键字声明的变量存在变量提升现象
B. 使用let关键字声明的变量不存在变量提升现象
C. 使用const关键字声明的变量不存在变量提升现象

D. 使用var关键字声明的变量只能先声明后使用

3. node.js的path模式中，用于获取文件目录的函数是（b）
   A. basename（p【，ext】）

B. Dirname（p）

C. Normalize（p）
D. Sep
4. 以下选项中，不属于Node.js第三方模块是（d）
A. Nodemom
B. Nrm
C. Gulp

D. Fs

5. 下列选项中，说法正确的是(d)
   A. 同步api的执行方式，代码从上到下一行一行执行，下一场到代码必需等待上一行代码执行完成后才能执行
   B. 同步代码中，每行代码按顺序依次执行
   C. 采用异步api的执行方式，程序不需要等待它执行完成，而是继续后执行代码输入

D. 以上都正确

6. 下列选项中，用于在请求路径后面连接get请求参数的符号是
   A. @

B. ？

C. &
D. $

7. 下列选项中，设置Ajax对象请求方式和请求地址方法是

A. open（）方法

B. Send（）方法
C. Onload（）方法
D. Onreadystatechange（）方法

8. 下列选项中，用于定义文件域表单元素的是（）

A. <input type =“file”/>

B. <input type =“text”/>
C. <input type =“button”/>
D. <input type =“submit”/>
9. 下列选项中，用于循环遍历目标对象的模板语法是

A. {{each}}

B. {{for}}
C. {{if}}
D. {{while}}
10. 下列选项中，属于打包处理JavaScript高级语法的加载器是
A. css-loder

B. babel-loder

C. style-loder
D. sass-loder

填空题

1.ES的全称是ECMAScript，他是由ECMA国际化标准化组织制定的一项脚本语言的标准化规范.
2.在ES6中可以使用const关键字声明一个常量
3.Node.js的文件操作模块由fs模块提供
4.模块化开发解决的两个最重要的问题是命名冲突和文件依赖
5.如果当前api的执行不会阻塞后续代码的执行，则当前api是指异步api
6.中间件主要是由中间方法和请求处理函数两部分构成
7.在请求头中指定content-Type属性值是application/json，表示服务器端当成请求参数的格式是json
8.使用new实例化formdata()构造函数来创建formdata对象
9.使用less和less-loader来打包处理后缀为.less的文件

简答题

2.请简述箭头函数的特点。

箭头函数是ES6中新增的函数，它用于简化函数的定义语法，有自己的特殊语法，接收一定数量的参数，并在其封闭的作用域的上下文中操作。在箭头函数中，如果函数体中只有一句代码，且代码的执行结果就是函数的返回值，此时可以省略函数体大括号。在箭头函数中，如果参数只有一个，可以省略参数外部的小括号。

4.请简述Ajax状态码主要有哪些及其含义是什么。

0：请求未初始化（还没有调用open()方法）；
1：请求已经建立，但是还没有发送（还没有调用send()方法）；
2：请求已经发送；
3：请求正在处理中，通常响应中已经有部分数据可以用了；
4：响应已经完成，可以获取并使用服务器的响应了。

5.请简述什么是Webpack。

Webpack是一个流行的前端项目构建工具（打包工具），对模块化的开发提供了友好的支持，提供了代码的压缩混淆、性能的优化等功能，具体如下。
1.Webpack打包工具用来对项目中的复杂文件进行打包处理
2.可以实现项目的自动化构建，并且给前端开发人员带来了极大的便利
3.目前，企业中的绝大多数前端项目是基于Webpack打包工具来进行开发的