`渲染到了``元素中，使其在页面上居中显示。\n\n2. 指定目标选择器：\n 可以使用任何有效的 CSS 选择器作为`to`属性的值来指定目标位置。例如：\n\n ```vue\n \n ```\n\n 这里将通知内容渲染到具有`id`为`my-target-element`的元素中。\n\n3. 动态目标：\n 可以使用响应式数据来动态地确定``的目标位置。例如：\n\n ```vue\n \n\n \n ```\n\n 在这个例子中，用户可以通过输入框输入目标元素的`id`，从而动态地确定``的目标位置。\n\n**三、注意事项**\n\n1. 事件冒泡：当在``内部的元素上触发事件时，事件会按照正常的 DOM 事件冒泡机制传播到目标位置的父元素中。如果需要处理这些事件，确保在目标位置的父元素中正确地监听和处理这些事件。\n2. 样式隔离：如果``内部的内容需要特定的样式，确保这些样式不会影响到目标位置的其他元素。可以使用 CSS 模块化、命名空间或特定的选择器来确保样式的隔离。\n3. 响应式数据：如果在``内部使用了响应式数据，确保这些数据在目标位置的上下文中也能正确地更新。可以使用 Vue 的响应式系统来确保数据的一致性。\n",{"_58":763,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/933/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/933/timeline",{"_58":766,"_60":61,"_62":767,"_64":768,"_66":769,"_68":770,"_70":771,"_72":772,"_74":773,"_76":774,"_78":775,"_111":776,"_131":132,"_133":24,"_134":-5,"_135":778,"_137":779,"_159":152,"_153":781,"_155":781,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":782,"_169":783,"_175":784,"_177":785,"_189":787,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/932","https://api.github.com/repos/pro-collection/interview-question/issues/932/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/932/comments","https://api.github.com/repos/pro-collection/interview-question/issues/932/events","https://github.com/pro-collection/interview-question/issues/932",2540646565,"I_kwDOJGDC6c6XbzCl",932,"[Vue] 有哪些内置组件【热度: 355】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[777],{"_70":676,"_72":677,"_58":678,"_117":679,"_119":680,"_121":24,"_122":681},[],{"_58":356,"_68":357,"_62":358,"_70":359,"_72":360,"_74":361,"_76":362,"_122":363,"_147":780,"_149":365,"_151":152,"_131":132,"_153":366,"_155":367,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T05:21:02Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue 内置组件\n\n在 Vue 中，有一些内置组件，主要包括以下几个：\n\n**一、``动态组件**\n\n1. 作用：用于根据条件动态地渲染不同的组件。\n2. 使用方法：\n\n ```vue\n \n\n \n ```\n\n**二、``过渡组件**\n\n1. 作用：为元素或组件的插入、更新和移除添加过渡效果。\n2. 使用方法：\n\n ```vue\n \n\n \n\n \n ```\n\n**三、``传送门组件**\n\n1. 作用：将一个组件的模板内容渲染到指定的 DOM 节点位置，而不是在组件自身的位置。\n2. 使用方法：\n\n ```vue\n \n\n \n ```\n\n**四、``缓存组件**\n\n1. 作用：在组件切换时缓存不活动的组件实例，避免重复渲染，提高性能。\n2. 使用方法：\n\n ```vue\n \n\n \n ```\n",{"_58":786,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/932/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/932/timeline",{"_58":789,"_60":61,"_62":790,"_64":791,"_66":792,"_68":793,"_70":794,"_72":795,"_74":796,"_76":797,"_78":798,"_111":799,"_131":132,"_133":24,"_134":-5,"_135":801,"_137":802,"_159":152,"_153":804,"_155":805,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":806,"_169":807,"_175":808,"_177":809,"_189":811,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/931","https://api.github.com/repos/pro-collection/interview-question/issues/931/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/931/comments","https://api.github.com/repos/pro-collection/interview-question/issues/931/events","https://github.com/pro-collection/interview-question/issues/931",2540645807,"I_kwDOJGDC6c6Xby2v",931,"[Vue] 实现一个简单的 i18n (国际化 (Internationalization) 的缩写) 插件【热度: 166】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[800],{"_70":676,"_72":677,"_58":678,"_117":679,"_119":680,"_121":24,"_122":681},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":803,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T05:17:41Z","2024-09-22T05:17:42Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue i18n 插件实现\n\n> 作者备注\n>\n> 这个是一个简单的官方案例，如果阅读过官方文档，就没有任何难点。所以暂定为「中级」\n\n实现下面的这样的一个插件 `

`\n\n以下是一个简单的 Vue 3 的国际化插件实现：\n\n1. 创建一个名为`i18nPlugin.js`的文件：\n\n```javascript\nconst i18nPlugin = {\n install(app, options) {\n const translations = options.translations;\n app.config.globalProperties.$translate = (key) => {\n const parts = key.split(\".\");\n let value = translations[parts[0]];\n for (let i = 1; i < parts.length && value; i++) {\n value = value[parts[i]];\n }\n return value || key;\n };\n },\n};\n\nexport default i18nPlugin;\n```\n\n2. 在你的 Vue 3 项目中使用这个插件：\n\n假设你有以下的语言翻译对象：\n\n```javascript\n// en.js\nconst enTranslations = {\n greetings: {\n hello: 'Hello!',\n },\n};\n\nexport default enTranslations;\n\n// zh.js\nconst zhTranslations = {\n greetings: {\n hello: '你好！',\n },\n};\n\nexport default zhTranslations;\n```\n\n在项目的入口文件（通常是`main.js`或`main.ts`）中：\n\n```javascript\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport enTranslations from \"./locales/en\";\nimport i18nPlugin from \"./i18nPlugin\";\n\nconst app = createApp(App);\n\napp.use(i18nPlugin, { translations: enTranslations });\n\napp.mount(\"#app\");\n```\n\n这样，在你的组件中就可以使用`{{ $translate('greetings.hello') }}`来获取翻译后的文本，并且可以通过修改传入插件的翻译对象来切换不同的语言。\n",{"_58":810,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/931/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/931/timeline",{"_58":813,"_60":61,"_62":814,"_64":815,"_66":816,"_68":817,"_70":818,"_72":819,"_74":820,"_76":821,"_78":822,"_111":823,"_131":132,"_133":24,"_134":-5,"_135":825,"_137":826,"_159":152,"_153":828,"_155":829,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":830,"_169":831,"_175":832,"_177":833,"_189":835,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/930","https://api.github.com/repos/pro-collection/interview-question/issues/930/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/930/comments","https://api.github.com/repos/pro-collection/interview-question/issues/930/events","https://github.com/pro-collection/interview-question/issues/930",2540645197,"I_kwDOJGDC6c6XbytN",930,"[Vue] 插件是什么概念，有什么作用，该怎么用【热度: 550】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[824],{"_70":676,"_72":677,"_58":678,"_117":679,"_119":680,"_121":24,"_122":681},[],{"_58":356,"_68":357,"_62":358,"_70":359,"_72":360,"_74":361,"_76":362,"_122":363,"_147":827,"_149":365,"_151":152,"_131":132,"_153":366,"_155":367,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T05:15:15Z","2024-09-22T05:15:16Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue 插件\n\n在 Vue 中，插件是一种用于增强 Vue 功能的工具。\n\n**一、概念**\n\nVue 插件是一个包含`install`方法的对象，或者是一个函数，这个函数接收 Vue 的构造函数作为参数。插件可以为 Vue 添加全局的功能，如全局组件、全局指令、全局过滤器、全局混入（mixin）等，也可以扩展 Vue 的实例方法或原型属性。\n\n**二、作用**\n\n1. **添加全局功能**：\n - **全局组件**：可以通过插件注册全局组件，使得在整个项目的任何组件中都可以直接使用这个组件，无需在每个组件中单独引入。例如，一个弹窗组件可以作为插件注册为全局组件，方便在项目中的各个地方弹出统一风格的弹窗。\n - **全局指令**：插件可以添加全局指令，用于在模板中对元素进行特定的操作。比如，一个`v-focus`指令可以在元素挂载时自动聚焦该元素，提高用户体验。\n - **全局过滤器**：用于对数据进行格式化处理。例如，一个全局过滤器可以将日期格式化为特定的字符串格式，方便在模板中显示日期数据。\n - **全局混入**：可以在多个组件之间共享一些通用的选项或方法。例如，一个全局混入可以为多个组件添加相同的生命周期钩子函数或方法，减少重复代码。\n2. **扩展 Vue 实例**：\n - 插件可以向 Vue 实例添加新的方法或属性，使得在项目中的任何地方都可以通过`this`访问这些方法或属性。例如，一个插件可以添加一个`$http`方法，用于发送 HTTP 请求，方便在组件中进行数据获取。\n3. **集成第三方库**：\n - 可以将第三方库包装成 Vue 插件，使其与 Vue 更好地集成。例如，将 Vue Router（路由库）和 Vuex（状态管理库）作为插件使用，方便在 Vue 项目中进行路由管理和状态管理。\n\n**三、使用方法**\n\n1. **创建插件**：\n - 插件可以是一个对象，包含`install`方法：\n ```javascript\n const myPlugin = {\n install(Vue) {\n // 在这里添加全局功能或扩展 Vue 实例\n Vue.prototype.$myMethod = function () {\n console.log(\"This is a custom method added by the plugin.\");\n };\n },\n };\n ```\n - 也可以是一个函数，接收 Vue 构造函数作为参数：\n ```javascript\n function myPlugin(Vue) {\n Vue.prototype.$myMethod = function () {\n console.log(\"This is a custom method added by the plugin.\");\n };\n }\n ```\n2. **使用插件**：\n\n - 在 Vue 项目中，可以通过`Vue.use()`方法来使用插件。通常在项目的入口文件（如`main.js`）中进行插件的安装。\n\n ```javascript\n import Vue from \"vue\";\n import App from \"./App.vue\";\n // 引入插件\n import myPlugin from \"./myPlugin\";\n\n Vue.use(myPlugin);\n\n new Vue({\n render: (h) => h(App),\n }).$mount(\"#app\");\n ```\n\n3. **在组件中使用插件提供的功能**：\n - 在组件的方法、生命周期钩子函数或模板中，可以通过`this.$myMethod()`来调用插件添加的方法。\n ```html\n \n \n ```\n\n通过使用插件，可以将一些通用的功能封装起来，提高代码的可维护性和可复用性，同时也方便在项目中进行功能的扩展和集成第三方库。\n",{"_58":834,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/930/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/930/timeline",{"_58":837,"_60":61,"_62":838,"_64":839,"_66":840,"_68":841,"_70":842,"_72":843,"_74":844,"_76":845,"_78":846,"_111":847,"_131":132,"_133":24,"_134":-5,"_135":849,"_137":850,"_159":152,"_153":852,"_155":852,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":853,"_169":854,"_175":855,"_177":856,"_189":858,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/929","https://api.github.com/repos/pro-collection/interview-question/issues/929/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/929/comments","https://api.github.com/repos/pro-collection/interview-question/issues/929/events","https://github.com/pro-collection/interview-question/issues/929",2540644569,"I_kwDOJGDC6c6XbyjZ",929,"[Vue] vue 如何配置全局使用的定义或者常量【热度: 337】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[848],{"_70":676,"_72":677,"_58":678,"_117":679,"_119":680,"_121":24,"_122":681},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":851,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T05:12:47Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue 全局配置\n\n在 Vue 中，可以通过以下几种方式配置全局使用的定义或常量：\n\n**一、使用 Vue 原型（不推荐在 Vue 3 中使用）**\n\n在 Vue 2 中，可以通过在`main.js`文件中向 Vue 的原型上添加属性来实现全局定义或常量的访问。但在 Vue 3 中不推荐这种方式，因为它可能会导致一些潜在的问题。\n\n```javascript\n// Vue 2 示例\nVue.prototype.$globalConstant = \"This is a global constant\";\n```\n\n**二、使用 provide/inject（推荐）**\n\n1. 在根组件中提供全局定义或常量：\n\n ```javascript\n import { createApp } from \"vue\";\n\n const app = createApp({\n setup() {\n return {\n globalValue: \"Global value\",\n };\n },\n provide() {\n return {\n global: this.globalValue,\n };\n },\n });\n\n app.mount(\"#app\");\n ```\n\n2. 在子组件中注入并使用：\n\n ```vue\n \n\n \n ```\n\n**三、创建全局变量文件并导入**\n\n1. 创建一个专门的文件用于存储全局定义或常量，例如`globals.js`：\n\n ```javascript\n export const globalConstant = \"This is a global constant\";\n ```\n\n2. 在需要使用的地方导入：\n ```javascript\n import { globalConstant } from \"./globals.js\";\n ```\n\n**四、使用 Vuex（状态管理）**\n\n如果你的全局定义或常量需要在多个组件之间共享并且可能会发生变化，可以考虑使用 Vuex 进行状态管理。\n\n1. 安装和设置 Vuex：\n\n ```bash\n npm install vuex@next\n ```\n\n 创建一个`store.js`文件：\n\n ```javascript\n import { createStore } from \"vuex\";\n\n const store = createStore({\n state: {\n globalValue: \"Global value from Vuex\",\n },\n mutations: {},\n actions: {},\n modules: {},\n });\n\n export default store;\n ```\n\n2. 在`main.js`中引入并挂载 Vuex：\n\n ```javascript\n import { createApp } from \"vue\";\n import App from \"./App.vue\";\n import store from \"./store\";\n\n const app = createApp(App);\n app.use(store);\n app.mount(\"#app\");\n ```\n\n3. 在组件中使用：\n\n ```vue\n \n\n \n ```\n",{"_58":857,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/929/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/929/timeline",{"_58":860,"_60":61,"_62":861,"_64":862,"_66":863,"_68":864,"_70":865,"_72":866,"_74":867,"_76":868,"_78":869,"_111":870,"_131":132,"_133":24,"_134":-5,"_135":872,"_137":873,"_159":152,"_153":875,"_155":876,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":877,"_169":878,"_175":879,"_177":880,"_189":882,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/928","https://api.github.com/repos/pro-collection/interview-question/issues/928/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/928/comments","https://api.github.com/repos/pro-collection/interview-question/issues/928/events","https://github.com/pro-collection/interview-question/issues/928",2540642959,"I_kwDOJGDC6c6XbyKP",928,"[Vue] 如何自定义指令【热度: 159】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[871],{"_70":676,"_72":677,"_58":678,"_117":679,"_119":680,"_121":24,"_122":681},[],{"_58":356,"_68":357,"_62":358,"_70":359,"_72":360,"_74":361,"_76":362,"_122":363,"_147":874,"_149":365,"_151":152,"_131":132,"_153":366,"_155":367,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T05:06:16Z","2024-09-22T05:06:17Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue 自定义指令\n\n在 Vue 中，可以通过以下步骤来自定义指令：\n\n**一、全局自定义指令**\n\n1. 使用`Vue.directive()`方法定义全局指令：\n\n ```javascript\n Vue.directive(\"my-directive\", {\n // 指令的定义对象\n bind(el, binding, vnode) {\n // 在元素绑定指令时调用\n // el 是指令所绑定的元素\n // binding 包含指令的信息，如 value、arg、modifiers 等\n // vnode 是虚拟节点\n },\n inserted(el, binding, vnode) {\n // 被绑定元素插入父节点时调用\n },\n update(el, binding, vnode, oldVnode) {\n // 当组件更新时调用，包括数据更新和组件本身的更新\n },\n componentUpdated(el, binding, vnode, oldVnode) {\n // 组件及其子组件的 VNode 更新后调用\n },\n unbind(el, binding, vnode) {\n // 指令与元素解绑时调用\n },\n });\n ```\n\n2. 在模板中使用自定义指令：\n ```html\n

\n ```\n\n**二、局部自定义指令**\n\n1. 在组件中定义局部指令：\n\n ```javascript\n export default {\n directives: {\n \"my-directive\": {\n bind(el, binding, vnode) {\n // 指令定义\n },\n },\n },\n };\n ```\n\n2. 在组件的模板中使用局部自定义指令：\n ```html\n \n ```\n\n**三、指令定义对象的参数说明**\n\n1. `el`：指令所绑定的元素，可以通过这个参数来操作元素的属性、样式等。\n2. `binding`：一个对象，包含以下属性：\n - `value`：指令的绑定值，例如在`v-my-directive=\"someValue\"`中，`value`就是`someValue`的值。\n - `arg`：指令的参数，如果指令是`v-my-directive:argName`，那么`arg`就是`argName`。\n - `modifiers`：一个对象，包含指令的修饰符。\n3. `vnode`：虚拟节点，代表指令所绑定的元素的虚拟节点。\n4. `oldVnode`：上一个虚拟节点，仅在`update`和`componentUpdated`钩子中可用。\n\n**四、自定义指令的应用场景**\n\n1. 操作 DOM 元素：例如，在特定条件下为元素添加或移除类名、设置样式、监听元素的事件等。\n2. 实现复杂的交互效果：比如拖拽、缩放、滚动监听等。\n3. 数据格式化：在将数据绑定到元素之前对数据进行格式化处理。\n",{"_58":881,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/928/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/928/timeline",{"_58":884,"_60":61,"_62":885,"_64":886,"_66":887,"_68":888,"_70":889,"_72":890,"_74":891,"_76":892,"_78":893,"_111":894,"_131":132,"_133":24,"_134":-5,"_135":896,"_137":897,"_159":152,"_153":899,"_155":899,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":900,"_169":901,"_175":902,"_177":903,"_189":905,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/927","https://api.github.com/repos/pro-collection/interview-question/issues/927/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/927/comments","https://api.github.com/repos/pro-collection/interview-question/issues/927/events","https://github.com/pro-collection/interview-question/issues/927",2540642010,"I_kwDOJGDC6c6Xbx7a",927,"[Vue] 组合式函数和 vue2 mixins 对比，有何优劣【热度: 311】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[895],{"_70":676,"_72":677,"_58":678,"_117":679,"_119":680,"_121":24,"_122":681},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":898,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T05:02:25Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：组合式函数对比 mixins\n\n在 Vue 3 中，组合式函数（Composables）与 Vue 2 中的混入（Mixins）相比，有以下优劣：\n\n**一、组合式函数的优势**\n\n1. 更好的可读性和可维护性：\n\n - 组合式函数通常是一个独立的函数，其逻辑更加清晰，容易理解和调试。每个组合式函数专注于特定的功能，使得代码结构更加模块化。\n - 相比之下，混入可能会导致命名冲突和难以追踪的代码来源，尤其是当多个混入被应用到一个组件时。\n\n2. 灵活的组合和参数化：\n\n - 可以根据需要选择和组合不同的组合式函数，并且可以传递参数来定制它们的行为。这使得代码更加灵活，可以适应不同的场景。\n - 混入的组合相对固定，难以进行灵活的参数化。\n\n3. 更好的类型支持：\n\n - 在使用 TypeScript 时，组合式函数可以更好地利用类型系统，提供更准确的类型提示和错误检查。\n - 混入在类型支持方面相对较弱，可能会导致类型不明确的问题。\n\n4. 避免命名冲突：\n - 组合式函数通过命名空间或函数名来避免命名冲突，而混入可能会因为相同的属性或方法名而产生冲突。\n\n**二、混入的优势**\n\n1. 历史兼容性：\n\n - 如果是从 Vue 2 迁移过来的项目，已经使用了混入，那么在一定程度上可以继续使用它们，减少迁移成本。\n\n2. 简单的使用方式：\n - 对于一些简单的复用场景，混入可以快速地将一些通用的属性和方法添加到组件中，使用起来相对简单。\n\n**三、组合式函数的劣势**\n\n1. 学习曲线：\n\n - 对于习惯了 Vue 2 混入的开发者来说，学习和适应组合式函数可能需要一定的时间。\n\n2. 代码组织要求高：\n - 由于组合式函数需要更加细致的代码组织，对于一些小型项目或快速开发场景，可能会觉得相对繁琐。\n\n**四、混入的劣势**\n\n1. 不明确的来源：\n\n - 当多个混入被应用到一个组件时，很难确定某个属性或方法的具体来源，这会增加代码的理解难度。\n\n2. 潜在的命名冲突：\n\n - 如前所述，混入容易产生命名冲突，尤其是在大型项目中，可能会导致难以调试的问题。\n\n3. 可维护性问题：\n - 随着项目的发展，混入可能会变得复杂和难以维护，特别是当需要修改或扩展它们的功能时。\n",{"_58":904,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/927/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/927/timeline",{"_58":907,"_60":61,"_62":908,"_64":909,"_66":910,"_68":911,"_70":912,"_72":913,"_74":914,"_76":915,"_78":916,"_111":917,"_131":132,"_133":24,"_134":-5,"_135":919,"_137":920,"_159":152,"_153":922,"_155":922,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":923,"_169":924,"_175":925,"_177":926,"_189":928,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/926","https://api.github.com/repos/pro-collection/interview-question/issues/926/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/926/comments","https://api.github.com/repos/pro-collection/interview-question/issues/926/events","https://github.com/pro-collection/interview-question/issues/926",2540641286,"I_kwDOJGDC6c6XbxwG",926,"[Vue] 如何提升复用逻辑【热度: 671】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[918],{"_70":676,"_72":677,"_58":678,"_117":679,"_119":680,"_121":24,"_122":681},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":921,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T04:59:41Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue3 复用逻辑\n\n在 Vue 3 中，可以通过以下几种方式提升复用逻辑：\n\n**一、组合式函数（Composables）**\n\n1. 定义与使用：\n\n - 组合式函数是一个封装了可复用逻辑的函数，可以接收参数并返回响应式数据和方法。例如：\n\n ```javascript\n import { ref } from \"vue\";\n\n export function useCounter(initialValue = 0) {\n const count = ref(initialValue);\n const increment = () => count.value++;\n const decrement = () => count.value--;\n\n return { count, increment, decrement };\n }\n ```\n\n - 在组件中使用组合式函数：\n\n ```vue\n \n\n \n ```\n\n2. 优势：\n - 可维护性高：将可复用的逻辑封装在独立的函数中，使得代码更易于理解和维护。\n - 可测试性强：可以单独对组合式函数进行测试，而不需要依赖于整个组件。\n - 易于复用：可以在多个组件中导入和使用相同的组合式函数。\n\n**二、自定义指令**\n\n1. 定义与使用：\n\n - 自定义指令可以在元素上应用特定的行为。例如：\n\n ```javascript\n const focusDirective = {\n mounted(el) {\n el.focus();\n },\n };\n\n export default focusDirective;\n ```\n\n - 在组件中使用自定义指令：\n\n ```vue\n \n\n \n ```\n\n2. 优势：\n - 特定行为复用：对于一些需要在多个元素上重复应用的特定行为，可以通过自定义指令进行复用。\n - 解耦逻辑：将特定的行为从组件的逻辑中分离出来，使得组件更加专注于业务逻辑。\n\n**三、混入（Mixins）**\n\n1. 定义与使用：\n\n - 混入是一种可以将多个组件的可复用选项合并到一个对象中的方式。例如：\n\n ```javascript\n const myMixin = {\n data() {\n return {\n commonData: \"This is common data\",\n };\n },\n methods: {\n commonMethod() {\n console.log(\"This is a common method\");\n },\n },\n };\n\n export default myMixin;\n ```\n\n - 在组件中使用混入：\n\n ```vue\n \n\n \n ```\n\n2. 优势：\n - 代码复用：可以将一些通用的属性、方法或生命周期钩子合并到多个组件中。\n - 减少重复代码：避免在多个组件中重复编写相同的逻辑。\n\n**四、函数式组件**\n\n1. 定义与使用：\n\n - 函数式组件是一个无状态、无实例的组件，它接收 props 并返回一个 VNode。例如：\n\n ```vue\n \n ```\n\n - 在其他组件中使用函数式组件：\n\n ```vue\n \n\n \n ```\n\n2. 优势：\n - 轻量级：函数式组件没有实例化的开销，性能更高。\n - 简洁性：对于一些简单的展示性组件，可以使用函数式组件来简化代码。\n",{"_58":927,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/926/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/926/timeline",{"_58":930,"_60":61,"_62":931,"_64":932,"_66":933,"_68":934,"_70":935,"_72":936,"_74":937,"_76":938,"_78":939,"_111":940,"_131":132,"_133":24,"_134":-5,"_135":942,"_137":943,"_159":152,"_153":945,"_155":946,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":947,"_169":948,"_175":949,"_177":950,"_189":952,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/925","https://api.github.com/repos/pro-collection/interview-question/issues/925/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/925/comments","https://api.github.com/repos/pro-collection/interview-question/issues/925/events","https://github.com/pro-collection/interview-question/issues/925",2540640842,"I_kwDOJGDC6c6XbxpK",925,"[Vue] 介绍一下 Provide【热度: 633】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[941],{"_70":676,"_72":677,"_58":678,"_117":679,"_119":680,"_121":24,"_122":681},[],{"_58":356,"_68":357,"_62":358,"_70":359,"_72":360,"_74":361,"_76":362,"_122":363,"_147":944,"_149":365,"_151":152,"_131":132,"_153":366,"_155":367,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T04:57:41Z","2024-09-22T04:57:42Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue3 Provide\n\nVue 3 中的 `provide` 和 `inject` 功能提供了一种方法，允许祖先组件将数据“提供”给它的所有后代组件，无论后代组件位于组件树的何处，而不必通过所有的组件层层传递属性（props）。这对于深层嵌套的组件或跨多个组件共享状态特别有用。\n\n### 基本用法\n\n#### 在祖先组件中提供数据\n\n你可以在任何组件中使用 `provide` 选项来提供数据。`provide` 选项应该是一个对象或返回对象的函数，其中的每个属性都可以被子组件注入。从 Vue 3 开始，`provide` 和 `inject` 绑定现在是响应式的。\n\n在 Vue 3 中，建议在 `setup()` 函数中使用 `provide` 函数，因为 `setup` 是组合式 API 的入口点。\n\n```javascript\nimport { provide } from \"vue\";\n\nexport default {\n setup() {\n // 提供 'theme' 数据\n provide(\"theme\", \"dark\");\n },\n};\n```\n\n#### 在后代组件中注入数据\n\n后代组件可以使用 `inject` 选项来接收数据。`inject` 选项应该是一个字符串数组，列出需要注入的属性名。\n\n```javascript\nimport { inject } from \"vue\";\n\nexport default {\n setup() {\n const theme = inject(\"theme\");\n return { theme };\n },\n};\n```\n\n### 案例\n\n假设你正在开发一个应用，该应用有一个主题切换功能，你可以在顶层组件中提供当前主题，而所有子组件都可以注入这个主题信息，而不必通过层层传递。\n\n### 响应式提供\n\n如果要提供的数据是响应式的，并且希望后代组件能够响应数据的变化，你需要使用 Vue 的响应式系统函数，例如 `reactive` 或 `ref`。\n\n```javascript\nimport { provide, reactive } from \"vue\";\n\nexport default {\n setup() {\n const theme = reactive({ color: \"dark\" });\n provide(\"theme\", theme);\n },\n};\n```\n\n后代组件同样可以如上所示通过 `inject` 获取这个响应式的数据。\n\n### 注意事项\n\n- `provide` 和 `inject` 提供的依赖关系不是可靠的，并且不应该在业务逻辑中频繁使用，以避免复杂的跨组件通讯导致应用难以维护。它通常被用于开发可复用的插件或高阶组件。\n- 使用这两个选项时，注入的数据在后代组件中并不是响应式的，除非使用了 Vue 的响应式系统（如 `reactive`、`ref`）来提供这些数据。\n- 如果 `inject` 未找到提供的键，则它默认返回 `undefined`。你可以通过提供第二个参数作为默认值来改变这一行为。\n\n总的来说，`provide` 和 `inject` 是 Vue 3 中解决跨多个组件共享状态问题的一个非常有用的功能，尤其适用于开发高阶组件或插件时使用。\n",{"_58":951,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/925/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/925/timeline",{"_58":954,"_60":61,"_62":955,"_64":956,"_66":957,"_68":958,"_70":959,"_72":960,"_74":961,"_76":962,"_78":963,"_111":964,"_131":132,"_133":24,"_134":-5,"_135":966,"_137":967,"_159":152,"_153":969,"_155":969,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":970,"_169":971,"_175":972,"_177":973,"_189":975,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/924","https://api.github.com/repos/pro-collection/interview-question/issues/924/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/924/comments","https://api.github.com/repos/pro-collection/interview-question/issues/924/events","https://github.com/pro-collection/interview-question/issues/924",2540632949,"I_kwDOJGDC6c6Xbvt1",924,"[Vue] 介绍一下动态插槽名",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[965],{"_70":676,"_72":677,"_58":678,"_117":679,"_119":680,"_121":24,"_122":681},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":968,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T04:22:41Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue3 动态插槽名\n\n在 Vue 3 中，动态插槽名允许在运行时根据特定的条件动态地确定插槽的名称，从而为组件的渲染提供了更大的灵活性。\n\n### **一、基本概念**\n\n通常情况下，插槽名在组件定义时是固定的。但在某些场景中，可能需要根据不同的情况动态地选择要渲染的插槽。Vue 3 引入了动态插槽名的特性，使得可以在运行时动态地确定插槽的名称。\n\n### **二、使用方法**\n\n1. 在子组件中接收动态插槽：\n\n ```vue\n \n\n \n ```\n\n 在这个子组件中，通过`ref`定义了一个名为`dynamicSlotName`的响应式变量，用于动态确定插槽的名称。\n\n2. 在父组件中使用动态插槽名：\n\n ```vue\n \n\n \n ```\n\n 在父组件中，使用`v-for`循环遍历一个包含插槽名的数组，并根据不同的插槽名渲染不同的内容。通过这种方式，可以动态地将内容传递给子组件的不同插槽。\n\n### **三、优势**\n\n1. 灵活性：可以根据不同的条件动态地选择要渲染的插槽，使得组件能够适应各种复杂的场景。\n2. 可扩展性：在需要根据不同的情况展示不同的内容时，动态插槽名提供了一种简洁而强大的方式，无需为每个可能的情况创建单独的组件。\n3. 代码复用：通过动态插槽名，可以在不同的组件中复用相同的逻辑，只需要在父组件中根据不同的需求传递不同的插槽名即可。\n",{"_58":974,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/924/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/924/timeline",{"_58":977,"_60":61,"_62":978,"_64":979,"_66":980,"_68":981,"_70":982,"_72":983,"_74":984,"_76":985,"_78":986,"_111":987,"_131":132,"_133":24,"_134":-5,"_135":989,"_137":990,"_159":152,"_153":992,"_155":993,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":994,"_169":995,"_175":996,"_177":997,"_189":999,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/923","https://api.github.com/repos/pro-collection/interview-question/issues/923/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/923/comments","https://api.github.com/repos/pro-collection/interview-question/issues/923/events","https://github.com/pro-collection/interview-question/issues/923",2540632413,"I_kwDOJGDC6c6Xbvld",923,"[Vue] 介绍一下条件插槽【热度: 100】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[988],{"_70":676,"_72":677,"_58":678,"_117":679,"_119":680,"_121":24,"_122":681},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":991,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T04:20:32Z","2024-09-28T02:20:17Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue3 条件插槽\r\n\r\n可以查看官网: https://cn.vuejs.org/guide/components/slots#conditional-slots\r\n\r\n在 Vue 中，条件插槽可以通过结合使用 `$slots` 属性与 `v-if` 来实现动态地根据特定条件渲染不同的内容到插槽中。\r\n\r\n**一、基本概念**\r\n\r\n条件插槽允许在父组件向子组件传递内容时，根据一定的条件来决定渲染哪个插槽的内容。通过使用 `$slots` 属性可以访问子组件中的插槽内容，然后结合 `v-if` 进行条件判断来选择要渲染的部分。\r\n\r\n**二、使用方法**\r\n\r\n1. 在子组件中定义插槽：\r\n\r\n ```html\r\n \r\n ```\r\n\r\n 在这个子组件中，定义了两个插槽，一个名为 `conditionalSlot`，另一个名为 `defaultSlot`。通过判断 `$slots.conditionalSlot` 是否存在来决定渲染哪个插槽。\r\n\r\n2. 在父组件中使用条件插槽：\r\n ```html\r\n \r\n ```\r\n 在父组件中，根据 `someCondition` 的值来决定向子组件的插槽中传递不同的内容。当 `someCondition` 为真时，传递名为 `conditionalSlot` 的插槽内容；当 `someCondition` 为假时，传递名为 `defaultSlot` 的插槽内容。\r\n\r\n**三、优势**\r\n\r\n1. 动态性：可以根据不同的条件动态地渲染不同的内容，使组件更加灵活适应各种场景。\r\n2. 可维护性：将不同情况下的内容分别组织在不同的模板中，使得代码更加清晰易读，便于维护。\r\n3. 代码复用：通过条件插槽，可以在不同的场景下复用同一个子组件，只需要在父组件中根据不同的条件传递不同的内容即可。",{"_58":998,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/923/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/923/timeline","pagination",{"_1002":1003,"_166":1004},"value",7,32,"actionData","errors"]