Vue
文章平均质量分 87
Vue 相关知识点、核心技术、实战效果、面试问题、工作上遇到的问题...总结分享。
星辰迷上大海
饮水思源,行胜于言。这盛世如你所愿!运动使我健康,旅行使我记忆,学习让我懂得思考。
展开
-
Vue的性能优化常用的有哪些?
Vue性能优化包括减少数据量、合理使用v-if和v-for、懒加载组件和图片、优化路由、缓存、压缩代码、骨架屏等。同时需注意对象层级不宜过深、合理使用computed和watch、避免内存泄漏。整合这些方法可以显著提升Vue应用性能。原创 2024-04-07 07:45:00 · 720 阅读 · 0 评论 -
前端Vue篇之vue3 ref 能处理对象了?
使用 ref 来处理对象是完全可行的,只是它的工作方式与处理基本数据类型有所不同。如果你需要一个响应式的对象,并且希望对象内部的修改能够触发更新,那么使用 reactive 更加合适。如果你只是需要一个对象的引用,并且可以接受通过替换整个对象来触发更新,那么使用 ref 就足够了。原创 2024-03-30 09:44:08 · 711 阅读 · 0 评论 -
前端Vue篇之Vue3响应式:Ref和Reactive
Ref适用于简单数据管理,如计数器,通过.value访问和修改数据;而Reactive适合处理复杂对象数据,使整个对象都变成响应式,方便管理对象属性的变化。原创 2024-03-22 07:45:00 · 2148 阅读 · 3 评论 -
前端Vue篇之Vue-router 导航守卫有哪些、Vue-router 路由钩子在生命周期的体现、Vue-router跳转和location.href有什么区别
Vue Router 中的导航守卫包括 beforeEach、beforeResolve、afterEach 和路由独享守卫 beforeEnter。这些守卫允许您在路由切换前、解析完成后和路由切换后执行自定义逻辑,比如权限验证、全局加载状态等。原创 2024-03-06 08:15:00 · 1119 阅读 · 0 评论 -
前端Vue篇之如何获取页面的hash变化、`$route` 和`$router` 的区别、params和query的区别
获取页面的hash变化:通过监听 hashchange 事件,可以实时获取页面哈希的变化。使用 window.location.hash 可以读取当前哈希值。原创 2024-03-06 07:45:00 · 1881 阅读 · 0 评论 -
前端Vue篇之Vue-Router 的懒加载如何实现、如何定义动态路由?如何获取传过来的动态参数?
懒加载:在Vue Router中,使用懒加载可以通过import函数和Webpack的代码分割功能来实现。这意味着只有在需要时才会加载相应的组件,而不是一次性加载所有组件。原创 2024-03-05 08:15:00 · 1297 阅读 · 0 评论 -
前端Vue篇之Vue 3.0 中的 Vue Composition API?Composition API与React Hook很像,区别是什么
Vue 3.0 中的 Composition API 和 React Hooks 都是用于在函数式组件中管理状态和逻辑的工具,它们有相似之处,但也有一些区别。原创 2024-03-05 07:45:00 · 2036 阅读 · 0 评论 -
前端Vue篇之Vuex的严格模式是什么,有什么作用,如何开启?如何在组件中批量使用Vuex的getter属性、pinia与vuex有什么区别?
Vuex的严格模式是一种开发模式,用于监测状态的修改,帮助开发者发现对状态的非法修改,提供警告信息,以便更好地理解状态变化。开启严格模式后,Vuex会警告非法状态修改,帮助开发者维护应用的状态变化,提高代码质量。原创 2024-03-04 08:15:00 · 955 阅读 · 0 评论 -
前端Vue篇之Vuex和单纯的全局对象有什么区别?如何在组件中重复使用Vuex的mutation、为什么 Vuex 的 mutation 中不能做异步操作?
Vuex 和单纯的全局对象区别在于 Vuex 提供了更完善和可靠的状态管理方案。它包含了状态管理、响应式特性、组件通信和插件机制等功能,而单纯的全局对象则缺乏这些。原创 2024-03-04 07:45:00 · 2149 阅读 · 0 评论 -
前端Vue篇之vue初始化页面闪动问题
Vue初始化页面闪动问题通常是因为页面加载时数据还未完全渲染,导致看到类似 {{message}} 的模板标记。解决方法包括使用v-cloak指令在 CSS 中设置隐藏样式,或者在根元素上加上 style="display: none;",再使用:style="{display: 'block'}"确保页面加载前隐藏元素。这样可避免页面闪动问题。原创 2024-03-03 08:15:00 · 680 阅读 · 0 评论 -
前端Vue篇之vue如何监听对象或者数组某个属性的变化
在 Vue 中,你可以使用 watch 或者 computed 来监听对象或数组某个属性的变化。但是,如果直接设置数组的某一项的值,或者直接设置对象的某个属性值,这个时候,你会发现页面并没有更新。这是因为 Object.defineProperty() 限制,监听不到变化。原创 2024-03-03 07:45:00 · 3896 阅读 · 0 评论 -
前端Vue篇之MVVM的优缺点、Vue.use的实现原理
MVVM是一种前端架构模式,它的优点包括分离关注点(View、Model、ViewModel),适应性强(可以适应不同的需求和环境),数据绑定(自动同步数据和视图),可测试性(ViewModel可以独立测试)。原创 2024-03-02 08:15:00 · 940 阅读 · 0 评论 -
前端Vue篇之Vue模版编译原理、对SSR的理解
Vue 模板编译是将 Vue 的模板语法转换为渲染函数的过程。在这个过程中,Vue 会将模板字符串解析为抽象语法树(AST),然后根据这个 AST 生成渲染函数。这个渲染函数的作用是将模板字符串中的数据和 DOM 元素关联起来,当数据发生变化时,渲染函数会自动更新 DOM 元素。原创 2024-03-02 07:45:00 · 897 阅读 · 0 评论 -
前端Vue篇之assets和static的区别、delete和Vue.delete删除数组的区别、extend 有什么作用
assets 和 static 的区别:assets 目录一般用于存放需要经过构建处理的静态资源,比如图片、样式表和 JavaScript 文件等。这些资源在构建时会被打包并加入到最终的发布文件中。static 目录则是用于存放不需要经过构建处理的静态资源,比如一些不会改变的第三方库或者全局样式表等。这些资源会原封不动地复制到发布目录中。原创 2024-03-01 08:15:00 · 1204 阅读 · 0 评论 -
前端Vue篇之Vue是如何收集依赖的?
Vue通过在数据属性的getter中收集依赖。当一个数据被访问时,Watcher会被添加到依赖列表中。原创 2024-03-01 07:45:00 · 2248 阅读 · 0 评论 -
前端Vue篇之v-model的实现原理
v-model 实现数据双向绑定的原理是利用 v-bind 绑定数据,并在表单元素上监听 input 事件以传递数据。这样,数据变化会更新表单元素,同时表单元素变化也会更新数据,实现了简洁的双向绑定。原创 2024-02-29 08:15:00 · 711 阅读 · 0 评论 -
前端Vue篇之什么是 mixin ?mixin 和 mixins 区别
Mixin 是在 Vue.js 中用来实现组件选项复用的方式,它是一个包含组件选项的对象。而 mixins 是包含多个 mixin 对象的数组。Mixin 可以帮助我们避免重复编写相同的代码,实现代码的复用和扩展,提高代码的可维护性。原创 2024-02-29 07:45:00 · 961 阅读 · 0 评论 -
前端Vue篇之DIFF算法的原理、Vue中key的作用、为什么不建议用index作为key?
DIFF算法是虚拟DOM的核心,它的原理是:当新旧两个虚拟DOM树进行比较时,DIFF算法会找出两个虚拟DOM树之间的差异,然后只更新这些差异的部分,而不是整个DOM树。原创 2024-02-28 08:15:00 · 891 阅读 · 0 评论 -
前端Vue篇之对虚拟DOM的理解?虚拟DOM的解析过程、为什么要用虚拟DOM、虚拟DOM真的比真实DOM性能好吗?
虚拟DOM(Virtual DOM)是指通过JavaScript对象来描述真实DOM的层次结构。它是一种在内存中对DOM对象的抽象表示,而不是直接操作浏览器中的实际DOM元素。原创 2024-02-28 07:45:00 · 1673 阅读 · 2 评论 -
前端Vue篇之Vue3.0有什么更新、defineProperty和proxy的区别、Vue3.0 为什么要用 proxy?
defineProperty和Proxy都是JavaScript的元编程特性,它们的主要区别在于:defineProperty只能监听对象的属性,而Proxy可以监听对象的整个操作,包括属性的读取、写入、删除等。原创 2024-02-27 08:15:00 · 899 阅读 · 0 评论 -
前端Vue篇之Vuex中action和mutation的区别、Vuex 和 localStorage 的区别
在Vuex中,Action和Mutation都是用来改变状态的。它们的主要区别在于:Mutation是同步的,而Action是异步的。Mutation是用来改变状态的,而Action是用来处理异步操作的,例如网络请求。原创 2024-02-27 07:45:00 · 2549 阅读 · 0 评论 -
前端Vue篇之Vuex 的原理、Vuex有哪几种属性?为什么要用 Vuex 或者 Redux、Redux 和 Vuex 有什么区别,它们的共同思想
Vuex是一个状态管理工具,它可以帮助我们在Vue应用程序中管理应用程序的状态。Vuex的原理是通过一个全局的状态树来管理应用程序的状态,这个状态树可以被所有的组件访问和修改。Vuex提供了一些属性来帮助我们管理状态,包括state、mutations、actions、getters等。原创 2024-02-26 08:15:00 · 2131 阅读 · 0 评论 -
前端Vue篇之对前端路由的理解、路由的hash和history模式的区别
前端路由是一种通过URL来控制页面内容的技术,它可以让单页应用程序(SPA)实现多页面的效果。路由可以根据不同的URL地址,加载不同的页面内容,实现页面的切换和跳转。原创 2024-02-26 07:45:00 · 972 阅读 · 0 评论 -
前端Vue篇之keep-alive 中的生命周期哪些、Vue 子组件和父组件执行顺序
keep-alive是Vue提供的一个组件,它可以将需要缓存的组件缓存起来,从而提高应用的性能。keep-alive组件有两个生命周期钩子函数,分别是activated和deactivated。当缓存的组件被激活时,会调用activated钩子函数;当缓存的组件被停用时,会调用deactivated钩子函数。原创 2024-02-25 08:15:00 · 1904 阅读 · 0 评论 -
前端Vue篇之说一下Vue的生命周期、一般在哪个生命周期请求异步数据、created和mounted的区别
Vue的生命周期可以分为8个阶段,分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。这些阶段在Vue实例创建、挂载、更新和销毁的过程中被依次调用。原创 2024-02-25 07:45:00 · 2164 阅读 · 0 评论 -
前端Vue篇之描述下Vue自定义指令
自定义指令是Vue中非常强大的特性,它允许开发者处理底层的DOM操作,并且提供了良好的封装和复用机制。通过合理的使用自定义指令,可以使代码更加清晰和易于维护。原创 2024-02-24 08:15:00 · 1657 阅读 · 0 评论 -
前端Vue篇之简述 mixin、extends 的覆盖逻辑
Mixin是一种非常有用的工具,能够帮助我们在Vue组件中实现可复用的逻辑。然而,在使用Mixin时,需要小心命名冲突和意外覆盖的问题。确保理解组件和Mixin之间的属性和方法合并规则,以便正确地利用它们来构建更加灵活和可维护的Vue应用程序。原创 2024-02-24 07:45:00 · 1904 阅读 · 0 评论 -
前端Vue篇之对 React 和 Vue 的理解,它们的异同、Vue的优点
React 更注重灵活性和可扩展性,适合大型应用程序的构建,而 Vue 更注重简单性和快速上手,适合快速原型设计和中小型项目。Vue.js 是一个功能强大、灵活且易于上手的前端框架,适用于各种规模的项目,并且在开发体验和性能方面表现出色。选择使用哪个取决于团队的技术栈偏好、项目需求以及开发人员的经验水平。原创 2024-02-23 08:15:00 · 2381 阅读 · 1 评论 -
前端Vue篇之子组件可以直接改变父组件的数据吗?
子组件可以直接改变父组件的数据吗?不可以。在Vue中,子组件不能直接改变父组件的数据。这是为了保持代码的可维护性和可预测性,确保数据流动清晰,避免意外行为。子组件通过触发事件来请求父组件修改数据。原创 2024-02-23 07:45:00 · 509 阅读 · 0 评论 -
前端Vue篇之Vue template 到 render 的过程
Vue的template到render的过程包括将模板转换为抽象语法树(AST),对静态节点进行优化,然后生成渲染函数。这个函数负责创建虚拟DOM,最终用于页面呈现。原创 2024-02-22 08:15:00 · 856 阅读 · 0 评论 -
前端Vue篇之Vue 单页应用与多页应用的区别、对SPA单页面的理解,单页面优缺点分别是什么?
单页应用(SPA)只加载一次页面资源,通过路由切换内容,提供流畅用户体验。多页应用(MPA)每次请求新页面都重新加载完整资源,适合内容丰富、SEO要求高的应用。 SPA适合交互复杂、用户体验要求高的应用,MPA适合内容丰富、SEO要求高的应用。原创 2024-02-22 07:45:00 · 1933 阅读 · 0 评论 -
前端Vue篇之Vue中封装的数组方法有哪些,如何实现页面更新
Vue中封装的数组方法包括push、pop、shift、unshift、splice、sort和reverse。页面更新是通过Vue对这些方法进行特殊处理,确保当数组发生变化时,Vue能够自动更新相关的页面内容。这样,开发者无需手动干预页面更新,提供了更好的开发体验。原创 2024-02-21 08:15:00 · 1026 阅读 · 0 评论 -
前端Vue篇之$nextTick 原理及作用、Vue 中给 data 中的对象属性添加一个新的属性时会发生什么?如何解决?
$nextTick是Vue.js提供的一个方法,它的作用是在下次DOM更新循环结束之后执行延迟回调。这个方法非常有在Vue中,如果你直接给data中的对象属性添加一个新的属性,Vue无法检测到这个变化,因为Vue只能检测已经存在的属性。这是因为Vue在实例化时会将data中的属性转换为getter/setter,这样当属性被访问或修改时,Vue能够得知。解决这个问题的方法是使用Vue.set方法或者this.$set方法来添加新的属性。这两个方法都会触发Vue的响应式系统,使得新的属性也能被Vue检测到。原创 2024-02-21 07:45:00 · 1991 阅读 · 0 评论 -
前端Vue篇之对keep-alive的理解,它是如何实现的,具体缓存的是什么?
对 keep-alive 的理解: 是 Vue 提供的一个抽象组件,用于在组件之间切换时缓存组件的状态或 DOM。当组件被切换出去时,会被 缓存起来,而不是被销毁,这样可以提高性能和用户体验。它是如何实现的: 利用了 Vue 的抽象组件能力,在内部维护一个缓存对象,用于存储被缓存组件的状态和 DOM 结构。当需要缓存的组件被激活时,从缓存对象中检索相应的组件,如果存在,则直接复用之前的状态和 DOM,而不需要重新创建。原创 2024-02-20 08:15:00 · 2695 阅读 · 0 评论 -
前端Vue篇之data为什么是一个函数而不是对象、Vue data 中某一个属性的值发生改变后,视图会立即同步执行重新渲染吗?
在Vue中,data选项是一个函数,而不是一个对象,这是因为Vue组件可以被复用多次。如果data是一个对象,那么组件之间共享的数据就会产生冲突。通过将data定义为函数,每个组件实例都可以拥有独立的数据副本,避免了数据之间的相互影响。原创 2024-02-20 07:45:00 · 1012 阅读 · 0 评论 -
前端Vue篇之v-model 是如何实现的,语法糖实际是什么?v-model 可以被用在自定义组件上吗?如果可以,如何使用?
v-model 是Vue提供的指令,用于在表单元素和组件上实现双向数据绑定。它实际上是一个语法糖,可以简化对数据的读写操作。在原生HTML元素上,v-model相当于给元素绑定value属性和input事件。对于自定义组件,可以通过model选项来实现v-model的双向绑定,确保组件和父组件之间的数据同步。原创 2024-02-19 08:15:00 · 2183 阅读 · 0 评论 -
前端Vue篇之v-if、v-show、v-html 、v-for的原理、 v-if和v-show的区别、v-if和v-for哪个优先级更高?如果同时出现,应如何优化?
在Vue.js中,v-if根据条件选择性地渲染元素,v-show根据条件控制元素的显示/隐藏,v-html用于插入HTML内容,v-for循环渲染列表。v-if在编译阶段决定是否创建DOM元素,v-for动态生成元素。v-if仅在条件为真时渲染元素,v-show则根据条件切换显示状态。当v-if和v-for同时出现时,v-for优先级更高。优化方法包括将v-if提升到包裹元素或使用计算属性过滤数据,以提高性能和避免不必要的渲染。原创 2024-02-19 07:45:00 · 2063 阅读 · 0 评论 -
前端Vue篇之常见的事件修饰符及其作用
事件修饰符是Vue.js框架提供的便捷方式,在处理DOM事件时修改行为。原创 2024-02-18 08:15:00 · 1883 阅读 · 0 评论 -
前端Vue篇之如何保存页面的当前的状态
LocalStorage/SessionStorage简单快捷,但可能会导致意外行为;路由传值适合传递特殊对象,但需要在每个跳转的组件内编写相同的逻辑;单页面渲染代码量少,但增加了维护成本;Vue的keep-alive可以缓存页面状态,提高页面切换性能和用户体验。原创 2024-02-18 07:45:00 · 1163 阅读 · 0 评论 -
前端Vue篇之过滤器的作用,如何实现一个过滤器
过滤器在Vue.js中用于对数据进行处理和格式化,以便在页面上修改数据的展示方式,比如处理日期、格式化文本或添加单位。原创 2024-02-17 08:15:00 · 917 阅读 · 0 评论