网络通信协议

网络通信协议是计算机网络中实现数据交换和通信的规则和约定。它定义了数据的格式、传输方式、错误处理等细节，确保不同设备和系统能够相互通信。

常见的网络通信协议：

TCP/IP（Transmission Control Protocol/Internet Protocol）：TCP/IP是互联网通信的基础协议。它将数据分割成数据包进行传输，确保可靠的数据传输和网络连接。
HTTP（Hypertext Transfer Protocol）：HTTP是用于在Web浏览器和Web服务器之间传输超文本的协议。它定义了请求和响应的格式，使得浏览器可以请求网页并接收服务器返回的数据。
FTP（File Transfer Protocol）：FTP是用于在计算机之间传输文件的协议。它支持文件的上传、下载和管理，使用客户端-服务器模型进行通信。
SMTP（Simple Mail Transfer Protocol）：SMTP是用于在电子邮件服务器之间传输电子邮件的协议。它定义了邮件的格式和交换规则，确保邮件能够正确发送和接收。
POP3（Post Office Protocol version 3）：POP3是用于从邮件服务器上接收电子邮件的协议。它允许用户使用电子邮件客户端下载并管理邮件。
IMAP（Internet Message Access Protocol）：IMAP是一种用于从邮件服务器上接收和管理电子邮件的协议。它提供了更丰富的功能，允许用户远程管理邮件。

以上只是一小部分常见的网络通信协议，实际上还有很多其他协议，如DNS（Domain Name System）、SSH（Secure Shell）等，它们在不同的应用场景中发挥着重要作用。

WebSocket

WebSocket是一种在Web应用程序和服务器之间实现双向通信的协议。它提供了一种持久化的连接，允许服务器主动向客户端发送消息，而不是依赖于客户端发起请求。与传统的HTTP请求-响应模式不同，WebSocket允许实时更新数据，创建实时聊天应用程序，实时协作工具和其他需要实时数据传输的应用程序。

WebSocket使用HTTP协议建立连接，然后将连接升级为持久性连接。一旦WebSocket连接建立起来，客户端和服务器可以通过向对方发送消息来进行实时通信。这种双向通信使得服务器能够主动将更新的数据推送到客户端，从而实现实时和反应性的应用程序。

WebSocket在与服务器建立连接后，可以通过发送消息进行通信，消息可以是文本或二进制数据。服务器可以选择性地向特定客户端发送消息，或者将消息广播给所有连接的客户端。WebSocket连接也支持心跳检测，以确保连接的可靠性。

通过使用WebSocket，开发者可以创建更加交互式和实时的网络应用程序，而无需依赖于传统的轮询或长轮询等技术。WebSocket已经被广泛应用于在线游戏、聊天应用程序、协作工具和实时监控等领域。

HTTP协议

HTTP（Hypertext Transfer Protocol）是一种用于在Web应用程序之间进行通信的协议。它是一种无状态的协议，表示每个请求与响应之间是相互独立的，服务器不会保留任何有关之前请求的信息。

HTTP使用客户端-服务器模型。客户端发送HTTP请求到服务器，并等待服务器返回HTTP响应。HTTP请求由一个请求行、请求头和请求主体组成。请求行包括HTTP方法（例如GET、POST、PUT、DELETE等），请求目标（通常是URL）和协议版本。请求头包含关于请求的附加信息，如用户代理、请求的内容类型和长度等。请求主体是可选的，通常包含发送到服务器的数据（例如表单数据或文件）。

服务器收到请求后，会解析请求并执行相应的操作，然后生成一个HTTP响应返回给客户端。HTTP响应由一个状态行、响应头和响应主体组成。状态行包含响应的状态码（表示请求成功、重定向、客户端错误或服务器错误等）和相应的状态消息。响应头包含一些与响应相关的元数据，如响应的内容类型、长度和缓存控制等。响应主体包含实际的响应数据，例如HTML页面、JSON数据或文件。

HTTP是一种无连接的协议，每个请求都需要建立一个新的TCP连接，并在请求完成后关闭连接。这导致了额外的延迟，并且在处理大量请求时可能会造成性能问题。为了克服这个问题，HTTP/1.1引入了持久连接（Keep-Alive），允许在同一个连接上进行多个请求和响应，减少了连接建立和关闭的开销。

除了基本的请求和响应模型外，HTTP还支持一些附加功能，如SSL/TLS加密、身份验证、cookie和缓存等。它是Web应用程序通信的基础，被广泛用于浏览器和服务器之间的通信，以及Web服务的实现。

浏览器原理

浏览器是用于浏览和呈现Web页面的软件应用程序。它充当用户与Web内容之间的中介，负责将服务器上的HTML、CSS和JavaScript等资源加载和显示给用户。

浏览器的工作原理可以简单地描述为以下几个步骤：

用户输入URL：用户在浏览器地址栏中输入网页的URL（统一资源定位符）。
发起HTTP请求：浏览器根据URL解析出对应的服务器地址，并发起HTTP请求，请求服务器上的资源。这些资源可以是HTML文档、CSS样式表、JavaScript文件、图像等。
接收和解析响应：服务器接收到浏览器的请求后，返回相应的HTTP响应。浏览器接收到响应后，开始解析响应的内容。
构建DOM树：浏览器根据接收到的HTML响应内容构建DOM（文档对象模型）树。DOM树表示了页面的结构和层次关系。
加载资源：浏览器根据DOM树中的链接和引用，继续请求加载其他资源，如CSS文件、JavaScript文件和图像等。这些资源的加载和解析将会影响页面的渲染。
渲染页面：一旦浏览器获得所有必需的资源，并完成解析，它会使用DOM树和CSS规则来渲染页面。渲染过程包括布局（计算元素大小和位置）、绘制（将元素绘制到屏幕上）和填充内容（将文本和图像填充到相应的元素中）。
执行JavaScript：如果页面中包含JavaScript代码，浏览器会在渲染过程中执行这些脚本。JavaScript可以操作DOM树和响应用户的交互事件。
用户交互：用户可以与页面进行交互，如点击链接、填写表单、滚动页面等。浏览器会捕获这些交互事件，并触发相应的事件处理程序。
更新页面：如果用户执行了某些操作，导致页面状态发生改变（如内容更新、样式变化等），浏览器会重新渲染受影响的部分，实现页面的实时更新。
添加历史记录：浏览器会在浏览历史中添加当前访问的页面，以便用户可以通过后退按钮导航到之前浏览过的页面。

上述步骤只是对浏览器工作原理的简单概括，实际的浏览器实现会更加复杂，并涉及到诸多优化和安全性考虑。不同的浏览器厂商可能有不同的实现细节和性能特点，但它们都遵循类似的工作原理来呈现Web内容给用户

Typescript

TypeScript是一种开源的编程语言，它是JavaScript的一个超集。换句话说，TypeScript包含了JavaScript的所有语法和特性，并在此基础上添加了额外的静态类型系统和其他一些功能。

TypeScript由微软开发和维护，旨在增强JavaScript的开发体验和可靠性。它通过在JavaScript语法上添加类型注解，并进行静态类型检查，以提供更好的代码编辑器支持、更早地捕获错误和更好的代码组织。这也使得TypeScript适用于大型和复杂的项目，可以提供更好的可维护性和可扩展性。

TypeScript的特性包括：

静态类型系统：TypeScript引入了静态类型系统，开发者可以为变量、函数、类等添加类型注解，使得代码的类型更加明确。类型检查可以发现很多常见的错误，并提供更好的代码自动补全和重构功能。
类和接口：TypeScript支持面向对象编程的特性，如类、继承、接口等。开发者可以使用类和接口来更好地组织代码，并定义和约束数据结构和行为。
ES6+支持：TypeScript对JavaScript的新特性提供了广泛的支持，包括箭头函数、模板字面量、解构赋值等。这使得开发者可以使用最新的JavaScript语言特性，并在旧版JavaScript环境中进行向后兼容。
模块化：TypeScript支持模块化的开发方式，可以使用模块导入和导出等语法进行代码的组织和重用。
强大的工具生态系统：TypeScript具有很好的开发工具支持，包括强大的代码编辑器（如Visual Studio Code）、代码格式化、代码重构、代码检查工具等。
编译时类型检查：在代码构建之前，TypeScript会进行强大的静态类型检查，以捕获潜在的类型错误和逻辑问题。这样可以提早发现和解决问题，并提高代码质量和可靠性。

要使用TypeScript，首先需要使用TypeScript编译器将TypeScript代码转换为JavaScript代码，然后将生成的JavaScript代码在浏览器或Node.js环境中运行。TypeScript还提供了丰富的配置选项，可以自定义编译过程和输出结果。

总而言之，TypeScript为JavaScript开发者提供了更好的工具和语言特性，以提高代码的可读性、可维护性和可靠性。它在大型项目和团队合作中特别有用，但也适用于任何需要更强类型检查和更好代码组织的应用程序。

vue的基础

Vue.js是一种流行的JavaScript框架，用于构建用户界面。它旨在简化Web开发，并提供了响应式数据绑定、组件化架构和简单的API等特性。

下面是一些Vue.js的基础概念和特性：

数据绑定：Vue.js实现了双向数据绑定。这意味着当数据发生变化时，视图会自动更新，反之亦然。开发者可以通过指令或基于表达式的插值绑定数据到HTML模板。

指令：Vue.js提供了丰富的指令集，用于扩展HTML的功能。指令可以通过前缀"v-"来标识，如"v-bind"用于绑定属性和"v-on"用于绑定事件。开发者可以使用这些指令来操作DOM、绑定数据和处理用户交互。

组件化架构：Vue.js将应用程序划分为多个组件，每个组件封装了自己的模板、样式和逻辑。组件可以嵌套使用，并可以通过组件之间的通信来共享数据和功能。这种组件化架构使得应用程序的开发和维护更加模块化和可扩展。

计算属性和侦听器：Vue.js提供了计算属性（computed）和侦听器（watcher）用于处理复杂的数据逻辑。计算属性是基于已有的数据计算出的属性，可以实现缓存和依赖跟踪。侦听器用于观察数据的变化，并在数据发生变化时执行相应的操作。

生命周期钩子：Vue.js提供了一些生命周期钩子函数，用于在组件的不同生命周期阶段执行特定的逻辑。开发者可以在组件创建、更新和销毁等不同的阶段执行相应的操作，如数据初始化、API调用和资源释放等。

事件处理：Vue.js提供了"v-on"指令用于简化事件处理。开发者可以使用"v-on"指令绑定DOM事件，并在事件触发时执行相应的方法。事件处理函数可以访问Vue实例中的数据和方法。

条件渲染和列表渲染：Vue.js提供了条件渲染和列表渲染的指令，可以根据数据的不同状态来动态地展示或隐藏DOM元素。开发者可以使用"v-if"、“v-else”、"v-show"等指令实现条件渲染，使用"v-for"指令实现列表渲染。

这只是Vue.js的一些基础概念和特性，它还有很多其他的功能和扩展，如路由、状态管理、过渡效果等。Vue.js易于学习和使用，并且在构建交互式和响应式的用户界面时非常强大。

vue会被问到的问题？

Vue组件之间的传值如何实现？

参考回答
1）父组件向子组件传递数据
在 Vue 中，可以使用 props 向子组件传递数据。
2）子组件向父组件传递数据
子组件主要通过事件传递数据给父组件
3）子组件向子组件传递数据
Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。
为了便于开发，Vue 推出了一个状态管理工具 Vuex，可以很方便实现组件之间的参数传递

Vuex是做什么的？

参考回答

Vuex是基于Vue框架的一个状态管理库。可以管理复杂应用的数据状态，比如兄弟组件的通信、多层嵌套的组件的传值等等。 Vuex有这么几个核心概念——State、Getter、Mutation、Action、Module。

MVC 与 MVVM 的区别是什么？

1.问题分析

在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且，MVVM中的View 和 ViewModel可以互相通信。

2.核心问题讲解

MVC是Model-View-Controller的简写。即模型-视图-控制器。
M和V指的意思和MVVM中的M和V意思一样。
C即Controller指的是页面业务逻辑。
使用MVC的目的就是将M和V的代码分离。
MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。
MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。

3.结合项目使用

Vue就是基于MVVM模式实现的一套框架，在vue中：

Model指的是js中的数据，如对象，数组等等。
View指的是页面视图
viewModel指的是vue实例化对象

Vue-router实现原理？

前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。

改变浏览器地址而不向服务器发出请求有两种方式：

1）在地址中加入#以欺骗浏览器，地址的改变是因为正在进行页内导航

2）使用H5的window.history功能，使用URL的Hash来模拟一个完整的URL

Hash模式

vue-router默认hash模式，使用URL的hash来模拟一个完成URL，于是当URL改变时，页面不会重新加载

hash(#)是URL的锚点，代表的是页面中的也个位置，单单改的是#后的部分，浏览器只会滚动搭到相应的位置，不会重新加载页面，也就是说hash 出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。 hash 模式的原理是 onhashchange 事件(监测hash值变化)，可以在 window 对象上监听这个事件。

History模式

在配置路由规则的时，加入mode:"history" 这种模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会立即向后端发送请求。

使用路由模块来实现页面跳转

方式1：直接修改地址栏
方式2：this.$router.push(‘路由地址’)
方式3：<router-link to="路由地址"></router-link>

Vue能不能跟后台做交互？

能，可以用resource 和 axios。

vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件，提供了一般的 HTTP请求接口和RESTful架构请求接口，并且提供了全局方法和VUe组件实例方法。

v-model是什么？怎么使用？

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

1）v-bind绑定一个value属性

2）v-on指令给当前元素绑定input事件

自定义组件使用v-model，应该有以下操作：

1）接收一个value prop

2）触发input事件，并传入新值

Vue如何实现按需加载配合webpack设置

实现Vue的按需加载，您可以使用webpack来配合。以下是一般的设置步骤：

首先，确保您已经安装了@babel/plugin-syntax-dynamic-import插件。您可以使用以下命令进行安装：
在您的项目的babel配置文件中（一般是.babelrc或babel.config.js），添加以下配置：
在您的Vue项目中，将组件的异步加载改为按需加载的方式。例如，如果您使用的是Vue Router，可以这样修改路由配置：
最后，使用webpack的配置来处理按需加载的情况。在webpack配置文件中，可以使用babel-plugin-syntax-dynamic-import插件来启用动态导入的支持。下面是一个示例配置：

通过以上步骤，您就可以实现Vue的按需加载了。这样可以提高应用的加载速度，只在需要的时候才加载相应的组件。

Vue2与Vue3的区别

Vue.js 2 和 Vue.js 3 是 Vue.js 框架的两个主要版本，在功能和用法上存在一些区别。

以下是 Vue.js 2 和 Vue.js 3 的一些主要区别：

响应式系统：Vue.js 3 使用了基于 Proxy 的新响应式系统，相比 Vue.js 2 的 Object.defineProperty，它提供了更好的性能和更准确的变化追踪。这使得在 Vue.js 3 中更容易进行深层次的监听和响应式数据处理。
更小的体积：Vue.js 3 核心库的体积更小，相比 Vue.js 2 有更好的包体积优化。这意味着在使用 Vue.js 3 时，可以减少页面加载时间和网络传输的数据量。
静态树提升：Vue.js 3 引入了静态树提升（Static Tree Hoisting）优化技术。它可以在编译阶段检测到静态组件，并将其作为单个片段处理。这将减少运行时生成的代码量，提高了渲染性能。

自定义指令

Vue.js中，你可以自定义指令以扩展其功能。自定义指令允许你直接与DOM元素进行交互，并在元素上添加额外的行为和功能。

要创建一个自定义指令，你可以使用Vue的directive方法。下面是一个简单的例子：

// 注册全局自定义指令
Vue.directive('my-directive', {
  // 指令的生命周期钩子
  inserted(el, binding) {
    // 在元素插入到DOM时触发
    el.style.backgroundColor = binding.value;
  },
  bind(el, binding) {
    // 在元素和指令绑定时触发
    console.log('Directive bound!');
  },
  unbind(el, binding) {
    // 在元素和指令解绑时触发
    console.log('Directive unbound!');
  }
});

在上面的例子中，我们定义了一个名为my-directive的全局指令。该指令有几个生命周期钩子函数，包括inserted、bind和unbind。inserted在元素插入到DOM后触发，可以在这里对元素进行一些初始化操作。bind在元素和指令绑定时触发，可以在这里执行一些绑定时的逻辑。unbind在元素和指令解绑时触发，可以在这里清理一些资源或执行一些解绑时的逻辑。

在模板中使用自定义指令：

<template>
  <div v-my-directive="'red'">Custom Directive Demo</div>
</template>

在上面的例子中，我们在div元素上应用了v-my-directive指令，并传递了一个值为'red'的参数。当指令绑定到元素上时，背景颜色将被设置为红色。

你也可以在组件中局部注册指令，而不是全局注册。这样，该指令只能在该组件中使用。

<script>
export default {
  directives: {
    'my-directive': {
      inserted(el, binding) {
        // ...
      },
      // ...
    }
  }
}
</script>

通过自定义指令，你可以根据需要扩展Vue.js的功能，实现各种自定义行为和交互效果。 3. Composition API：Vue.js 3 引入了 Composition API，这是一个全新的 API 风格，通过 setup() 函数来组织组件逻辑。它提供更灵活的组件组织方式，使得代码更具可读性、复用性和维护性。 4. 更好的 TypeScript 支持：Vue.js 3 提供了更强大的 TypeScript 支持。它增加了更准确的类型推断，提供了更好的类型定义，使开发者在使用 TypeScript 时享受更高的开发效率。

尽管 Vue.js 3 有一些改进和新的特性，但它仍然保留了 Vue.js 2 的大部分核心概念和用法，使得从 Vue.js 2 迁移到 Vue.js 3 相对较容易。

Vue常用的修饰符都有哪些？

Vue.js 提供了一些常用的修饰符，用于改变指令的行为或提供额外的功能。以下是一些常用的 Vue 修饰符：

.prevent：阻止默认事件的发生，通常与事件修饰符一起使用，例如 @click.prevent，阻止点击事件的默认行为。
.stop：停止事件冒泡，阻止事件继续向上传播。
.once：只执行一次事件处理程序。当触发事件后，事件处理程序只会执行一次。
.capture：使用事件捕获模式而不是冒泡模式来处理事件。在冒泡阶段之前处理事件。
.self：只当事件发生在绑定事件的元素本身时才触发事件处理程序。当事件发生在子元素上时，不会触发事件处理程序。
.passive：指定事件监听器是被动的，用于优化移动端的滚动性能。在移动设备上，该修饰符可以阻止滚动触发时的默认阻塞行为。
.native：监听组件根元素的原生事件，而不是组件自身触发的事件。只在使用 .sync 修饰符时才有意义。
.sync：双向绑定一个 prop，提供简写的语法糖。当子组件改变该 prop 的值时，父组件也会同步更新。

这些修饰符可以应用于不同的指令，如事件指令(v-on)、按键指令(v-on:keydown)、表单输入指令(v-model) 等，以实现不同的交互效果和行为。

Vue常用的指令有哪些？并且说明其作用(必会)

Vue.js 提供了一些常用的指令，用于在模板中添加交互和动态功能。以下是一些常用的 Vue 指令及其作用：

v-if：根据表达式的真假条件来条件性地渲染元素或组件。
v-for：循环渲染一个数组或对象的子元素，可配合 v-bind:key 来提供唯一的 key 值。
v-bind（简写为 :）：动态绑定 HTML 的属性值，将表达式的值作为属性值进行绑定。
v-on（简写为 @）：监听 DOM 事件，触发相应的方法或处理函数。
v-model：实现表单元素与 Vue 实例数据的双向绑定，简化表单输入数据的处理。
v-show：根据表达式的真假条件来显示或隐藏元素或组件，通过修改样式 display 属性实现。
v-text：设置元素的文本内容，与插值表达式({{ }})类似，但只会渲染纯文本，不会解析 HTML。
v-html：将绑定的值作为 HTML 解析并插入到元素中，可以渲染包含 HTML 标签的内容。
v-cloak：在 Vue.js 加载完成之前，保持元素隐藏，用于防止页面加载时闪现出未编译的标记。
v-pre：跳过当前元素及其子元素的编译过程，直接展示原始的 Mustache 标签，提高渲染性能。

这些指令在 Vue.js 的模板中使用，通过指令的不同作用，可以实现动态的数据绑定、条件渲染、循环渲染、样式控制、事件监听等交互功能，大大提升了开发效率和可维护性。

Vue中solt的使用方法，以及slot作用域插槽的用法(必会)

使用方法:当组件做标签进行使用的时候，用solt可以用来接受组件标签包裹的内容，当给slot标签添加name属性的时候，可以调换相应的位置插槽作用域:作用域插槽其实就是带数据的插槽，父组件接收来自子组件的slot标签上通过v-bind绑定进而传递过来的数据，父组件通过scope来进行接受子组件传递过来的数据

Vue常用的修饰符都有哪些？（必会）

.prevent:提交时间不再重载页面，.stop:阻止单击事件冒泡，.self:当事件发生在该元素本身而不是子元素的时候会触发，.caoture:事件侦听，事件发生的时候会调佣

为什么避免v-if和v-for用在一起(必会)

当Vue2处理指令时，v-for比v-if具有更高的优先级，通过v-if移动到容器元素，不会再重复遍历列表中的每个值，取而代之的是，我们只检查它一次，而不会在v-if为否的时候运算v-for。 vue3中v-if比v-for具有更高的优先级

粥