`渲染到了``元素中，使其在页面上居中显示。\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",{"_54":263,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/933/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/933/timeline",{"_54":266,"_56":57,"_58":267,"_60":268,"_62":269,"_64":270,"_66":271,"_68":272,"_70":273,"_72":274,"_74":275,"_107":276,"_127":128,"_129":26,"_130":-5,"_131":278,"_133":279,"_155":148,"_149":281,"_151":281,"_154":-5,"_158":159,"_160":282,"_165":-5,"_166":283,"_168":284,"_180":286,"_182":-5,"_183":-5,"_184":185},"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】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[277],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":280,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-22T05:21:02Z",{"_162":148,"_163":148,"_164":148},"**关键词**：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",{"_54":285,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/932/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/932/timeline",{"_54":288,"_56":57,"_58":289,"_60":290,"_62":291,"_64":292,"_66":293,"_68":294,"_70":295,"_72":296,"_74":297,"_107":298,"_127":128,"_129":26,"_130":-5,"_131":300,"_133":301,"_155":148,"_149":303,"_151":304,"_154":-5,"_158":159,"_160":305,"_165":-5,"_166":306,"_168":307,"_180":309,"_182":-5,"_183":-5,"_184":185},"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】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[299],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":302,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-22T05:17:41Z","2024-09-22T05:17:42Z",{"_162":148,"_163":148,"_164":148},"**关键词**：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",{"_54":308,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/931/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/931/timeline",{"_54":311,"_56":57,"_58":312,"_60":313,"_62":314,"_64":315,"_66":316,"_68":317,"_70":318,"_72":319,"_74":320,"_107":321,"_127":128,"_129":26,"_130":-5,"_131":323,"_133":324,"_155":148,"_149":326,"_151":327,"_154":-5,"_158":159,"_160":328,"_165":-5,"_166":329,"_168":330,"_180":332,"_182":-5,"_183":-5,"_184":185},"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】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[322],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":325,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-22T05:15:15Z","2024-09-22T05:15:16Z",{"_162":148,"_163":148,"_164":148},"**关键词**：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",{"_54":331,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/930/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/930/timeline",{"_54":334,"_56":57,"_58":335,"_60":336,"_62":337,"_64":338,"_66":339,"_68":340,"_70":341,"_72":342,"_74":343,"_107":344,"_127":128,"_129":26,"_130":-5,"_131":346,"_133":347,"_155":148,"_149":349,"_151":349,"_154":-5,"_158":159,"_160":350,"_165":-5,"_166":351,"_168":352,"_180":354,"_182":-5,"_183":-5,"_184":185},"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】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[345],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":348,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-22T05:12:47Z",{"_162":148,"_163":148,"_164":148},"**关键词**：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",{"_54":353,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/929/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/929/timeline",{"_54":356,"_56":57,"_58":357,"_60":358,"_62":359,"_64":360,"_66":361,"_68":362,"_70":363,"_72":364,"_74":365,"_107":366,"_127":128,"_129":26,"_130":-5,"_131":368,"_133":369,"_155":148,"_149":371,"_151":372,"_154":-5,"_158":159,"_160":373,"_165":-5,"_166":374,"_168":375,"_180":377,"_182":-5,"_183":-5,"_184":185},"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】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[367],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":370,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-22T05:06:16Z","2024-09-22T05:06:17Z",{"_162":148,"_163":148,"_164":148},"**关键词**：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",{"_54":376,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/928/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/928/timeline",{"_54":379,"_56":57,"_58":380,"_60":381,"_62":382,"_64":383,"_66":384,"_68":385,"_70":386,"_72":387,"_74":388,"_107":389,"_127":128,"_129":26,"_130":-5,"_131":391,"_133":392,"_155":148,"_149":394,"_151":394,"_154":-5,"_158":159,"_160":395,"_165":-5,"_166":396,"_168":397,"_180":399,"_182":-5,"_183":-5,"_184":185},"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】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[390],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":393,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-22T05:02:25Z",{"_162":148,"_163":148,"_164":148},"**关键词**：组合式函数对比 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",{"_54":398,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/927/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/927/timeline",{"_54":401,"_56":57,"_58":402,"_60":403,"_62":404,"_64":405,"_66":406,"_68":407,"_70":408,"_72":409,"_74":410,"_107":411,"_127":128,"_129":26,"_130":-5,"_131":413,"_133":414,"_155":148,"_149":416,"_151":416,"_154":-5,"_158":159,"_160":417,"_165":-5,"_166":418,"_168":419,"_180":421,"_182":-5,"_183":-5,"_184":185},"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】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[412],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":415,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-22T04:59:41Z",{"_162":148,"_163":148,"_164":148},"**关键词**：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",{"_54":420,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/926/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/926/timeline",{"_54":423,"_56":57,"_58":424,"_60":425,"_62":426,"_64":427,"_66":428,"_68":429,"_70":430,"_72":431,"_74":432,"_107":433,"_127":128,"_129":26,"_130":-5,"_131":435,"_133":436,"_155":148,"_149":438,"_151":439,"_154":-5,"_158":159,"_160":440,"_165":-5,"_166":441,"_168":442,"_180":444,"_182":-5,"_183":-5,"_184":185},"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】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[434],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":437,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-22T04:57:41Z","2024-09-22T04:57:42Z",{"_162":148,"_163":148,"_164":148},"**关键词**：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",{"_54":443,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/925/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/925/timeline",{"_54":446,"_56":57,"_58":447,"_60":448,"_62":449,"_64":450,"_66":451,"_68":452,"_70":453,"_72":454,"_74":455,"_107":456,"_127":128,"_129":26,"_130":-5,"_131":458,"_133":459,"_155":148,"_149":461,"_151":461,"_154":-5,"_158":159,"_160":462,"_165":-5,"_166":463,"_168":464,"_180":466,"_182":-5,"_183":-5,"_184":185},"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] 介绍一下动态插槽名",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[457],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":460,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-22T04:22:41Z",{"_162":148,"_163":148,"_164":148},"**关键词**：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",{"_54":465,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/924/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/924/timeline",{"_54":468,"_56":57,"_58":469,"_60":470,"_62":471,"_64":472,"_66":473,"_68":474,"_70":475,"_72":476,"_74":477,"_107":478,"_127":128,"_129":26,"_130":-5,"_131":480,"_133":481,"_155":148,"_149":483,"_151":484,"_154":-5,"_158":159,"_160":485,"_165":-5,"_166":486,"_168":487,"_180":489,"_182":-5,"_183":-5,"_184":185},"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】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[479],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":482,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-22T04:20:32Z","2024-09-28T02:20:17Z",{"_162":148,"_163":148,"_164":148},"**关键词**：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. 代码复用：通过条件插槽，可以在不同的场景下复用同一个子组件，只需要在父组件中根据不同的条件传递不同的内容即可。",{"_54":488,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/923/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/923/timeline",{"_54":491,"_56":57,"_58":492,"_60":493,"_62":494,"_64":495,"_66":496,"_68":497,"_70":498,"_72":499,"_74":500,"_107":501,"_127":128,"_129":26,"_130":-5,"_131":503,"_133":504,"_155":148,"_149":506,"_151":506,"_154":-5,"_158":159,"_160":507,"_165":-5,"_166":508,"_168":509,"_180":511,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/922","https://api.github.com/repos/pro-collection/interview-question/issues/922/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/922/comments","https://api.github.com/repos/pro-collection/interview-question/issues/922/events","https://github.com/pro-collection/interview-question/issues/922",2540629857,"I_kwDOJGDC6c6Xbu9h",922,"[Vue] 介绍一下 defineEmits【热度: 346】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[502],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":505,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-22T04:09:58Z",{"_162":148,"_163":148,"_164":148},"**关键词**：介绍一下 defineEmits\n\n在 Vue 3 中，`defineEmits`是一个用于定义组件触发的自定义事件的函数。\n\n**一、作用与目的**\n\n在 Vue 3 的组合式 API 中，使用`defineEmits`可以明确地声明组件向外触发的事件类型，这有助于提高代码的可读性和可维护性。通过定义触发的事件，其他使用该组件的地方可以清楚地知道组件可能会触发哪些事件，以便进行相应的处理。\n\n**二、使用方法**\n\n1. 基本用法：\n\n```vue\n\n```\n\n在这个例子中，定义了一个组件，该组件可以触发名为`customEvent1`和`customEvent2`的两个自定义事件。\n\n2. 带参数的事件：\n\n可以定义带参数的事件，在触发事件时传递相应的参数。例如：\n\n```vue\n\n```\n\n这里定义了一个带参数的事件`eventWithArgs`，在`someFunction`函数中触发该事件并传递了一个参数。\n\n**三、优势**\n\n1. 类型安全：明确了事件的名称和参数类型，减少了因事件名称错误或参数传递错误导致的问题。\n2. 清晰的组件接口：让使用者更容易理解组件的行为和交互方式。\n3. 更好的维护性：在代码重构或团队协作时，更容易找到和处理与事件相关的逻辑。\n",{"_54":510,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/922/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/922/timeline",{"_54":513,"_56":57,"_58":514,"_60":515,"_62":516,"_64":517,"_66":518,"_68":519,"_70":520,"_72":521,"_74":522,"_107":523,"_127":128,"_129":26,"_130":-5,"_131":530,"_133":531,"_155":148,"_149":533,"_151":533,"_154":-5,"_158":159,"_160":534,"_165":-5,"_166":535,"_168":536,"_180":538,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/921","https://api.github.com/repos/pro-collection/interview-question/issues/921/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/921/comments","https://api.github.com/repos/pro-collection/interview-question/issues/921/events","https://github.com/pro-collection/interview-question/issues/921",2540629387,"I_kwDOJGDC6c6Xbu2L",921,"[Vue] 都是支持响应式， defineModel 和 reactive 有何不同【热度: 344】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[524,525],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":526,"_68":527,"_54":528,"_113":529,"_115":125,"_117":26,"_118":126},6294910473,"LA_kwDOJGDC6c8AAAABdzS2CQ","https://api.github.com/repos/pro-collection/interview-question/labels/TOP100%E4%BA%92%E8%81%94%E7%BD%91","TOP100互联网",[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":532,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-22T04:08:21Z",{"_162":148,"_163":148,"_164":148},"**关键词**：defineModel 和 reactive 异同\n\n在 Vue 3 中，`defineModel`和`reactive`虽然都与响应式相关，但它们有以下不同之处：\n\n### **一、功能目的**\n\n1. **reactive**：\n - 主要用于创建响应式对象。它接收一个普通的 JavaScript 对象，并将其转换为响应式对象，使得对这个对象的属性进行修改时，可以触发依赖这个对象的组件重新渲染。\n - 例如：\n ```javascript\n import { reactive } from \"vue\";\n const state = reactive({\n count: 0,\n });\n state.count++; // 修改响应式对象的属性，会触发相关组件重新渲染\n ```\n2. **defineModel**：\n - 主要用于在组合式函数中简化双向绑定的实现。它通常与`reactive`等响应式函数一起使用，自动解包响应式对象的属性，使得这些属性可以在模板中直接使用，无需通过`.value`来访问，并且方便与`v-model`指令配合实现双向绑定。\n - 例如：\n ```javascript\n import { reactive, defineModel } from \"vue\";\n export default function useCounter() {\n const state = reactive({\n count: 0,\n });\n return defineModel(() => ({\n count: state.count,\n }));\n }\n ```\n\n### **二、使用方式**\n\n1. **reactive**：\n - 直接接收一个普通对象作为参数，返回一个响应式对象。这个响应式对象的属性可以在组件的逻辑部分（如`setup`函数、方法等）中被修改，从而触发视图更新。\n - 例如在组件中使用：\n ```html\n \n \n ```\n2. **defineModel**：\n - 在组合式函数中使用，通常返回一个对象，其中包含需要进行双向绑定的属性。这个对象中的属性可以在模板中直接使用`v-model`指令进行双向绑定。\n - 例如：\n ```html\n \n \n ```\n\n### **三、作用范围**\n\n1. **reactive**：\n - 创建的响应式对象可以在整个组件中使用，包括模板、`setup`函数、方法等。它主要用于管理组件的状态数据，使得这些数据的变化能够反映到视图中。\n2. **defineModel**：\n - 主要作用于组合式函数中，用于处理特定的逻辑并返回可以在模板中进行双向绑定的属性。它的作用范围相对较窄，主要是为了方便实现双向绑定的场景。\n\n### **四、与`v-model`的配合**\n\n1. **reactive**：\n - 如果要在自定义组件中使用`reactive`创建的响应式对象与父组件进行双向绑定，需要手动处理`v-model`绑定的值的传递和更新。通常需要在组件的`props`中接收一个值，并在组件内部通过事件触发将更新后的值传递回父组件。\n - 例如：\n ```html\n \n \n ```\n2. **defineModel**：\n - 与`v-model`配合更加方便，使用`defineModel`返回的属性可以直接在模板中使用`v-model`进行双向绑定，无需手动处理事件的触发和值的传递。它自动处理了输入事件，并将新的值更新到响应式对象中。\n",{"_54":537,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/921/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/921/timeline",{"_54":540,"_56":57,"_58":541,"_60":542,"_62":543,"_64":544,"_66":545,"_68":546,"_70":547,"_72":548,"_74":549,"_107":550,"_127":128,"_129":26,"_130":-5,"_131":553,"_133":554,"_155":148,"_149":556,"_151":556,"_154":-5,"_158":159,"_160":557,"_165":-5,"_166":558,"_168":559,"_180":561,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/920","https://api.github.com/repos/pro-collection/interview-question/issues/920/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/920/comments","https://api.github.com/repos/pro-collection/interview-question/issues/920/events","https://github.com/pro-collection/interview-question/issues/920",2540628638,"I_kwDOJGDC6c6Xbuqe",920,"[Vue] 介绍一下 defineModel【热度: 433】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[551,552],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":526,"_68":527,"_54":528,"_113":529,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":555,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-22T04:05:28Z",{"_162":148,"_163":148,"_164":148},"**关键词**：vue3 双向绑定 defineModel\n\n在 Vue 3 中，`defineModel`是一个用于简化双向绑定的函数，通常与组合式函数（composition function）一起使用。\n\n**一、主要作用**\n\n1. **自动解包响应式对象**：\n - 当在组合式函数中使用响应式对象时，使用`defineModel`可以自动解包响应式对象的属性，使得这些属性可以在模板中直接使用，无需通过`.value`来访问。\n - 例如，如果有一个响应式对象`state`，其中包含属性`count`，在不使用`defineModel`时，在模板中需要使用`state.count.value`来访问`count`的值。但使用`defineModel`后，可以直接在模板中使用`count`。\n2. **实现双向绑定**：\n - 配合`v-model`指令使用时，`defineModel`可以轻松实现双向绑定。它会自动处理输入事件，并将新的值更新到响应式对象中。\n - 例如，在一个自定义组件中，使用`defineModel`可以让组件的`props`中的一个值与组件内部的状态实现双向绑定，使得父组件和子组件之间的数据传递更加方便。\n\n**二、使用方法**\n\n1. **导入`defineModel`**：\n - 在组合式函数中，首先需要从`'vue'`模块中导入`defineModel`函数。\n ```javascript\n import { defineModel } from \"vue\";\n ```\n2. **使用`defineModel`**：\n\n - 在组合式函数内部，将需要双向绑定的响应式对象作为参数传递给`defineModel`。\n\n ```javascript\n import { reactive } from \"vue\";\n\n export default function useCounter() {\n const state = reactive({\n count: 0,\n });\n\n return defineModel(() => ({\n count: state.count,\n }));\n }\n ```\n\n - 在上面的例子中，`state.count`是一个响应式属性，通过`defineModel`函数返回后，可以在模板中直接使用`count`进行双向绑定。\n\n3. **在模板中使用**：\n\n - 在组件的模板中，可以使用`v-model`指令来绑定使用了`defineModel`的属性。\n\n ```html\n \n\n \n ```\n\n - 在这个例子中，`input`元素的`v-model`绑定了`count`属性，当用户在输入框中输入内容时，`count`的值会自动更新，实现了双向绑定。\n\n**三、优势和适用场景**\n\n1. **优势**：\n - **简化代码**：减少了在模板中访问响应式属性时需要添加`.value`的繁琐操作，使代码更加简洁易读。\n - **方便双向绑定**：特别是在自定义组件中，使用`defineModel`可以快速实现双向绑定，提高开发效率。\n2. **适用场景**：\n - **自定义组件开发**：当开发自定义组件时，如果需要实现双向绑定的属性，使用`defineModel`可以简化代码，提高组件的易用性。\n - **复杂业务逻辑处理**：在组合式函数中处理复杂的业务逻辑时，`defineModel`可以帮助更好地管理响应式数据，实现数据的双向绑定。\n",{"_54":560,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/920/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/920/timeline",{"_54":563,"_56":57,"_58":564,"_60":565,"_62":566,"_64":567,"_66":568,"_68":569,"_70":570,"_72":571,"_74":572,"_107":573,"_127":128,"_129":26,"_130":-5,"_131":576,"_133":577,"_155":148,"_149":579,"_151":580,"_154":-5,"_158":159,"_160":581,"_165":-5,"_166":582,"_168":583,"_180":585,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/919","https://api.github.com/repos/pro-collection/interview-question/issues/919/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/919/comments","https://api.github.com/repos/pro-collection/interview-question/issues/919/events","https://github.com/pro-collection/interview-question/issues/919",2531197274,"I_kwDOJGDC6c6W3wFa",919,"[Vue] 子组件是否能使用未定义的 props 【热度: 266】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[574,575],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":526,"_68":527,"_54":528,"_113":529,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":578,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T13:38:25Z","2024-09-17T13:39:25Z",{"_162":148,"_163":148,"_164":148},"**关键词**：组件定义 props\n\n在 Vue 中，子组件默认情况下不能使用未在 `props` 选项中明确定义的属性。Vue 的组件系统旨在明确组件之间的接口，其中 `props` 作为组件公开的属性，必须被明确声明。这样做的目的是为了增强代码的可读性和可维护性，确保组件之间的通信清晰和有序。\n\n### 但是，有几种方式可以绕过这个限制：\n\n#### 1. 使用 `$attrs`\n\n尽管子组件不能直接使用未声明的 `props`，但它可以通过继承未声明的属性来接收来自父组件的非 `props` 属性。Vue 实例的 `$attrs` 对象包含了传递给一个组件，但是未在 `props` 配置中声明的属性。这些属性包括 `class` 和 `style`，以及绑定的事件监听器（如果 `inheritAttrs` 配置项设置为 `false`）。\n\n```html\n\n\n\n\n```\n\n#### 2. 使用 `$props`\n\n虽然不推荐这种做法，但理论上，如果你通过动态的方式绑定父组件的属性到子组件上，并在子组件内部使用 `this.$props` 来访问这些属性，Vue 会警告未找到对应的 `prop` 定义，但这并不会阻止你在组件内部获取这些属性的值。\n\n```html\n\n\n```\n\n这种方式不利于保持组件接口的清晰，很容易导致难以跟踪和理解的代码，因此并不推荐使用。\n\n### 最佳实践\n\n最佳实践是始终在子组件中明确声明你打算使用的所有 `props`。这有助于保持接口清晰，并使得组件之间的通信更加可靠和可维护。使用 `$attrs` 是处理未声明属性的推荐方式，尤其是当你需要构建高度复用的组件库时，它能提供额外的灵活性，而且可以保持组件接口的整洁和明确。\n",{"_54":584,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/919/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/919/timeline",{"_54":587,"_56":57,"_58":588,"_60":589,"_62":590,"_64":591,"_66":592,"_68":593,"_70":594,"_72":595,"_74":596,"_107":597,"_127":128,"_129":26,"_130":-5,"_131":600,"_133":601,"_155":148,"_149":603,"_151":604,"_154":-5,"_158":159,"_160":605,"_165":-5,"_166":606,"_168":607,"_180":609,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/918","https://api.github.com/repos/pro-collection/interview-question/issues/918/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/918/comments","https://api.github.com/repos/pro-collection/interview-question/issues/918/events","https://github.com/pro-collection/interview-question/issues/918",2531188679,"I_kwDOJGDC6c6W3t_H",918,"[Vue] 子组件定义接受的 props 方式有哪些【热度: 465】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[598,599],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":526,"_68":527,"_54":528,"_113":529,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":602,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T13:34:58Z","2024-09-17T13:39:18Z",{"_162":148,"_163":148,"_164":148},"**关键词**：组件定义 props\n\n在 Vue 中，子组件可以通过 `props` 接收来自父组件的数据。`props` 是组件的可配置项之一，它允许外部环境传递数据给组件。有几种不同的方式来定义组件的 `props`，这些方式提供了不同级别的验证和默认值设置。以下是 Vue 中定义 `props` 的不同方式及其特点：\n\n### 1. **数组形式**\n\n直接使用字符串数组列出所有想要接受的 `props`。这种方式最简单，但不提供额外的验证。\n\n```javascript\nprops: [\"title\", \"likes\", \"isPublished\", \"commentIds\", \"author\"];\n```\n\n### 2. **对象形式（具有类型检查）**\n\n使用对象形式，你可以为每个 prop 指定类型，这提供了基本的类型检查。`type` 可以是下列原生构造函数之一：`String`、`Number`、`Boolean`、`Array`、`Object`、`Date`、`Function`、`Symbol`，或者这些构造函数组成的数组，表示多种可能的类型。\n\n```javascript\nprops: {\n title: String,\n likes: Number,\n isPublished: Boolean,\n commentIds: Array,\n author: Object,\n callback: Function,\n contactsPromise: Promise // 仅在 Vue 3 中可用\n}\n```\n\n### 3. **对象形式（具有类型检查和默认值）**\n\n除了类型检查之外，还可以为每个 prop 指定默认值或验证函数。这种方式在需要确保组件的 prop 具有正确的类型或默认值时非常有用。\n\n```javascript\nprops: {\n title: {\n type: String,\n required: true\n },\n likes: {\n type: Number,\n default: 0\n },\n isPublished: {\n type: Boolean,\n default: false\n },\n comments: {\n type: Array,\n // 对于对象或数组类型的 prop，必须使用一个函数来返回默认值\n default: function () {\n return []\n }\n },\n author: {\n type: Object,\n default: function () {\n return { name: 'Anonymous' }\n }\n },\n callback: {\n type: Function,\n // 默认值为一个函数\n default: function () {\n return () => {}\n }\n }\n}\n```\n\n### 4. **对象形式（具有验证函数）**\n\n可以为 `props` 提供一个自定义验证函数。如果验证失败，则 Vue 会发出警告（仅在开发模式下）。这种方式适用于需要进行更复杂验证的场景。\n\n```javascript\nprops: {\n age: {\n type: Number,\n validator: function (value) {\n // 这个值必须匹配下面的条件\n return value > 0 && value < 100;\n }\n }\n}\n```\n",{"_54":608,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/918/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/918/timeline",{"_54":611,"_56":57,"_58":612,"_60":613,"_62":614,"_64":615,"_66":616,"_68":617,"_70":618,"_72":619,"_74":620,"_107":621,"_127":128,"_129":26,"_130":-5,"_131":624,"_133":625,"_155":148,"_149":627,"_151":628,"_154":-5,"_158":159,"_160":629,"_165":-5,"_166":630,"_168":631,"_180":633,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/917","https://api.github.com/repos/pro-collection/interview-question/issues/917/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/917/comments","https://api.github.com/repos/pro-collection/interview-question/issues/917/events","https://github.com/pro-collection/interview-question/issues/917",2531183393,"I_kwDOJGDC6c6W3ssh",917,"[Vue] vue 全局注册组件很方便，为何不都是用全局注册【热度: 592】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[622,623],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":526,"_68":527,"_54":528,"_113":529,"_115":125,"_117":26,"_118":126},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":626,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T13:32:45Z","2024-09-17T13:34:25Z",{"_162":148,"_163":148,"_164":148},"Vue 的全局注册组件确实提供了便利，特别是在组件需要跨多个视图或组件重复使用时。但是，如果全部或大量使用全局注册，也会带来一些缺点或问题。下面列举了几个不推荐全面使用全局注册组件的原因：\r\n\r\n### 1. **应用启动性能**\r\n全局注册的组件会在应用启动时全部加载和注册，这对于小至中等规模的应用可能不是问题。但对于大型或超大型的应用，过多的全局注册会增加应用的启动时间和初始加载时间，对性能造成影响。\r\n\r\n### 2. **代码分割和懒加载**\r\n如果使用全局注册，就很难对组件进行代码分割和懒加载，这意味着即使用户当前不需要该组件，它们仍然会被加载。相反，局部注册组件可以结合 Vue 的动态组件和 Webpack 的代码分割特性，按需加载组件，减少首屏加载时间。\r\n\r\n### 3. **命名空间问题**\r\n全局注册所有组件可能会导致组件命名冲突。在大型项目中，维护一个不冲突的全局命名空间会变得非常困难。局部注册可以在组件内解决名称冲突，更加灵活。\r\n\r\n### 4. **项目可维护性**\r\n使用全局注册，开发者可能难以追踪某个组件的使用情况，因为它可以在任何地方被引用。相比之下，局部注册组件会在使用它的组件文件中明显显示出来，这使得项目结构更清晰，便于团队成员理解和维护。\r\n\r\n### 5. **树摇（Tree Shaking）**\r\n对于基于模块的工具链（如Webpack），局部注册的组件更容易被优化，因为未使用的组件可以在构建阶段被摇掉（Tree Shaking），减少最终的包大小。而全局注册的组件则更难被摇掉，因为构建工具很难确定它们是否在某处被使用。\r\n\r\n### 6. **组件复用性**\r\n虽然全局注册的组件更易于在任何地方重用，但其实使用局部注册也可以通过将组件导入到需要的组件中来重用组件，同时还能享受前面提到的好处。\r\n",{"_54":632,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/917/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/917/timeline",{"_54":635,"_56":57,"_58":636,"_60":637,"_62":638,"_64":639,"_66":640,"_68":641,"_70":642,"_72":643,"_74":644,"_107":645,"_127":128,"_129":26,"_130":-5,"_131":647,"_133":648,"_155":148,"_149":650,"_151":650,"_154":-5,"_158":159,"_160":651,"_165":-5,"_166":652,"_168":653,"_180":655,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/916","https://api.github.com/repos/pro-collection/interview-question/issues/916/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/916/comments","https://api.github.com/repos/pro-collection/interview-question/issues/916/events","https://github.com/pro-collection/interview-question/issues/916",2531180190,"I_kwDOJGDC6c6W3r6e",916,"[Vue] vue3 里面 `\n```\n\n在这个例子中，我们首先需要从 `vue` 导入 `ref` 和 `defineComponent`。然后，我们通过 `defineComponent` 函数定义组件，并在 `setup` 函数中定义响应式状态和函数，最后返回这些响应式状态和函数以在模板中使用它们。\n\n**使用 `\n```\n\n当使用 `\n```\n\n父组件可以这样使用作用域插槽：\n\n```html\n\n\n \n\n```\n\n在这里，`itemData` 是子组件传递给插槽的数据对象，父组件通过解构它来访问插槽数据。\n",{"_54":700,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/914/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/914/timeline",{"_54":703,"_56":57,"_58":704,"_60":705,"_62":706,"_64":707,"_66":708,"_68":709,"_70":710,"_72":711,"_74":712,"_107":713,"_127":128,"_129":26,"_130":-5,"_131":715,"_133":716,"_155":148,"_149":718,"_151":719,"_154":-5,"_158":159,"_160":720,"_165":-5,"_166":721,"_168":722,"_180":724,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/913","https://api.github.com/repos/pro-collection/interview-question/issues/913/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/913/comments","https://api.github.com/repos/pro-collection/interview-question/issues/913/events","https://github.com/pro-collection/interview-question/issues/913",2530514829,"I_kwDOJGDC6c6W1JeN",913,"[Vue] 侦听器在什么情况下是需要清理副作用的【热度: 148】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[714],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":717,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T09:10:48Z","2024-09-17T09:10:49Z",{"_162":148,"_163":148,"_164":148},"**关键词**：侦听器副作用\n\n在 Vue 3 中，清理副作用主要指的是在一个响应式侦听器（例如：`watch` 或 `watchEffect`）中，当侦听的响应式状态（或侦听的回调函数）重新执行之前或组件销毁时，移除或停止之前创建的资源，以避免内存泄漏、性能问题或意外的行为。下面列举了一些需要清理副作用的典型情况：\n\n### 1. **使用定时器时**\n\n当你在侦听器的回调函数中设置了定时器（如使用`setInterval`或`setTimeout`），并且不希望这个定时器在回调函数下次执行时仍然活动，你就需要在回调函数下一次执行之前清理这个定时器。\n\n```javascript\nwatchEffect((onInvalidate) => {\n const timer = setInterval(() => {\n // 执行一些逻辑\n }, 1000);\n\n // 清理函数\n onInvalidate(() => {\n clearInterval(timer);\n });\n});\n```\n\n### 2. **订阅外部或异步资源时**\n\n当你订阅了一些外部资源，如 WebSocket 连接、外部 API 的实时数据流、或是自定义事件监听器，如果这些资源在组件卸载后继续活动，可能会导致内存泄漏或其他意外行为。\n\n```javascript\nwatchEffect((onInvalidate) => {\n const ws = new WebSocket(\"ws://example.com/feed\");\n\n ws.onmessage = (message) => {\n // 处理消息\n };\n\n // 侦听器清理函数\n onInvalidate(() => {\n ws.close();\n });\n});\n```\n\n### 3. **响应式引用发生变化时**\n\n当你侦听的响应式引用（如 `ref` 或 `reactive` 对象）在回调函数生命周期中发生变化时，如果回调生产了外部副作用（比如修改了外部状态、操作了 DOM、设置了全局事件监听器等），你可能需要清理这些副作用，避免它们在重新计算或组件卸载时造成问题。\n\n```javascript\nconst user = ref(null);\n\nwatchEffect((onInvalidate) => {\n // 假设fetchUser返回一个取消订阅或清理资源的函数\n const unsubscribe = fetchUser(user.value, (newUser) => {\n user.value = newUser;\n });\n\n onInvalidate(() => {\n unsubscribe();\n });\n});\n```\n\n### 为什么要清理副作用\n\n清理副作用是为了防止不必要的资源占用和潜在的内存泄漏，尤其是在使用外部资源、设置定时器、或订阅数据时。Vue 提供的`onInvalidate`回调允许在侦听器重新运行之前或组件销毁时执行清理逻辑，确保应用资源被适当管理和释放。\n",{"_54":723,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/913/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/913/timeline",{"_54":726,"_56":57,"_58":727,"_60":728,"_62":729,"_64":730,"_66":731,"_68":732,"_70":733,"_72":734,"_74":735,"_107":736,"_127":128,"_129":26,"_130":-5,"_131":738,"_133":739,"_155":148,"_149":741,"_151":742,"_154":-5,"_158":159,"_160":743,"_165":-5,"_166":744,"_168":745,"_180":747,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/912","https://api.github.com/repos/pro-collection/interview-question/issues/912/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/912/comments","https://api.github.com/repos/pro-collection/interview-question/issues/912/events","https://github.com/pro-collection/interview-question/issues/912",2530510713,"I_kwDOJGDC6c6W1Id5",912,"[Vue] watch 和 watchEffect 场景上有何区别，该如何选择【热度: 174】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[737],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":740,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T09:09:32Z","2024-09-17T09:10:37Z",{"_162":148,"_163":148,"_164":148},"**关键词**：侦听器选择\n\n`watch` 和 `watchEffect` 在 Vue 3 中都是强大的响应式特性，用于侦听响应式状态的变化并执行一些副作用（如调用函数）。虽然它们很相似，但在使用场景和行为上有一些关键的区别，了解这些区别可以帮助你选择最合适的工具来实现你的需求。\n\n### watch\n\n- **精确性**：`watch` 允许你明确指定要侦听的数据源，并且可以分别访问其新值和旧值。这让 `watch` 在需要对特定数据变化做出响应时非常精确和灵活。\n- **惰性执行**：`watch` 默认情况下是惰性执行的，即它需要数据发生变化后才执行回调。这意味着在初始化时，`watch` 的回调不会执行，除非你通过配置使其立即执行。\n- **使用场景**：当你需要明确知道数据何时改变以及如何改变时（例如对比新旧值），或者需要侦听一个或多个特定的响应式引用时，`watch` 是更好的选择。\n\n### watchEffect\n\n- **自动侦测**：`watchEffect` 会自动侦测其回调函数中用到的响应式状态，并在这些状态改变时重新执行。这意味着你不需要明确指定侦听的状态，让侦听副作用的编写更简单直接。\n- **立即执行**：`watchEffect` 回调会在初始时立即执行一次，然后再每次依赖的响应式状态变化时再次执行。这适合于不需要初始条件判断且希望立即根据响应式状态渲染或执行逻辑的场景。\n- **使用场景**：当你需要自动追踪并响应所有使用到的响应式状态变化时，`watchEffect` 是更便捷的选项。它适用于依赖项不明确或者希望自动追踪依赖并执行副作用的场合。\n\n### 如何选择\n\n1. **如果你的副作用逻辑需要明确侦听特定的数据源，并且需要区分初始执行和依赖更新时的逻辑**，那么使用 `watch` 更合适。`watch` 提供了对侦听数据和执行逻辑的细粒度控制。\n2. **如果你的逻辑只是单纯地需要对使用到的任何响应式状态的改变做出响应，且希望简化依赖跟踪**，`watchEffect` 更简单、更易于使用。它自动收集依赖项，简化了代码，使你的副作用逻辑更容易编写和维护。\n\n通常，选择依赖于你想要的控制级别和特定的使用情况。`watch` 提供了更高的灵活性和控制力，`watchEffect` 则为常见的自动响应逻辑提供了便利。了解这些区别和使用场景可以帮助你更合理地使用 Vue 3 的响应式系统。\n",{"_54":746,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/912/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/912/timeline",{"_54":749,"_56":57,"_58":750,"_60":751,"_62":752,"_64":753,"_66":754,"_68":755,"_70":756,"_72":757,"_74":758,"_107":759,"_127":128,"_129":26,"_130":-5,"_131":761,"_133":762,"_155":185,"_149":764,"_151":765,"_154":-5,"_158":159,"_160":766,"_165":-5,"_166":767,"_168":768,"_180":770,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/911","https://api.github.com/repos/pro-collection/interview-question/issues/911/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/911/comments","https://api.github.com/repos/pro-collection/interview-question/issues/911/events","https://github.com/pro-collection/interview-question/issues/911",2530504490,"I_kwDOJGDC6c6W1G8q",911,"[Vue] 介绍一下 3.x 侦听器 watchEffect【热度: 323】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[760],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":763,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T09:07:25Z","2024-12-02T03:18:08Z",{"_162":148,"_163":148,"_164":148},"**关键词**：侦听器 watchEffect\n\nVue 3 引入了 Composition API，其中包括一个强大的函数 `watchEffect`，用于侦听响应式状态的变化，并当响应式状态变化时自动执行。\n\n### 基本用法\n\n`watchEffect` 接收一个函数作为参数，Vue 将会自动跟踪这个函数内部使用的所有响应式状态（响应式引用、响应式对象等）。当这些状态变化时，`watchEffect` 将重新执行这个函数。\n\n```javascript\nimport { ref, watchEffect } from \"vue\";\n\nconst count = ref(0);\n\nwatchEffect(() => {\n console.log(count.value);\n});\n```\n\n在上面的示例中，每当 `count` 的值发生变化时，`watchEffect`回调函数都会被执行，并打印 `count` 的新值。\n\n### 立即执行\n\n与 `watch` API 不同，`watchEffect` 在初次调用时会立即执行一次回调函数。这对于根据响应式状态进行初始化设置非常有用。\n\n### 清理副作用\n\n`watchEffect` 的回调函数可以返回一个清理函数，用来在回调函数重新执行之前进行清理。这就像组件的 `beforeDestroy` 钩子函数，用来防止内存泄露等问题。\n\n```javascript\nwatchEffect((onInvalidate) => {\n const timer = setInterval(() => {\n /* ... */\n }, 1000);\n\n // 当侦听器重新执行或组件卸载时，清理定时器\n onInvalidate(() => {\n clearInterval(timer);\n });\n});\n```\n\n### 控制侦听\n\n`watchEffect` 函数还可以接收一个第二个参数——一个选项对象，用来控制侦听器的行为。例如，通过设置 `flush` 选项，你可以控制执行时机是在组件更新之前、之后，还是同步执行。\n\n```javascript\nwatchEffect(\n () => {\n /* ... */\n },\n {\n flush: \"post\", // 'pre', 'post', 或 'sync'\n }\n);\n```\n\n### 使用场景\n\n`watchEffect` 适用于以下场景：\n\n- 自动收集依赖：不需要像 `watch` 那样明确指定侦听的源。\n- 初始化时的副作用：例如，根据响应式状态的初始值进行 DOM 操作、发送请求等。\n- 定期自动清理：比如，自动清理定时器、取消订阅等。\n\n`watchEffect` 提供了一种更为简洁和自动化的方式来响应状态变更，使得管理副作用（side effects）的逻辑更加直观和易于维护。\n",{"_54":769,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/911/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/911/timeline",{"_54":772,"_56":57,"_58":773,"_60":774,"_62":775,"_64":776,"_66":777,"_68":778,"_70":779,"_72":780,"_74":781,"_107":782,"_127":128,"_129":26,"_130":-5,"_131":784,"_133":785,"_155":185,"_149":787,"_151":788,"_154":-5,"_158":159,"_160":789,"_165":-5,"_166":790,"_168":791,"_180":793,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/910","https://api.github.com/repos/pro-collection/interview-question/issues/910/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/910/comments","https://api.github.com/repos/pro-collection/interview-question/issues/910/events","https://github.com/pro-collection/interview-question/issues/910",2530502258,"I_kwDOJGDC6c6W1GZy",910,"[Vue] 介绍一下 3.x 侦听器 watch【热度: 671】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[783],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":786,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T09:06:46Z","2024-12-02T03:25:55Z",{"_162":148,"_163":148,"_164":148},"**关键词**：侦听器 watch\n\nVue 3 提供了一个灵活的响应式系统，其中 `watch` 函数是实现细粒度数据观察和响应的重要工具。`watch` 能够侦听 Vue 应用中的响应式数据的变化，并在数据变化时执行相应的回调函数。这个功能在 Vue 2 中以 `watch` 选项的形式存在，而在 Vue 3 的组合式 API 中，则是作为 `watch` 函数来使用。\n\n### 使用 `watch` 侦听 Refs\n\n`watch`函数可以用来侦听一个引用类型（ref）的变化：\n\n```javascript\nimport { ref, watch } from \"vue\";\n\nconst count = ref(0);\n\nwatch(count, (newValue, oldValue) => {\n console.log(`新值：${newValue}，旧值：${oldValue}`);\n});\n```\n\n在上面的例子中，当 `count` 的值变化时，回调函数就会被调用，并打印新旧值。\n\n### 使用 `watch` 侦听响应式对象\n\n除了侦听引用类型，`watch` 还可以侦听响应式对象的属性变化：\n\n```javascript\nimport { reactive, watch } from \"vue\";\n\nconst state = reactive({ count: 0 });\n\nwatch(\n () => state.count,\n (newValue, oldValue) => {\n console.log(`新值：${newValue}，旧值：${oldValue}`);\n }\n);\n```\n\n记住，当侦听响应式对象的某个属性时，你需要使用一个函数来返回这个属性的当前值。\n\n### 侦听多个源\n\n`watch` 还可以同时侦听多个数据源：\n\n```javascript\nwatch([ref1, ref2], ([newVal1, newVal2], [oldVal1, oldVal2]) => {\n // 处理逻辑\n});\n```\n\n### 深度侦听\n\n通过设置 `watch` 的选项 `{ deep: true }`，可以进行深度侦听，即侦听对象内嵌属性的变化：\n\n```javascript\nwatch(obj, callback, { deep: true });\n```\n\n### 清理和停止监听\n\n`watch` 函数返回一个停止监听的函数，可以用来在合适的时机停止侦听：\n\n```javascript\nconst stopWatching = watch(dataSource, callback);\n// 停止侦听\nstopWatching();\n```\n\n### watchEffect\n\n除了 `watch`，Vue 3 也引入了 `watchEffect` 函数。`watchEffect` 自动跟踪其回调函数中使用的响应式引用和响应式对象的属性，并在它们变化时运行回调函数。它不需要显式声明侦听的数据源，这让它更简单易用，但在某些情况下，它可能不如 `watch` 那么精确控制。\n",{"_54":792,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/910/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/910/timeline",{"_54":795,"_56":57,"_58":796,"_60":797,"_62":798,"_64":799,"_66":800,"_68":801,"_70":802,"_72":803,"_74":804,"_107":805,"_127":128,"_129":26,"_130":-5,"_131":807,"_133":808,"_155":148,"_149":810,"_151":810,"_154":-5,"_158":159,"_160":811,"_165":-5,"_166":812,"_168":813,"_180":815,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/909","https://api.github.com/repos/pro-collection/interview-question/issues/909/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/909/comments","https://api.github.com/repos/pro-collection/interview-question/issues/909/events","https://github.com/pro-collection/interview-question/issues/909",2530494706,"I_kwDOJGDC6c6W1Ejy",909,"[Vue] 生命周期【热度: 848】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[806],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":809,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T09:03:49Z",{"_162":148,"_163":148,"_164":148},"**关键词**：生命周期\n\n最基础生命周期直接可以看下面这个图，如果只能回答下面这个图里面的生命周期，那么该问题只能是「中等」级别；之所以是「高等」级别的问题，因为还有很多别的生命周期，大家不一定知道，但是也很重要；\n\n![image.png](https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/135d7bede61b4423961c2dfb208f44a7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pm05bCP56-G:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiNDEyNTAyMzM1Nzg5OTM2NyJ9&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1726649822&x-orig-sign=7AZx17uuMqrw4eKTe%2BJoj%2FHSI4c%3D)\n\n### Vue3 新增的生命周期\n\n- `onErrorCaptured()`\n- `onRenderTracked()`\n- `onRenderTriggered()`\n- `onActivated()`\n- `onDeactivated()`\n- `onServerPrefetch()`\n\nVue 3 引入了组合式 API，随之而来的是一系列新的生命周期钩子，这些钩子提供了更细粒度的控制方式，尤其是在使用 `setup()` 函数时非常有用。下面简单解释一下你提到的这几个新的生命周期钩子：\n\n**onErrorCaptured()**\n\n- **作用**：捕获组件及其子组件树中发生的错误。它提供了一个句柄来处理错误，并防止错误继续冒泡。\n- **使用场景**：当你需要在组件树中某个层级捕获并处理错误时使用，特别适用于构建错误边界。\n\n**onRenderTracked()**\n\n- **作用**：每当一个响应式依赖被访问时调用，允许开发者跟踪渲染过程中依赖的访问。\n- **使用场景**：用于调试目的，帮助开发者理解组件如何响应数据变化，以及哪些依赖触发了组件的重新渲染。\n\n**onRenderTriggered()**\n\n- **作用**：每当响应式依赖的变化导致组件重新渲染时调用。\n- **使用场景**：同样用于调试目的，让开发者知道是哪个具体的依赖变化导致了组件的更新。\n\n**onActivated() 和 onDeactivated()**\n\n- **作用**：这两个钩子分别在 `` 缓存的组件激活和停用时被调用。\n- **使用场景**：在使用 `` 时非常有用，可以用来执行如清理或设置相关资源的操作。\n\n**onServerPrefetch()**\n\n- **作用**：允许组件在服务器端渲染（SSR）期间进行数据预取。\n- **使用场景**：用于服务器端渲染的 Vue 应用中，可以在组件级别添加数据预取逻辑，提高首屏加载性能和 SEO 优化。\n\n这些新的生命周期钩子为 Vue 应用提供了更多的灵活性和控制力，允许开发者编写更高效、更可靠的代码。特别是在构建大型应用或需要精细管理资源和错误处理的情况下非常有用。\n",{"_54":814,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/909/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/909/timeline",{"_54":817,"_56":57,"_58":818,"_60":819,"_62":820,"_64":821,"_66":822,"_68":823,"_70":824,"_72":825,"_74":826,"_107":827,"_127":128,"_129":26,"_130":-5,"_131":829,"_133":830,"_155":148,"_149":832,"_151":833,"_154":-5,"_158":159,"_160":834,"_165":-5,"_166":835,"_168":836,"_180":838,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/908","https://api.github.com/repos/pro-collection/interview-question/issues/908/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/908/comments","https://api.github.com/repos/pro-collection/interview-question/issues/908/events","https://github.com/pro-collection/interview-question/issues/908",2530473074,"I_kwDOJGDC6c6W0_Ry",908,"[Vue] 输入绑定修饰符 .lazy 作用是啥【热度: 95】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[828],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":831,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T08:55:29Z","2024-09-17T08:55:30Z",{"_162":148,"_163":148,"_164":148},"**关键词**：输入绑定修饰符\n\n在 Vue 中，`.lazy` 是一个输入绑定修饰符，用于 `v-model` 指令。它的主要作用是改变数据同步的时机：默认情况下，使用 `v-model` 绑定的输入字段会在每次 `input` 事件触发时同步数据（即用户输入时实时同步），而通过添加 `.lazy` 修饰符后，数据同步会改为在 `change` 事件发生时才进行，通常这意味着在输入字段失去焦点或按下回车键后。\n\n### 使用 `.lazy` 修饰符的好处\n\n- **性能优化**：对于一些性能敏感的应用，或者当输入操作导致重度计算时，减少数据同步的频率可以提升性能。\n- **用户体验**：在一些场景下，可能希望用户完成输入后（例如填写完整的表单字段后）再收集数据，使用 `.lazy` 可以提升这类体验。\n- **减少数据校验**：如果你在输入数据时进行校验或处理，使用 `.lazy` 可以减少这种校验的频率，仅在用户完成输入时执行。\n\n### 示例\n\n```html\n\n\n```\n\n在这个例子中，不会在每次用户输入时同步 `message` 的值，而是在输入框失去焦点，或用户按下回车键时同步，这可以减少数据同步的次数，适用于不需要实时更新数据，或更新操作比较昂贵的场景。\n\n总之，`.lazy` 修饰符提供了一种简便的方式来优化数据绑定的行为，尤其是在你希望控制数据更新频率，或者当实时更新不是必要时非常有用。\n",{"_54":837,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/908/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/908/timeline",{"_54":840,"_56":57,"_58":841,"_60":842,"_62":843,"_64":844,"_66":845,"_68":846,"_70":847,"_72":848,"_74":849,"_107":850,"_127":128,"_129":26,"_130":-5,"_131":852,"_133":853,"_155":148,"_149":855,"_151":855,"_154":-5,"_158":159,"_160":856,"_165":-5,"_166":857,"_168":858,"_180":860,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/907","https://api.github.com/repos/pro-collection/interview-question/issues/907/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/907/comments","https://api.github.com/repos/pro-collection/interview-question/issues/907/events","https://github.com/pro-collection/interview-question/issues/907",2530471759,"I_kwDOJGDC6c6W0-9P",907,"[Vue] 触发事件修饰符 .exact 的作用是啥【热度: 454】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[851],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":854,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T08:54:55Z",{"_162":148,"_163":148,"_164":148},"**关键词**：事件修饰符、.exact 作用\n\n`.exact` 修饰符在 Vue 事件处理中起着非常特定的作用。它允许控制触发事件处理器的确切方式，确保只有在指定的系统修饰键（如 `ctrl`、`alt`、`shift`、`meta`）组合完全匹配时，事件处理函数才会被触发。这意味着，如果你绑定了 `.exact` 修饰符到一个事件上，只有在没有其他未指定的修饰键被按下的情况下，该事件才会被触发。\n\n### 使用场景\n\n`.exact` 修饰符非常有用，尤其是在你想要精确控制事件触发条件的时候。例如，你可能有以下场景：\n\n- 当用户严格只按下 `ctrl` 键时触发一个动作，如果用户同时按下了 `ctrl` 和 `shift`，则不触发。\n\n### 示例\n\n```html\n\n\n\n\n\n```\n\n在第一个例子中，点击按钮将只在没有按下 `ctrl`、`alt`、`shift` 或 `meta` 键的情况下触发 `doThis` 方法。在第二个例子中，`doThat` 方法只会在严格按下 `ctrl` 键时触发点击事件。\n",{"_54":859,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/907/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/907/timeline",{"_54":862,"_56":57,"_58":863,"_60":864,"_62":865,"_64":866,"_66":867,"_68":868,"_70":869,"_72":870,"_74":871,"_107":872,"_127":128,"_129":26,"_130":-5,"_131":874,"_133":875,"_155":148,"_149":877,"_151":878,"_154":-5,"_158":159,"_160":879,"_165":-5,"_166":880,"_168":881,"_180":883,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/906","https://api.github.com/repos/pro-collection/interview-question/issues/906/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/906/comments","https://api.github.com/repos/pro-collection/interview-question/issues/906/events","https://github.com/pro-collection/interview-question/issues/906",2530465447,"I_kwDOJGDC6c6W09an",906,"[Vue] 提供了哪些默认事件修饰符【热度: 366】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[873],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":876,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T08:52:02Z","2024-09-17T08:52:03Z",{"_162":148,"_163":148,"_164":148},"**关键词**：事件修饰符\n\n在 Vue 中，事件修饰符是一些由点 (.) 开头的特殊后缀，用于指示 Vue 对 DOM 事件进行某种特殊处理。Vue 提供了一系列的默认事件修饰符来帮助开发者更方便地处理一些常见的 DOM 事件行为。\n\n下面是 Vue 3 中提供的一些默认事件修饰符：\n\n| 事件修饰符 | 描述 |\n| ---------- | ------------------------------------------------------------------------ |\n| `.stop` | 调用 `event.stopPropagation()` 阻止事件冒泡。 |\n| `.prevent` | 调用 `event.preventDefault()` 阻止默认事件行为。 |\n| `.capture` | 使用事件捕获模式添加事件监听器，而不是冒泡模式。 |\n| `.self` | 仅当事件是从事件绑定的元素本身触发时才触发回调。 |\n| `.once` | 事件只触发一次，之后移除事件监听器。 |\n| `.passive` | 以 `{ passive: true }` 模式添加监听器，表示不会调用 `preventDefault()`。 |\n\n这些修饰符可以单独使用，也可以组合使用。以下是一些示例：\n\n```html\n\n\n\n\n\n\n\nStop Propagation and Prevent Default\n\n\n

Only Trigger on Self

\n\n\n\n```\n\n使用这些事件修饰符可以使你的事件处理逻辑更简洁和直观，同时也能够实现一些复杂的事件处理方式。\n",{"_54":882,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/906/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/906/timeline",{"_54":885,"_56":57,"_58":886,"_60":887,"_62":888,"_64":889,"_66":890,"_68":891,"_70":892,"_72":893,"_74":894,"_107":895,"_127":128,"_129":26,"_130":-5,"_131":897,"_133":898,"_155":148,"_149":900,"_151":901,"_154":-5,"_158":159,"_160":902,"_165":-5,"_166":903,"_168":904,"_180":906,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/905","https://api.github.com/repos/pro-collection/interview-question/issues/905/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/905/comments","https://api.github.com/repos/pro-collection/interview-question/issues/905/events","https://github.com/pro-collection/interview-question/issues/905",2530456372,"I_kwDOJGDC6c6W07M0",905,"[Vue] computed 和普通函数有何区别【热度: 332】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[896],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":201,"_64":202,"_58":203,"_66":204,"_68":205,"_70":206,"_72":207,"_118":208,"_143":899,"_145":210,"_147":148,"_127":128,"_149":211,"_151":212,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T08:47:41Z","2024-09-17T08:47:42Z",{"_162":148,"_163":148,"_164":148},"**关键词**：计算属性 computed 作用\n\n> 作者总结\n> 其实没有啥好说的，就一个核心：缓存！computed 是支持缓存的，避免了不必要的重复计算，有较高性能表现\n\n下面是一个表格，对比了 Vue 3 中的 `computed` 计算属性和普通函数方法的主要差异：\n\n| 特性 | 计算属性 (`computed`) | 普通函数方法 (`methods`) |\n| ------------ | -------------------------------------------------------- | ------------------------------------------------------ |\n| **缓存** | 是。只有当依赖数据变化时，才会重新计算。 | 否。每次调用都会执行函数逻辑。 |\n| **性能** | 高。避免了不必要的计算，只在依赖变化时重新计算。 | 较低。不区分是否有数据更新，都会执行。 |\n| **触发更新** | 依赖数据变化时自动更新。 | 需要手动触发或组件重新渲染时才更新。 |\n| **使用场景** | 当数据变化需要进行复杂运算时，且结果要被多次引用。 | 每次都需执行新逻辑或操作不依赖响应式数据时。 |\n| **访问方式** | 如访问属性一样，不需要加括号。 | 在模板中调用时需要加括号。 |\n| **返回值** | 调用时返回计算后的结果，不需要执行任何函数。 | 必须执行函数以获取结果。 |\n| **更新性能** | 只在依赖变化时重新求值，如果依赖未变化则返回上次的结果。 | 在每次访问或调用时无条件执行，不考虑依赖数据是否变化。 |\n\n通过对比，我们可以看到两者在 Vue 应用中各自的优势和应用场景。`computed` 适合用于基于数据变化需要重新计算的场景，特别是当这些计算比较昂贵，或者计算结果会被多处使用时。而普通函数方法更适合用于执行不依赖响应式数据的操作，或者当操作每次都需要产生不同结果时。正确地选择使用计算属性还是普通方法，可以优化你的 Vue 应用的性能和可维护性。\n",{"_54":905,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/905/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/905/timeline","pagination",{"_909":910,"_162":911},"value",6,32,"actionData","errors"]