目录
1.vue的修饰符
一、事件修饰符
1. .stop - 阻止单击事件继续传播, 也就是阻止冒泡
2. .prevent - 提交事件不再重新加载页面, 可以用来阻止表单提交的默认行为
注意点: .stop和.prevent可以串联在一起使用,都会生效
3. .capture - 内部元素触发的事件先在此处理，然后才交由内部元素进行处理
4. .self - 只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的
注意点: 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
5. .once - 点击事件将只会触发一次, 不只能对原生DOM时间生效,还可以用在自定义组件上
6. .passive - 立即触发默认行为,能够提升移动端性能,和.prevent一起使用时.prevent会被忽略并警告
7. .native - 使用时将被当做原生的HTML标签看待,绑定事件可以生效
二、表单修饰符
1. .lazy - 在表单输入时不会马上显示在页面,而是等输入完成失去焦点时才会显示在页面
2. .trim - 过滤表单输入时前后的空格
3. .number - 限制输入数字或将输入的数据转为数字
2.computer计算属性和watch的区别
computed和wantch之间的区别:
1.computed能完成的任务,watch都能完成
2.watch能完成的任务,computed不一定能完成,例如:watch可以进行异步操作
有无返回值：computed是一个计算属性，它的函数必须返回一个值，这个值会基于其依赖的响应式数据进行计算。而watch是一个侦听器，它监听的函数不需要返回值。
原理：computed更像是一种依赖，它依赖于函数里面提到的属性，并且生成了一个新的属性。当依赖的属性发生变化时，computed属性会自动重新计算。而watch则更主动，它会主动监听某一个或多个属性的变化。
是否支持缓存：computed支持缓存，只有当依赖的数据发生变化时，它才会重新计算。而watch不支持缓存，只要监听的数据发生变化，就会触发相应的操作。
是否支持异步：computed不支持异步操作，如果在其函数内部有异步操作，将无法监听数据的变化。而watch支持异步操作。
使用场景：computed通常用于处理多个数据影响一个数据的场景，例如购物车商品结算等。而watch则更适用于监听某个具体的数据变化，并执行相应的操作。
监听时机：computed在页面刚刚挂载的时候就会开始监听其依赖的数据。而watch则不会在页面挂载时立即监听，但可以通过设置immediately为true来实现立即监听。
依赖数量：每个computed计算属性可以有多个依赖，即它可以依赖于多个数据的变化。而watch通常只监听一个数据的变化，如果需要监听多个数据，需要设置多个watch。
3.vue组件间的通信实现
1.Props 和 $emit父组件通过 props 向下传递数据给子组件。
子组件通过 $emit 触发事件并传递数据给父组件。
2.Slots (插槽)
插槽是一种在父组件中预留位置，在子组件中填充内容的方式，也可以用于组件间的通信。
3.$refs
$refs 是一种直接访问子组件实例或 DOM 元素的方式，但不推荐用于组件间的常规通信。
4.自定义组件上的v-model
1.接收一个名为 value 的 prop：Vue 会将 v-model 绑定的值作为 value prop 传递给自定义组件。
2.触发一个名为 input 的事件：当组件内部的值发生变化时，它需要触发一个名为 input 的事件，并将新值作为参数传递出去。这样，Vue 就能够知道组件内部的值已经改变，并更新与 v-model 绑定的数据。
5.vue2的v-model和vue3的v-model区别
1.使用方式的差异：
- 在 Vue 2 中，v-model 主要用于表单元素（如 <input>、<textarea>、<select> 等）上，以创建双向数据绑定。当用户在表单中输入或选择数据时，v-model 会自动更新绑定的数据，而当数据改变时，也会自动更新表单的值。
- 在 Vue 3 中，v-model 的使用方式有所扩展。它不仅可以用于原生 HTML 元素，还可以直接用于自定义组件。这意味着你可以在更多的组件上使用 v-model 来实现双向数据绑定。同时，Vue 3 中的 v-model 允许你自定义其内部行为，以适应不同的使用场景。
2.内部实现原理：
- 在 Vue 2 中，v-model 本质上是一个语法糖，它实际上是 v-bind 和 v-on 的简写组合。例如，<input v-model="searchText" /> 等价于 <input :value="searchText" @input="searchText = $event.target.value" />。
- 在 Vue 3 中，v-model 的内部实现原理也有所不同。Vue 3 提供了更多的灵活性，允许你自定义 v-model 的行为。这使得 v-model 在自定义组件上的使用更加灵活和强大。
3.对组件的支持：
- 在 Vue 2 中，v-model 主要用于表单元素和某些特定的内置组件。对于自定义组件，你需要通过特定的方式来支持 v-model。
- 在 Vue 3 中，v-model 可以直接用于任何组件，包括自定义组件。这使得在自定义组件上实现双向数据绑定变得更加简单和直观。
6.响应式原理
Vue2和Vue3的响应式原理都是基于Object.defineProperty实现的，但是Vue3在性能和功能上做了一些优化和改进。
1.Vue2的响应式原理：
- Vue2通过Object.defineProperty对data中的属性进行劫持，当属性值发生变化时，会触发对应的更新函数，从而更新视图。
- Vue2通过Watcher来实现数据与视图的双向绑定，当数据发生变化时，Watcher会通知对应的视图进行更新。
- Vue2的响应式原理存在一些缺陷，例如无法监听数组的变化，需要通过特殊的方法来实现.
2.Vue3的响应式原理：
- Vue3使用Proxy代替了Object.defineProperty，Proxy可以监听到对象的所有属性，包括新增和删除操作。
- Vue3使用了WeakMap来存储依赖关系，避免了Vue2中Watcher的内存泄漏问题。
- Vue3支持了多个根节点的组件，可以更方便地进行组件的复用和组合。
7.diff算法
Diff算法是一种用于比较和查找文本、源代码或任何字符串之间差异的算法。
8.简单diff与双端diff算法的区别
1.工作原理：简单Diff算法：通常从一个序列（如数组或树形结构的起始位置）开始，逐个比较元素。如果两个元素相同，则继续比较下一个元素；如果不同，则记录这个差异，并可能停止进一步的比较（具体取决于算法的实现）。这种算法的时间复杂度通常与序列的长度成正比（O(n)）。
双端Diff算法：同时从两个序列的开始和结束位置进行比较，向中间移动。如果两个序列的开始或结束部分有相同的元素（即前缀或后缀相同），则算法会跳过这些部分，只比较不同的部分。这种优化减少了比较的次数，提高了效率。双端Diff算法的时间复杂度通常为O(n+m)，其中n和m分别是两个序列的长度。
2.适用场景：
简单Diff算法：适用于比较简单的数据结构，如线性数组或具有简单结构的树形数据。然而，由于它逐个比较元素，因此在处理大型数据集时可能效率较低。
双端Diff算法：更适用于处理复杂的数据结构，尤其是当两个序列之间存在大量相同的前缀或后缀时。这种算法通过跳过这些相同部分来减少不必要的比较，从而提高了效率。双端Diff算法也常用于虚拟DOM的更新和渲染过程中，以优化页面更新的性能。
3.实现方式：
简单Diff算法：通常基于递归或迭代的方式实现，通过逐个比较元素来找出差异。
双端Diff算法：除了使用递归或迭代外，还可能使用额外的数据结构（如哈希表或索引）来加速比较过程。这种算法还需要一种策略来处理从两个方向同时比较时可能出现的冲突或重叠情况。
9.vue项目如何提高页面首次加载效率
1.代码分割和懒加载：使用vue-router的懒加载功能，将不同的路由对应的组件分割成不同的代码块，只有当路由被访问时才加载对应的组件。这可以通过import()语法动态导入组件来实现。
对于大型库或框架，考虑使用CDN来加载，而不是将它们打包到你的项目中。
2.优化图片和媒体资源：
对图片进行压缩和优化，使用适当的格式（如JPEG、PNG、WebP等），并根据需要调整大小和分辨率。
使用图片懒加载（lazy loading）技术，如Vue-Lazyload插件，只加载用户当前可见区域的图片。
3.压缩和优化CSS和JavaScript：
使用Webpack等工具进行代码压缩和混淆，减小文件大小。
使用CSS预处理器（如Sass、Less）和PostCSS等工具进行CSS的优化和压缩。
移除不必要的CSS和JavaScript代码，避免冗余和重复的代码。
10.组件懒加载如何实现
1.使用 Webpack 的代码分割能力：Webpack 支持代码分割，可以将代码拆分成多个包，并在运行时按需加载。这可以通过使用 import() 语法（一种动态导入）来实现，Webpack 会自动对代码中的 import() 调用进行代码分割。
2.使用 Vue 的异步组件：Vue 支持异步组件，这意味着组件可以在需要时异步加载。这可以通过在定义组件时返回一个 Promise 来实现，Promise 在解析时返回组件定义。例如，你可以使用 import() 语法来动态导入组件。
3. 使用 Vue Router 的懒加载：Vue Router 也支持懒加载，允许你将路由对应的组件分割成不同的代码块，只有当路由被访问时才加载对应的组件。这同样可以通过 import() 语法来实现。
11.vue的动态组件
1.定义动态组件：
首先，你可以解释动态组件的基本概念。你可以说：“Vue 的动态组件是一种可以在同一挂载点动态切换多个组件的功能。它允许我们基于条件或用户交互来渲染不同的组件。”
2.如何使用：
接下来，你可以描述如何使用动态组件。你可以说：“在 Vue 中，我们可以使用 <component> 元素和它的 is 属性来实现动态组件。is 属性接受一个组件名称、组件对象或组件注册时的名称（如果组件已经在父组件的 components 选项中注册）。当 is 的值发生变化时，Vue 会销毁当前组件并创建新的组件。”
12.vue3和vue2的区别
1.性能提升：Vue 3在性能上比Vue 2有了显著的提升，大约快了1.2至2倍。这主要得益于其重写虚拟DOM的实现、运行时编译、静态提升与事件侦听器缓存等优化。
2.响应式系统：
Vue 2的响应式系统底层是通过ES5的Object.defineProperty进行数据劫持，有一定的局限性，比如对数组更新的时候无法实现响应式，需要使用this.$set来实现。
Vue 3的响应式系统则使用了ES6的Proxy，使得它能够更好地支持动态添加属性和删除属性。
3.API 设计：
Vue 2主要使用选项型API（Options API），将组件的选项分割成data、computed、methods等。
Vue 3引入了组合式API（Composition API），允许开发者使用纯函数来分割和复用代码，类似于React Hooks。
4.数据绑定：Vue 3在双向数据绑定方面使用了ES6的Proxy API，而Vue 2则使用了ES5的Object.defineProperty。
5.组件和模板：
Vue 3新增了三个组件：Fragment、Teleport和Suspense，提供了更多的灵活性和功能。
Vue 3支持碎片（Fragment），即组件可以有多个根节点，而Vue 2则不支持。
6.TypeScript 支持：Vue 3对TypeScript的支持更加友好，提供了更好的类型检查和自动补全功能。
13.vue2新添加的属性的监听
首先，Vue 2提供了watch选项来监听数据属性的变化。watch是一个对象，其键是需要观察的表达式（字符串形式），值是对应回调函数。当表达式的值变化时，会调用对应的回调函数。深度监听：如果你需要监听一个对象的内部属性变化，你可以设置deep: true。这样，当对象的任何内部属性发生变化时，都会触发监听器的回调函数。
14.组合式api的优势
1.代码逻辑组织：
组合式API允许我们将逻辑相关的代码组织在一起，而不是分散在data、methods、computed等选项中。这使得代码更加集中和易于理解，特别是在处理复杂组件时。
通过使用setup()函数，我们可以在其中定义响应式状态、计算属性、方法等，从而避免了在组件选项中频繁地来回切换。
2.代码复用性：
组合式API鼓励将可复用的逻辑提取到单独的函数中，这些函数可以在多个组件之间共享。这有助于减少代码的重复，提高开发效率。
通过使用ref、reactive、computed等API，我们可以创建可复用的响应式状态或计算属性，并在多个组件中轻松地使用它们。
3.更好的类型支持：
组合式API与TypeScript的结合更加自然和紧密，它提供了更好的类型支持和自动补全功能。这使得在编写代码时能够更容易地捕获错误，提高代码质量。
通过使用TypeScript，我们可以为响应式状态、计算属性等定义明确的类型，从而确保在组件中正确地使用它们。
4.逻辑关注点分离：
在使用组合式API时，我们可以将不同的逻辑关注点（如状态管理、事件处理、副作用等）分离到不同的函数中。这使得代码结构更加清晰，更容易维护和扩展。
例如，我们可以使用onMounted、onUnmounted等生命周期钩子来处理与组件挂载和卸载相关的逻辑；使用watch或watchEffect来监听响应式状态的变化并执行相应的操作。
15.自定义的组件的v-model在vue3如何实现
1.定义props和emit事件：
在你的自定义组件中，你需要定义一个名为modelValue的prop来接收父组件传递的值。
同时，你需要定义一个名为update:modelValue的事件，当组件内部的值发生变化时，可以通过触发这个事件来通知父组件更新绑定的值。
2.在父组件中使用v-model：
在父组件中，你可以像使用普通的v-model一样来绑定你的自定义组件。Vue 3会自动处理modelValue的prop和update:modelValue的事件。
16.ref和reactive的区别
1.数据类型：ref主要用于包装JavaScript的基本类型数据，如字符串、数字、布尔值等。当你使用ref时，你会得到一个响应式引用，这个引用包含一个.value属性，用于存储实际的值。
reactive则用于包装JavaScript的复杂类型数据，如对象和数组。它可以将复杂数据类型的内部属性或数据项声明为响应式数据。
2.使用方式：
使用ref时，你需要在模板中通过ref属性绑定到一个元素或组件上，并在JavaScript代码中使用this.$refs（在Vue 2中）或setup函数中的ref函数（在Vue 3的组合式API中）来获取和操作该元素或组件。
对于reactive，你需要通过调用Vue.js提供的reactive函数来包装和创建响应式对象。然后你可以直接访问这个对象的属性或调用其方法，当对象的属性发生变化时，视图将自动更新。
3.访问方式：
通过ref创建的响应式数据，你需要通过.value属性来访问其实际值。例如，如果你有一个名为count的ref，那么你应该通过count.value来获取或设置其值。
而对于通过reactive创建的响应式对象，你可以直接访问其属性或调用其方法，无需使用.value。
17.Vue3带来了什么
1.更快的渲染速度：Vue3使用了Proxy代理对象，可以更快地跟踪数据变化，从而提高渲染速度。
2.更小的体积：Vue3的体积比Vue2更小，同时也支持按需加载，减少了页面加载时间。
3.更好的TypeScript支持：Vue3对TypeScript的支持更加完善，可以更好地进行类型检查和代码提示。
4.更好的组件封装：Vue3引入了Composition API，可以更好地封装组件逻辑，使得组件更加可复用和易维护。
5.更好的响应式系统：Vue3的响应式系统进行了重构，可以更好地处理嵌套对象和数组的变化，同时也提供了更多的API来处理响应式数据。
总之，Vue3带来了更好的性能、更小的体积、更好的TypeScript支持、更好的组件封装和更好的响应式系统，使得开发者可以更加高效地开发Vue应用。
18.组合式API的优点？
1.composition API是根据逻辑相关性组织代码的，提高可读性和维护性
2.代码量少，更好的重用逻辑代码
3.没有引入新的语法，只是单纯函数
4.异常灵活
5.工具语法提示友好，因为是单纯函数所以很容易实现语法提示、自动补偿
6.更好的Typescript支持
7.在复杂功能组件中可以实现根据特性组织代码，代码内聚性强
8.组件间代码复用
19.setup配置
Vue 3中的 setup 函数接收两个参数，分别是 props 和 context。
1、props：值为对象，包含: 组件外部传递过来。切组件内部声明接收了的属性。需要注意的是，Vue3中的 props 是只读的，即在setup 函数中不能修改 props 的值。如果需要修改传递过来的数据，可以使用响应式对象或ref。
2、context：上下文对象。
- attrs:值为对象，包含组件外部传递过来，但没有在props配置中声明的属性。相当于this.$attrs
- slots:收到的插槽内容，相当于this.$slots
- emit:分发自定义事件的函数，相当于this.$emit
注意：
1、这个钩子会在created之前执行
2、内部不存在this
3、如果返回值是一个对象，那么这个对象中的键值对会被合并到created钩子的this中，而在视图上也能访问相应的数据值
20.什么是计算属性
1、computed函数，是用来定义计算属性的，计算属性不能修改。
2、模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
3、计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
