八股文合集：
2024ES6八股文，今天你背了吗？

随着从业人数越来越多，用人企业的选择也越来越多，于是就需要通过八股文来初步筛选出合格人才，降低招聘成本。熟记这些八股文并不会让你的技术变得更好，但这是入行标准，回答的上你就能多一分入职机会，回答不上面试官也不会有兴趣了解你的真实技术水平，毕竟问的都是些基础问题，八股文都回答不上来也很难让人相信你的能力。尝试理解它们吧，不要一成不变的去死记硬背，收藏下来在面试路上再加深一下印象吧。加油吧！

Vue2

说说你对双向绑定的理解?

Vue双向绑定是一种非常高效的数据同步方式，它让开发者能够建立起界面视图和数据模型之间的同步。在Vue.js框架中，双向绑定主要是指的是v-model指令，它适用于表单元素（如input、select、textarea等）的数据绑定。

我的理解是，Vue通过数据劫持结合发布者-订阅者模式，实现了双向绑定。在底层实现上，Vue使用Object.defineProperty()方法来劫持各个属性的setter和getter，在数据发生变动时发布消息给订阅者，触发相应的监听回调。

具体来说，当我们在input框中输入内容时，input元素的value属性会被更新，Vue会捕捉到这个变化，并通过v-model绑定的数据模型，更新对应的组件状态。这个过程是“视图到模型”的绑定。相反，当我们在javascript代码中修改了这个状态变量，Vue同样会观察到状态的变化，并自动更新DOM中input元素的显示值，这个过程是“模型到视图”的绑定。这两个过程结合起来便是Vue的双向绑定。

在内部，Vue实现双向绑定的机制是通过虚拟DOM来提高效率的，只有当数据真正发生变化时，才会对应更新DOM，这避免了不必要的DOM操作，提高了应用的性能。

使用双向绑定能够让开发体验更加流畅，且代码更清晰，因为它减少了手动操作DOM的需要，开发者可以专注于数据层面的逻辑。这也是Vue框架受欢迎的原因之一。

说说你对SPA（单页应用）的理解

SPA（单页应用）是一种特殊的Web应用程序或网站,他与传统多页应用(MPA)不同，它通过加载一个单一的HTML页面，并在用户与应用程序交互时动态更新该页面的内容，从而实现与传统的多页应用相比，用户体验更为流畅和响应更快的应用体验。在SPA中，页面不会因为用户的操作而进行整页刷新，只会更新必要的视图部分，由此带来的结果是用户感觉不到页面的跳转和重新加载。

1. 用户体验（User Experience）
   SPA能够提供流畅的用户体验，因为它减少了页面的重新加载。在SPA中，用户的大部分操作都会即时反馈，没有传统多页面应用（MPA）中的刷新等待时间。
2. 前后端分离（Separation of Concerns）
   在SPA中，通常会有一个明显的前后端分离。前端单独处理用户界面和用户交互，而后端通过API提供数据。这种模式方便了前后端团队的独立工作和开发，也使得应用更易于扩展。
3. 数据交互（Data Interaction）
   单页应用通常会使用AJAX或现代的Fetch API与服务端通信，这使得只有数据而不是整个页面需要在客户端和服务器间传输，减少了带宽的使用并提升了速度。
4. 路由管理（Routing）
   在SPA中，虽然只有一个物理页面，但是依然可以模拟出多页面导航的体验。这是通过前端路由来实现的，当URL发生变化时，前端路由会渲染对应的视图，而不是从服务器加载新页面。
5. 性能优化（Performance Optimization）
   SPA需要特别注意到首屏加载性能，因为初始加载可能需要加载更多资源。使用代码分割（code splitting）、懒加载（lazy loading）等技术可以提升SPA的性能。
6. 状态管理（State Management）
   在复杂的SPA中，管理应用中的各种状态（用户输入、服务器响应等）可能会挑战。解决方案如Vuex、Redux等状态管理库能够帮助开发者以一种可预测的方式管理状态。
7. SEO问题（Search Engine Optimization）
   传统的SPA对搜索引擎优化不友好，因为内容是动态加载的，搜索引擎可能无法索引到全部内容。但是这可以通过服务器端渲染（SSR）或静态渲染（Static Generation），比如Next.js和Nuxt.js这类框架来解决。

SPA在提升用户体验方面有巨大优势，但也存在着一些挑战，如SEO优化、首次加载时间优化等。作为一名前端开发者，应该根据应用的需求和目标受众来权衡是否选择SPA模型，并在此基础上进行优化工作。

谈谈v-show和v-if的区别

在Vue中，v-show和 v-if都是用于控制元素显示隐藏的指令，但它们具有不同的工作方式和用途：

v-show：

• v-show指令通过改变CSS的 display属性来控制元素的显示与隐藏。
• 不管初始条件是什么，元素始终会被渲染到DOM中，只是在不满足条件时不可见。
• 它适合用于频繁切换显示状态的场景，因为它不涉及DOM元素的添加和删除，仅仅是样式的改变。

v-if：

• v-if指令则是一种条件渲染，只有当条件为真时，元素才会被渲染到DOM中。
• 如果条件为假，元素不会被渲染到DOM，也就不存在于文档中。
• v-if适合用于条件不经常改变的场景。使用 v-if可能涉及更多的DOM操作，因此对于性能开销较大的场景，应谨慎使用。

简而言之，v-show适合用于频繁切换，而 v-if适合于条件很少改变的情况。当你需要完整地添加或移除元素时使用 v-if，当你仅需要改变元素的显示状态时使用 v-show。在Vue中，v-show和 v-if都是用于控制元素显示隐藏的指令，但它们具有不同的工作方式和用途：

vue实例挂载的过程中发生了什么?

1. 初始化阶段 ：Vue实例开始初始化，处理数据监听(data observer)、计算属性(computed properties)，以及方法(methods)等选项。
2. 编译模板 ：如果提供了模板，这个模板会被编译成渲染函数。如果没有提供模板但指定了挂载元素，Vue会将挂载元素的HTML当作模板来编译。
3. 创建render函数 ：无论是编译模板还是用户提供了render函数，Vue都需要一个render函数来生成虚拟DOM。
4. 触发beforeMount钩子 ：在挂载开始之前，相关的 beforeMount生命周期钩子将被调用。
5. 虚拟DOM的创建与渲染 ：Vue通过render函数生成虚拟DOM，并调用渲染器将虚拟DOM渲染为真实DOM。
6. DOM替换或插入 ：生成的真实DOM将替换挂载元素，或者插入到挂载元素中。
7. 触发mounted钩子 ：一旦完成DOM插入，mounted生命周期钩子将被调用，表明挂载过程结束。

整个挂载过程是Vue实例从开始创建到最终渲染完成的过程，它作为Vue的生命周期的一个部分，确保了组件按照既定的方式被正确编译和渲染到页面上。

说说你对Vue生命周期的理解

Vue.js 的生命周期是指 Vue 实例从创建到销毁的各个阶段，每个阶段都有相应的生命周期钩子函数。作为一名前端开发工程师，我对 Vue 的生命周期有比较深入的理解，并且在日常开发中经常用到它们来执行相关操作。以下是我对 Vue 生命周期的理解：

1. beforeCreate : 这个阶段发生在 Vue 实例被完全初始化之前。在 data 和 methods 被设置之前执行，不能访问 this 中的数据和方法。
2. created : 在这个阶段，Vue 实例已经创建，data 和 methods 已经被初始化好了。此时可以进行 API 调用、数据计算、watch/event 事件的设置。
3. beforeMount : 在挂载开始之前被调用。相关的 render 函数首次被调用。此时模板中的元素已经编译好，但还没有挂载到 DOM 中。
4. mounted : 这个阶段表示组件已经挂载到 DOM 上，可以进行 DOM 操作或者设置定时器等异步操作。
5. beforeUpdate : 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子中进一步更改状态，这不会触发额外的重新渲染过程。
6. updated : 在数据变更导致的虚拟 DOM 重新渲染和打补丁之后会调用这个钩子。当这个钩子被调用时，组件 DOM 已经更新，可以执行依赖于 DOM 的操作。
7. beforeDestroy : Vue 实例销毁之前调用。在这一步，实例仍然完全可用，可以进行一些清理操作。
8. destroyed : Vue 实例销毁后调用。监听器被移除，子实例也被销毁。

这些生命周期钩子为我提供了在不同阶段管理组件、资源和数据的能力，使我能够有效地控制应用的行为和性能。

watch和watchEffect有什么区别

Vue 中，watch 和 watchEffect 是用来观察和响应 Vue 实例上数据变化的两种不同方式，它们有以下区别：

1. 定义方式 ：

• watch 需要显式地指定一个或多个要观察的数据源，并且对其变化做出响应。它类似于 Vue 2 中的 watch 选项。
• watchEffect 不需要指定观察的数据源。它会自动追踪执行过程中所有响应性依赖，并在其中任何依赖变更时重新运行。

2. 应用场景 ：

• 使用 watch 更适合那些当特定数据变化时才需要运行的场景。它允许访问变更前后的值，并且可以进行更精细的控制。
• watchEffect 适用于响应式依赖频繁变化的情况，它会自动处理依赖收集，通常用于副作用的场景，如同步更新 DOM、发送请求等。

3. 使用方式 ：

• watch 要求传入要观测的数据源，以及一个回调函数，当观测的数据发生变化时，回调函数就会被执行。
• watchEffect 只需要一个函数作为参数，该函数内部使用到的所有响应式状态都会被追踪。

4. 灵活性 ：

• watch 在诸如停止监听、获取旧值和新值等方面提供了更多控制。它还支持异步操作，并可以结合其他选项进行更复杂的数据监听。
• watchEffect 通常不需要手动停止监听，因为它会在组件卸载时自动停止。它始终与组件声明周期保持同步。

5. 清理副作用 ：

• watch的回调函数可以返回一个清理副作用的函数，以便于在 watcher 被重新调用之前清理或撤销副作用。
• watchEffect 可以在其接收的函数内部调用一个特殊的函数 onInvalidate 来注册清理副作用的回调。

总之，watch 提供了更多的控制能力，适合于需要更细粒度反应变化的场景，而 watchEffect 则适合于不需要精确控制或响应多个数据源变化的场景。根据具体的应用需求选择不同的方法。

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

因为在Vue组件中，每个组件实例都应该维护一份被返回对象的独立的拷贝，作为自己的状态。如果data是一个对象，则意味着所有的组件实例将共享同一个data对象，那么一个组件实例对data对象的修改，将影响到所有组件实例，通过使用一个函数返回数据对象的方式，Vue在初始化组件实例时会调用data函数，从而保证每一个组件实例都可以获取到一份独立的数据副本，这样组件之间的数据就不会相互影响了。所以，在Vue组件中定义data时要用一个函数来返回一个初始数据对象，这是Vue设计的一部分，以确保组件数据的独立性和可复用性。

Vue组件之间的通信方式都有哪些？

1. Props 和 Events（父子组件通信） ：在 Vue 中，最常见的组件间通信方法是通过 props 和 events。父组件通过 props 向子组件传递数据，子组件通过事件触发的方式将数据传回父组件。
2. 通过 Vue 实例或 Event Bus（兄弟组件通信） ： 可以创建一个新的空的 Vue 实例作为中央事件总线（event bus）。在一个组件内部用该实例触发事件，在另一个组件内部用该实例监听事件。
3. Vuex（全局状态管理） ： Vuex 是 Vue 官方提供的状态管理库，可以实现组件全局状态（state）管理。在 Vuex 中，单一状态树允许我们直接定位任一特定的状态片段，在进行组件通信时很有用。
4. $parent / $children 和 refs（父子组件通信） ：我们可以在某个子组件内通过 $parent 访问父组件实例，也可以在父组件内通过 $children 访问所有子组件实例，以实现父子通信。此外，如果你需要在 JavaScript 里直接访问子组件，可以使用 ref 为子组件指定一个引用 ID，然后使用 $refs 访问。
5. provide 和 inject（跨级组件通信） ：provide 和 inject 主要解决了嵌套组件之间的通信问题，祖先组件通过 provide 选项来提供变量，然后在它的后代组件中可以通过 inject 选项开始使用这些变量，无论中间隔了多少层。

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

在 Vue.js 中，组件（Component）和插件（Plugin）有着不同的用途和概念：

组件（Component） ：

• 组件是 Vue.js 的一个核心概念，它们是可复用的 Vue 实例，通常用来构建界面上的可交互元素。每个组件都有自己的模板、逻辑和样式。
• 组件可以接收外部数据作为 props 并发出事件通知它们的父组件。它们可以有自己的生命周期钩子，并且可以嵌套使用创建复杂的页面结构。
• 一个 Vue 组件可以是一个简单的单文件组件（.vue）或一个由对象构成的 Vue 扩展实例。

插件（Plugin） ：

• 插件通常是用来为 Vue 添加全局功能的。插件可能会添加全局方法或属性，也可能扩展 Vue 构造器，甚至通过全局混入 (mixins) 添加组件选项。
• 插件的范围不限于组件内部，可以用来为 Vue 应用添加新的功能，如路由（vue-router）、状态管理（vuex）或自定义指令。
• 使用插件通常需要在 Vue 应用创建之前通过 Vue.use() 方法安装插件。

总结：组件是 UI 的构建块，用于创建页面和可复用的界面元素，而插件则用来扩展 Vue 应用的功能，它们影响着 Vue 应用的更多全局层面。

Object.defineProperty和Proxy 的区别在哪里呢？

bject.defineProperty 和 Proxy 都是 JavaScript 中的特性，它们提供了不同的方式来拦截和定义对象的行为。以下是两者的主要区别：

1. 拦截能力 :

• Object.defineProperty 只能拦截对属性的访问和设置操作，不能拦截其他操作，例如属性的删除、对象属性的遍历等。
• Proxy 能拦截多达 13 种不同的对象操作，包括属性的读取、设置、枚举、删除等，以及更多高级操作，如有对象原型的变更、函数调用等。

2. 使用方式 :

• Object.defineProperty 需要直接在一个已有的对象上操作定义属性。
• Proxy 在目标对象外部创建一个新的代理对象，不直接操作原始对象，而是通过这个代理对象来管理对原始对象的所有访问。

3. 性能 :

• 对于 Vue.js 的使用情境而言，Object.defineProperty 对于大量属性的对象可能会有性能问题，因为需要递归遍历对象的每个属性。
• Proxy 可以更高效地处理嵌套对象和数组等情况，因为只有当访问到某个属性时，才会对该属性做代理处理。

4. 灵活性和动态性 :

• Object.defineProperty 不能监测到属性的添加和删除，一旦定义了 getter 和 setter，就无法添加新的响应式属性，除非再次调用 Object.defineProperty。
• Proxy 可以轻松地监测到对象结构的任何变化，包括属性的添加和删除。

5. 浏览器兼容性 :

• Object.defineProperty 更早被引入，从 ES5 开始支持，有更好的浏览器兼容性。
• Proxy 是在 ES6 中新增的特性，不支持 IE 浏览器等老版本浏览器。

综合来说，Proxy 提供了一种更为灵活且功能更强大的方式来创建响应式对象，因此在 Vue3 中被选用作为新的响应式系统的基础，而 Object.defineProperty 则因为其存在的限制，在新的系统中已经不再使用。

Vue中的$nextTick有什么作用？

Vue中的 $nextTick是一个非常有用的实例方法，它的作用是用来在下次 DOM 更新循环结束之后执行延迟回调。在修改了某些数据后，我们想要基于新的 DOM 状态执行某些操作，这个方法就非常有用。

举例来说，Vue的数据绑定是异步的。当你修改了某个数据，视图不会立即重新渲染，Vue开启了一个异步队列，并缓存当前帧内所有的数据变更。在下一 tick 中，Vue 刷新队列并执行实际（已去重的）工作。$nextTick就是用来知道何时这个 DOM 更新已经完成，并在这之后执行你想要的操作。

在日常开发中，我们可能会在数据变更之后需要操作更新后的DOM元素，比如获取一个列表渲染后的高度，此时可以在 $nextTick的回调中获取，以确保DOM已经更新。

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

keep-alive是Vue中的一个内置组件，它可以用来缓存非活动组件的实例，防止重复渲染以提高性能。我的理解如下：

1. 组件状态保持 ：keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。这样，用户切换回缓存的组件时，组件状态将会保留，如滚动位置、用户输入等。
2. 性能优化 ：当组件在频繁渲染的情景下（例如切换标签页），使用 keep-alive可以避免重新创建组件实例，节省性能开销。
3. 生命周期钩子 ：keep-alive会影响内部组件的生命周期钩子。被缓存的组件不会再触发 destroyed钩子，而是会触发 deactivated钩子；当组件再次激活时，会触发 activated钩子。
4. 包含与排除 ：keep-alive提供 include和 exclude属性，允许组件根据组件名被缓存或不被缓存。这提供了更细致的控制，可以缓存某些组件，而让其他组件每次都重新渲染。
5. 最大缓存数 ：通过设置 max属性，可以指定 keep-alive能够缓存的最大组件实例数目。超过这个数目时，最久未访问的组件缓存将会被丢弃。
6. 典型应用场景 ：keep-alive常见于如标签页切换、路由切换中不需要每次都重新加载的场景，例如一个复杂的列表页，如果没有 keep-alive，每次切换回来时都需要重新发送请求获取数据并渲染。

在实践中，虽然 keep-alive能有效提升应用的性能，但也需要合理使用，因为过多的缓存可能导致内存占用过高。同时，需要注意管理好缓存的组件状态和及时清理不必要的缓存，以保证应用的稳定与高效。

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

在Vue中，key是一个特殊的属性，它主要用在Vue的虚拟DOM算法中，在处理动态子节点时，用于标记节点的唯一性，从而优化虚拟DOM的重新渲染过程。

我的理解如下：

1. 身份标识 ：key为每一个节点提供了一个独一无二的身份标识，让Vue能够跟踪每个节点的身份，这在动态节点（例如列表中的每个条目）的增加、删除或顺序更改时特别有用。
2. 重用和重排 ：带有 key的元素会基于它们的 key进行比较，这意味着当节点顺序改变而不是内容改变时，Vue可以简单地移动DOM元素的位置来匹配数据列表的顺序，而不是销毁后重新创建它们。
3. 重绘和复用 ：如果一个元素的 key改变了，Vue会认为这个元素是一个全新的元素，因此它会销毁旧元素并重新创建、插入新元素。这可以防止一些不必要的渲染造成的问题，例如，当使用组件列表时，子组件状态可能不希望被保留，这时改变 key可以重置组件状态。
4. 性能优化 ：在使用 v-for渲染列表时，为每一项设置唯一的 key可以提高更新的性能，避免不必要的DOM操作，特别是在列表的数据经常发生变化的情况下非常有效。
5. 注意事项 ：如果不使用 key，Vue会使用“就地更新”的策略，即如果可能的话，尽量就地复用相同类型的元素，而不考虑它们是否是同一个实例。在某些情况下，这可能导致渲染错误或不一致的DOM状态，如表单元素可能保留旧的输入值。

因此，要正确且高效地使用Vue，理解并妥善运用 key是非常重要的。尤其是在处理列表和动态组件时，合适的 key能够显著地改善应用程序的性能及行为。在Vue 3中，key的作用和原理保持一致，依然是Vue应用中一个不可或缺的重要部分。

Vue常用的修饰符有哪些有什么应用场景 (名字自己取的,方便记忆,回答五个左右就可以了)

Vue 中的修饰符是一些特殊的后缀，用于指示 Vue 对特定的指令进行特殊处理。以下是一些常见的Vue修饰符及其应用场景：

0. v-bind修饰符,简写":",最常用的修饰符,没有之一 ,用法有四种（vue3新增.attrName）:

//1. .sync修饰符可以自动监听子组件触发的更新事件，并更新父组件中绑定的值。它对于双向绑定非常有帮助。
//父组件
<child-component :foo.sync="bar"></child-component>
//子组件
this.$emit('update:foo',123);
//子组件触发update:foo事件，父级的bar属性将会被更新为123
//注意:使用sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致

//2. .prop修饰符可以将值绑定到DOM元素的property上，不是attribute。这在处理像input元素的value这样的属性时非常有用。
<input :value.prop="message" />//这里将Vue数据属性message的值绑定到input元素的value property上。

//3. .camel由于HTML属性不区分大小写，使用.camel修饰符可以确保我们在使用JavaScript对象时属性名能正确地保持驼峰命名法。
<svg :view-box.camel="viewBoxSize"></svg>
//上述代码中，viewBoxSize 数据属性将会绑定到SVG的viewBox属性，注意HTML中是不区分大小写的，所以我们需要.camel修饰符来确保驼峰命名法。

//4. .attrName Vue3中的.attrName 修饰符允许我们动态地决定要绑定到哪个属性名。
<template>
  <input :[dynamicAttr]="dynamicValue" />//<input type="number" />
</template>

<script>
export default {
  data() {
    return {
      dynamicAttr: 'type', // 这里我们设定动态属性名为 'type'
      dynamicValue: 'number' // 这个值将会被赋予到上述动态属性上
    }
  }
}
</script>
 
 //在这里，dynamicAttr是一个数据属性，它的值可能是 "type","value","disabled" 等。这个值将会决定实际绑定到 input元素的哪个属性上，dynamicValue是绑定到该属性的值。上面的代码编译后的结果为<input type="number" />

6. .prevent - 阻止默认事件修饰符。常用于 <form>标签上，用于阻止表单默认提交行为。
   应用场景：表单提交时阻止页面跳转。

<form v-on:submit.prevent="onSubmit"></form>
//阻止事件默认行为，相当于调用`event.preventDefault`方法

7. .stop - 阻止事件冒泡修饰符。常用于点击事件上，避免触发父元素相同事件。
   应用场景：在嵌套的元素事件中，防止同类型事件向上冒泡。

<div @click="shout(2)"><button @click.stop="shout(1)">ok</button></div>//只输出1
 //  阻止事件冒泡，相当于调用`event.stopPropagation`方法

8. .capture - 事件捕获模式修饰符，即元素自身触发的事件先在此处理，再向下冒泡。
   应用场景：在某些情况下，需要先于子元素捕获事件。
9. .self - 本源触发修饰符
   应用场景：避免不是直接触发在元素上的事件调用方法。

<div v-on:click.self="doThat">...</div>
//   只当在 event.target 是当前元素自身时触发处理函数

10. .once - 单次事件修饰符
    应用场景：例如，某个按钮点击后只能触发一次操作。
11. .passive - 滚动优化修饰符，表示不会调用 event.preventDefault()。
    应用场景：用在滚动事件的监听上，提高页面的滚动性能。

<div v-on:scroll.passive="onScroll">...</div>
 //  在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步

12. .number - 数转修饰符 自动将用户的输入值转为数值类型。
    应用场景：当需要获取的表单域值类型为数值时。

 <input v-model.number="age" type="number">
//    自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值

13. .trim - 去空修饰符 自动过滤用户输入的首尾空白字符。
    应用场景：格式化用户输入，去除不必要的空白字符。

<input type="text" v-model.trim="value">
//   过滤用户输入的首空格字符，而中间的空格不会过滤

14. .left,.right,.middle 鼠标修饰符,分别表示左右中键点击事件

<button @click.left="fun(1)">鼠标左键点击</button>
<button @click.right="fun(2)">鼠标右键点击</button>
<button @click.middle="fun(3)">鼠标中键点击</button>

15. .native (vue3中已移除) 原生修饰符,用于监听一个组件根元素上的原生事件。通常，在 Vue 中使用 v-on监听事件时，如果没有特别指定，你监听的是组件实例发出的自定义事件，而不是 DOM 上的原生事件。如果你需要在父组件中监听一个子组件的根元素上的原生事件，这时你可以使用 .native 修饰符。

<my-button v-on:click.native="doSomething">Click me </my-button>

在这里，.native修饰符告诉 Vue，你想监听的是子组件根元素的原生事件，而不是子组件内部使用 $emit发出的 Vue 事件。
17. .lazy 延迟修饰符在表单输入(v-model)时，使用 lazy修饰符使数据同步发生在 change事件而非 input。
应用场景：当你想延迟同步输入框的数据到数据模型时使用。
例:<input type="text" v-model.lazy="value">
在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步。
18. keyup 键盘修饰符 键盘修饰符是用来修饰键盘事件（onkeyup，onkeydown）的，
例:<input type="text" @keyup.13="fn()">
按下回车(keycode=13)触发

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

自定义指令在Vue中是一个非常强大的特性，它允许我们对DOM元素进行直接的低层次操作，而不是仅仅通过数据来驱动改变。
自定义指令的应用场景包括但不限于：
Dom 操作：当需要直接操作DOM，如设置焦点、改变元素的大小、绑定事件监听器或进行复杂的动画效果时，通过自定义指令可以直接实现这些操作。
代码复用：如果在多个组件中需要实现相同的DOM操作或者某种行为，可以封装在自定义指令中以提高代码的复用性。
第三方库集成：有时候需要在Vue中集成不是响应式设计的第三方库，这种情况下，可以通过自定义指令将这些库更加方便地绑定到DOM元素上。
权限控制：可用于实现前端的简单权限控制逻辑，比如某些按钮或链接只能由特定用户看到或点击，可以通过自定义指令动态地添加或者移除这些元素。
复杂表单交互：例如，在用户输入内容时，实时根据某些规则进行验证或格式化（例如货币格式化），自定义指令可以在用户输入的过程中提供即时反馈。
举个例子，我曾经写过一个自定义指令v-focus，它的作用是页面加载完毕后，自动聚焦到指定的输入框中，提升用户体验。这就是自定义指令非常实用的一个场景。具体实现步骤如下:

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中时...
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  }
})
//然后我们可以在模板中这样使用这个自定义指令：
<input v-focus>

只要这个input元素被插入到DOM中，它就会自动聚焦。这样不仅使得代码更加清晰，还能复用相关的功能。

Vue中的过滤器了解吗？过滤器的应用场景有哪些？(vue3已废弃)

在Vue中，过滤器（Filters）是一些可以用在模板表达式中的特殊函数，主要用于文本格式化。它们可以用在双花括号插值和v-bind表达式中，过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号表示。
举例来说，如果我们有一个日期时间戳，我们可能想要在显示之前格式化它。我们可以写一个过滤器来做这件事情：

filters: {
  formatDate(value) {
    if (!value) return '';
    // 这里使用了moment.js库来格式化时间
    return moment(value).format('YYYY-MM-DD HH:mm:ss');
  }
}
//然后在模板中，我们可以这样使用这个过滤器：
<span>{{ timestamp | formatDate }}</span>
//在这个示例中，管道符 | 起到的作用是指明后面跟随的是一个过滤器。在Vue中，管道符用于将数据传递给过滤器函数，并将其作为第一个参数。
//过滤器函数可以接受额外的参数，如果需要的话，可以在过滤器名之后通过管道符继续传递。
//timestamp 是要处理的原始数据，管道符 | 告诉Vue接下来将使用名为 formatDate 的过滤器来处理这些数据。
//formatDate 是定义在组件的 filters 对象中的一个方法，它会接收 timestamp 作为输入参数，处理后返回格式化的日期字符串，这个字符串随后将展示在页面的 <span> 元素之内。

Vue中过滤器的应用场景包括：

• 日期、时间格式化：如上所示，可以将时间戳转换为更可读的日期格式。
• 文字截断：创建一个截短文字并添加省略号的过滤器，用于长文本的预览显示。
• 货币格式化：将数值转换显示为货币格式，如将1000转换成$1,000.00。
• 大小写转换：将文本的字母转换成全大写或全小写。
• 自定义文本格式：比如添加前缀、后缀，或者其他自定义文本操作。

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

虚拟DOM（Virtual DOM）是对真实DOM的抽象表示，它是一个轻量级的对象，作为在内存中的DOM的副本。在Vue、React这样的现代前端框架中，虚拟DOM被用于提高渲染效率和优化性能。因为直接操作DOM是非常消耗性能的，使用虚拟DOM可以减少不必要的DOM操作次数，只在必要的时候进行更新。
虚拟DOM实现的基本思路如下：
创建虚拟节点(VNode): 创建一个简单的JavaScript对象来描述一个DOM节点的结构，包括其标签名、属性和子节点等。例如，一个表示<div>元素的VNode可能包含一个标签属性（tagName）为"div"，以及子节点列表。
渲染函数(render function): Vue组件中有一个render()函数，它会返回VNode。它的作用是将组件的状态（响应式数据）映射到虚拟节点上。
虚拟DOM树: 通过递归地调用render函数来建立整个组件树的虚拟DOM结构。
Diff算法： 当组件状态发生变化时，Vue会生成一个新的虚拟DOM树，并和上一次的树进行比较。这个过程称为Diff，Diff算法会找出两棵虚拟DOM树的差异。
打补丁（patching）: 根据Diff算法的结果，计算出真实DOM需要做的最小单位更改，然后应用这些更改到真实的DOM上，这个过程称为打补丁。
要实现一个简单的虚拟DOM，可以遵循这几个步骤：

1. 定义虚拟节点： 定义一个VNode类或对象工厂函数，其中包含节点类型、属性、子元素等。

  class VNode {
      constructor(tagName, props, children) {
          this.tagName = tagName;
          this.props = props;
          this.children = children;
      }
  }

2. 编写渲染函数： 实现一个将组件状态转换为虚拟节点的函数。

 function render() {
     return new VNode('div', { id: 'app' }, [
         new VNode('p', {}, ['Hello, Virtual DOM'])
     ]);
 }

4. 实现Diff算法： 编写一个Diff函数，它接受两个虚拟节点，并找出它们之间的差异。

 function diff(oldVNode, newVNode) {
     // ...比较虚拟节点的差异，并返回差异结果
 }

5. 实现patch函数： 根据diff的结果更新实际的DOM。

  function patch(parent, diffs) {
      // ...根据diffs来更新DOM
  }

你了解过vue的diff算法吗？说说看

Vue 的 diff 算法是其虚拟 DOM 实现中的一部分，旨在找出新旧虚拟 DOM 树之间的最小差异，然后高效进行 DOM 更新。这个算法是基于以下几个核心思想：

1. 同层比较：Vue 的 diff 算法只进行同层级节点的比较，不跨层级进行比较。即使是完全相同的节点，如果位置移动到不同层级，也会被删除和重新创建，而不是移动。这种假设大幅降低了算法复杂性，也符合大多数 UI 更新的场景。
2. 双端比较：在比较同一层级的一组子节点时，Vue 会采用双端比较的策略。即它同时从旧节点和新节点的两端开始进行比较。如果两端的开始节点或结束节点相同（即使得 key 和 tag 相同），可以直接认为它们是相同的节点，从而快速确定它们的位置，减少 DOM 操作。
3. key 的重要性：Vue 中的列表渲染推荐使用 key 来提供一个唯一的标识符，这可以帮助 Vue 更快的确定两个节点是否相同。借助 key，Vue 在比较过程中可以更加准确且快速地找出子节点间的差异，实现更有效的更新。
4. 尽可能复用节点：Vue 在 diff 过程中会尽可能地复用 DOM 节点。例如，如果类型（tag）和 key 值相同的节点在新旧两棵树中能够对应起来，Vue 将会复用旧节点，同时更新必要的属性或内容，而不是替换整个 DOM 节点。
5. 移动检测：如果经过上面的比较后仍有未处理的节点，Vue 会进一步检测节点是否移动。Vue 通过建立一个 key 到旧节点索引的映射来进行快速的查找，并确定是否需要移动节点。
6. patch：在确定节点差异后，Vue 会生成一个 patch 函数，具体来执行 DOM 的更新操作。这个操作会尽量减少对 DOM 的直接操作以优化性能。

Vue 的 diff 算法通过以上优化策略，能够在 DOM 更新过程中，以较高的效率找出最小的变更，从而减少对 DOM 的操作，提高应用性能。

SSR解决了什么问题？有做过SSR吗？你是怎么做的？

SSR，即服务器端渲染(Server-Side Rendering)，解决了以下问题：
首屏加载性能提升：客户端不需要等待所有的JavaScript都加载完毕才能呈现页面，服务器直接发送渲染后的HTML页面，减少了首屏加载时间。
搜索引擎优化（SEO）：由于搜索引擎更容易抓取渲染后的HTML页面，SSR可以提升应用的可搜寻性。
减轻浏览器负担：由于部分页面渲染在服务器端完成，客户端所需处理的工作相比单页应用（SPA）减少了。

我有过服务器端渲染的实践经验。在我之前的工作中，我负责了XXX项目的SSR。下面是我实现SSR的方法：
我在这个项目中采用了Nuxt.js框架，这是一个基于Vue.js的高级框架，它内置了服务器端渲染功能。
在项目创建时，我选择Universal模式，它支持SSR和客户端渲染。
为了保证数据的同步，我使用了Vuex进行状态管理，并设计了服务端和客户端通用的获取数据的逻辑。
在服务端渲染期间，我利用了Nuxt.js的asyncData方法或Vue组件内的fetch方法，这些方法会在服务器端渲染过程中被调用，以获取和填充页面需要的数据。
为了提高性能，我使用了Node.js作为服务器，并通过Nuxt.js的构建优化，来最小化JavaScript包的大小。
我还将服务端生成的静态资源如CSS、JavaScript文件配置了CDN，进一步提高了页面的加载速度。
最后，我确认了Meta标签和链接的正确性，以保证SEO的优化生效并通过用户代理检测实现针对爬虫的服务端渲染优化。
通过上面的步骤，我成功提升了网站的性能和SEO效率，同时确保了用户的快速访问体验和搜索引擎的友好抓取。

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

在Vue项目中解决跨域问题，常见的方法有以下几种：
开发环境中使用代理：
在Vue项目中，常使用vue.config.js配置文件中的devServer.proxy选项来设置代理。
通过这种方式，开发服务器会在后台将请求转发至指定的服务器地址，从而绕过浏览器的同源策略。
例如，可以这样设置vue.config.js文件：

module.exports = {
     devServer: {
       proxy: {
         '/api': {
           target: 'http://target.server.com',
           changeOrigin: true, // 是否改变源地址
           pathRewrite: { '^/api': '' } // 路径重写
         }
       }
     }
   };

后端设置CORS（跨源资源共享）:
请求服务器可以在服务器端设置响应头Access-Control-Allow-Origin，允许特定的域名或者任意域名访问。
例如，如果使用的是Express框架，可以这样设置：

app.use((req, res, next) => {
     res.header('Access-Control-Allow-Origin', '*'); // 允许任何源
     res.header(
       'Access-Control-Allow-Headers',
       'Origin, X-Requested-With, Content-Type, Accept, Authorization'
     );
     if (req.method === 'OPTIONS') {
       res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, GET');
       return res.status(200).json({});
     }
     next();
});

JSONP（只支持GET请求）:
主要利用<script>标签没有跨域限制的特性，通过动态创建<script>来发送带有回调函数的GET请求。
需要后端配合输出JSONP格式的响应。
使用nginx配置反向代理:
在生产环境中，可以在nginx服务器上配置反向代理来实现跨域。
例如，可以这样在nginx配置文件中设置：

server {
  listen       80;
  server_name  localhost;

  location /api/ {
    proxy_pass http://target.server.com; # 真实请求地址
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
  }
}

使用CORS Anywhere等代理服务器:
CORS Anywhere是一个Node.js代理，可以在任何地方添加CORS头。可以部署自己的CORS Anywhere服务器或使用公共服务器。
在实践中，常根据具体的开发需求和部署环境选择合适的方式来解决跨域问题。在开发阶段通常采用本地代理的方式，而在生产环境下更推荐使用CORS或反向代理等解决方案。

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

Vue项目在本地开发完成后部署到服务器，出现404错误通常可能是以下原因：
服务器配置问题：
如果是单页面应用（SPA），需要正确配置服务器，以便对于所有的访问都返回index.html。否则在刷新页面或直接访问非根URL时会出现404错误。
资源路径问题：
打包后的文件路径可能不正确。如果Vue项目中配置的publicPath不正确，或者服务器上部署的目录结构和开发环境不一致，资源文件可能没有被正确引用。
资源未正确部署：
需要确认所有生成的文件是否都已经正确上传到了服务器。检查打包后的文件是否全部上传，且目录结构是否保持一致。
路由模式问题：
如果项目使用了Vue Router，并且采用了history模式，刷新页面或直接访问路由链接可能导致404错误，因为该模式依赖服务器配置进行URL的重写。
文件权限问题：
上传到服务器的文件权限可能不正确。需要确保服务器具有正确的文件访问权限。
缓存问题：
浏览器或服务器的缓存可能导致更改后的内容未能正确显示，可以尝试清除缓存再次访问页面。
针对上述可能的原因，可以进行以下几个步骤的排查和解决：

• 核实服务器配置，确保对于SPA可以正确地返回index.html。例如，在Nginx中可能需要添加如下配置：

location / {
  try_files $uri $uri/ /index.html;
}
# 改完配置文件后记得重启nginx服务
nginx -s reload

• 检查vue.config.js文件中的publicPath配置是否正确，确保与服务器部署路径一致。
• 确认所有资源文件是否已经上传到服务器的正确位置。
• 如果使用history路由模式，确保服务器配置了正确的URL重写规则。
• 确定服务器上文件和目录的读写权限设置是否正确。
• 尝试清除浏览器和服务器的缓存。

你使用过TypeScript吗?能说说它与JavaScript的区别吗?

当然，我有使用TypeScript的经验。TypeScript是JavaScript的一个超集，它在JavaScript的基础上增加了一些特有的特性，主要的区别包括：
类型系统：
TypeScript引入了静态类型检查，可以在编写代码时检查类型错误。这可以大大减少运行时的错误，提升代码的质量和可维护性。
在JavaScript中，类型是动态的，并且不提供静态类型检查。
编译时错误检查：
由于TypeScript的类型系统，大多数类型错误会在编译阶段被捕捉到，而不是在运行时。这加快了错误的发现和修复速度。
JavaScript中的错误大多数在运行时发现，这可能导致生产环境中的bug。
类型注解和类型推断：
TypeScript允许开发者为变量、函数参数和返回值等指定类型。如果没有指定类型，TypeScript也能够根据代码上下文自动推断出类型。
JavaScript不支持类型注解，它是一个纯动态类型语言。
接口和枚举：
TypeScript支持接口（Interfaces）和枚举（Enums），这有助于构建更加严谨和可维护的代码结构。
JavaScript的ES6之前并没有接口的概念，虽然ES6加入了Class，但是并没有Enum。
更广泛的工具集成：
TypeScript因为其类型特性，使得IDE和代码编辑器可以提供更好的代码补全、重构和智能导航。
JavaScript的编辑器支持通常不会那么强大，特别是在处理大型代码库时。
Generics（泛型）：
TypeScript支持泛型，这允许开发者编写可重用的组件，而这些组件能够支持多种类型的数据。
JavaScript本身不支持泛型。
命名空间和模块：
TypeScript提供了命名空间和模块，更方便地组织和封装代码。
虽然JavaScript现在有了模块的概念，但在此之前，代码封装和模块化一直是一个问题。

综上所述，TypeScript在JavaScript的基础上增加了强类型系统和丰富的面向对象特性，这使得代码更易于管理和维护，尤其是在大型项目或是多人合作的项目上。而JavaScript则是一种更自由、动态的语言。一些开发者更喜欢JavaScript的灵活性，而另一些则倾向于TypeScript所提供的结构和安全性。

Vue3

vue3有了解过吗？能说说跟vue2的区别吗？(回答四个以上)

是的，我有了解Vue 3，并且有过使用Vue 3的实践经验。Vue 3带来了许多新特性和改进，下面是与Vue 2相比较著的几个区别：

1. 性能提升：

   • Vue 3提供了更好的性能，其中包括更小的打包体积、更快的虚拟DOM重写以及更高效的组件初始化。

2. Composition API(组合式API)：

   • 引入了Composition API作为Options API的补充，让逻辑复用和组织更加灵活，它提供了setup函数、reactive、ref等新概念，使得代码结构和逻辑抽象更加清晰。

3. 响应式和侦听改进：

   • Vue 3使用Proxy替代了Object.defineProperty，可以捕获更多类型变化，并且没有了Vue 2响应式系统的一些限制（比如需要预先定义响应式属性）。

4. 更好的TypeScript支持：

   • Vue 3从架构上设计时就考虑到了TypeScript的支持，使得在Vue中使用TypeScript更为顺畅，它提供了更好的类型推断，并且Composition API非常适合与TypeScript一起使用。

5. 新的组件API：

   • Fragment（多个根节点）、Teleport（内容传送）、Suspense（异步组件等待）等新组件API的引入，在页面组织和功能实现上提供了更多的灵活性。

6. 模板和渲染函数改进：

   • Vue 3允许模板中直接使用v-if、v-for等指令以及多个根节点，而Vue 2中模板必须有一个单一的根节点。
   • 渲染函数API也有所改进，结合Composition API，渲染函数变得更加强大和灵活。

7. 自定义渲染器（Renderer）：

   • Vue 3提供了创建自定义渲染器的API，允许开发者对渲染过程有更深入的控制，这对于做跨平台开发特别有益。

8. 内置模块化：

   • Vue 3在内部将功能分割成模块，使得按需引入变得更加容易，有助于减少最终应用体积。

9. 更细致的变更侦测：

   • Vue 3通过引入effect scope的概念，可以更精细地控制effect的生命周期，避免了不必要的重复渲染。

在实践中，Vue 2的项目可以逐步升级到Vue 3，以便利用更高效的性能和更多的新特性。同时，Vue 3也致力于保持与Vue 2的兼容性，其中的迁移构建版本（Migration Build）提供了从Vue 2迁移到Vue 3的兼容性支持。

Vue3性能提升主要是通过哪几方面体现的？(四个以上)

Vue3的性能提升主要体现在以下几个方面：

1. 响应式系统升级：Vue3使用了Proxy对象重写了Vue的响应式系统，替代了Vue2中的Object.defineProperty。这使得Vue3的响应式系统更加高效和强大，能够监听动态新增的属性和删除属性的操作，同时也减少了初始化时的内存开销。

2. 编译优化：Vue3的编译器进行了重构和优化，新增了编译时的静态树提升（tree-shaking）特性，可以静态分析模板中的常量并进行优化，减少了运行时的开销。

3. Patch算法的优化：在虚拟DOM的diff算法中，Vue3提供了基于静态节点的快速路径，只对动态节点进行比对，从而降低了组件更新的性能成本。

4. 组件挂载的优化：Vue3引入了Fragment（片段），可以避免额外的根节点，这样在挂载组件时会更简洁，避免了不必要的DOM层级嵌套和操作，提升了性能。

5. 组件初始化的优化：Vue3中的组件初始化过程也进行了优化，通过setup函数初始化组件，减少了对冗余属性的追踪和开销，使得组件初始化更高效。

6. Composition API的引入：引入了Composition API来代替原有的Options API，允许开发者更灵活地组织组件逻辑，提高代码复用并减少内存占用。

7. 自定义渲染器API：Vue3提供了可以自定义渲染器的API，这对于跨平台开发十分有利，允许开发人员根据不同环境优化渲染行为和性能。

8. Tree-shaking支持：Vue3编写的应用更加友好于tree-shaking，这意味着在打包过程中，未使用的代码将不会被包含在最终的产物中，有效的减少了应用尺寸。

这些优化加起来使得Vue3相比于Vue2在性能上有了显著的提升。尤其是在大型应用和复杂动态页面中，这些优化可以使页面的响应更快，内存占用更低。

Vue3引入了tree-shaking,你了解过吗?说说看?

当然了解。Tree-shaking是一种通过净化无用代码的方式，以优化项目的最终体积的方法。简单来说，就是在构建过程中，工具会分析你的代码，识别出实际未被使用到的部分，然后将它们排除在最终打包的文件之外，这样能显著减少文件的大小。

在使用模块化打包工具，例如Webpack或Rollup时，tree-shaking特别有用。它依靠ES6的模块系统（也就是import和export），因为ES6模块的静态结构特性让工具能够在编译时就确定代码中的哪些部分是没有使用的。

要有效地进行tree-shaking，需要确保代码采用ES6模块语法，并且避免一些编写习惯，比如避免使用导出整个对象，因为这样工具就不能单独确定每个属性或方法是否被使用了。同时，配置压缩工具，如Terser，用来清除打包结果中的未引用代码，这样也是tree-shaking流程的一部分。

Vue3里为什么要用 Proxy替代 defineProperty？

Vue3中使用Proxy替代defineProperty主要是因为Proxy提供了比defineProperty更强大和灵活的方式来观察和拦截对象操作。下面是几个具体原因：
监听对象的新增和删除属性: Proxy能够直接监听到属性的添加和删除，而defineProperty只能在初始化时对已存在的属性进行操作。这意味着，使用Proxy可以更简单地实现对象的响应式变化。

数组变化的监听: 使用Proxy无需特殊处理数组的方法（例如push、pop等），它可以直接监听到数组的变化。在Vue2中，需要对数组的这些方法进行hack才能监听到变动。

性能: 虽然Proxy对象在某些情况下可能比defineProperty引入更多的性能开销，但在大多数常见场景中，因为只需要操作代理而非对所有属性进行追踪，所以可以提供更优的性能表现。

作为语言内置的特性: Proxy是JavaScript ES6中引入的语言内置特性，因此它是未来JavaScript发展方向的一部分，与规范的兼容性和可维护性更好。

更好的拦截能力: Proxy可以拦截更多的操作，例如属性访问、属性赋值、枚举、函数调用等，而defineProperty只能拦截属性的读取和设置。
便于实现嵌套响应式: Proxy可以轻松地通过嵌套代理实现深层对象的响应式，而在Vue2中，嵌套对象需要递归使用defineProperty来处理，这使得实现复杂且效率不是最优。

综上所述，Proxy提供了更现代、更强大且更灵活的响应式实现方式，这是Vue3选择用Proxy替代defineProperty的主要原因。

Vue3的 Composition Api与Vue2的Options Api 有何不同,说说看

Vue3的Composition API 和 Vue2的Options API 是Vue框架提供的两种不同的组件代码组织方式。它们各有特点，针对不同的使用场景和开发习惯提供了灵活的选择。以下是它们之间的主要区别：

• 组织方式：
  Options API：以一个包含各种属性（如data, methods, computed, watch, mounted等）的对象的形式组织组件代码。相关的代码块根据不同的选项进行分类，这使得小到中型的组件结构清晰和易于理解。
  Composition API：使用setup函数作为组件的入口点，并在此函数内组织组件的逻辑。这种方式使得开发者可以根据逻辑相关性而非选项类型来组织代码，有利于功能逻辑的提取和复用。
• 逻辑复用和抽离：
  Options API：逻辑复用通常依赖于混入（mixins）和高阶组件（HOCs），但这些模式会导致变量来源不清晰和命名空间冲突。
  Composition API：可以通过组合函数（composable functions）来更自然地共享和复用代码逻辑。逻辑片段被组织在一起，更易于维护和理解。
• 类型推断：
  Options API：因为是基于一个对属性和方法预定义好的对象，所以在TypeScript中可能不够直观，为此经常需要额外的类型定义来保证类型安全。
  Composition API：与TypeScript的集成更加自然，setup函数中定义的响应式状态和方法可以自动获得正确的类型推断。
• 响应式数据定义：
  Options API：通过data函数返回一个对象来定义组件的响应式数据。
  Composition API：使用ref和reactive函数来定义响应式的引用（reference）和响应式的对象。
• 代码逻辑密集度：
  Options API：在大型复杂的组件中，由于逻辑散布在不同的选项中，代码可能看起来比较分散和重复。
  Composition API：将相关逻辑组合在一起，有助于减少模板大小和逻辑的分散性，使得代码更加集中和一致。
• 生命周期钩子：
  Options API：通过Vue实例的生命周期钩子（如created, mounted等）直接定义。
  Composition API：使用新的生命周期函数（如onMounted, onCreated等）与setup函数一起工作。

总的来说，Composition API提供了更大的灵活性和更好的逻辑组织方式，尤其是在开发规模较大、逻辑较复杂的应用时。而Options API在代码结构和API设计上可能更直观，适用于小到中等规模的应用。开发者可以根据项目的实际需求和个人喜好来选择最合适的API。

ref和reactive有什么区别？

ref主要用来处理基本数据类型（string、number、Boolean），使用ref定义一个任意类型的变量时，会返回一个响应式的引用对象，这个对象包含一个.value属性，可以通过它来访问或修改内部值。
reactive用来处理复杂数据类型（object，arr），使用reactive 使用ref定义一个任意类型的变量时，会返回一个新对象，这个新对象的所有属性及嵌套属性都是响应式的，可以直接访问或修改新对象的值，不需要通过.value属性