type
status
date
slug
tags
category
icon
password

谈谈你对Vue的理解

  • Vue是一个渐进式JavaScript框架,它专注于构建用户页面,Vue的核心思想是数据驱动和组件化,通过将页面拆分成独立的组件,可以更好的管理代码。
  • Vue的优势在于其简单易用,灵活性高,性能卓越和扩展性强,Vue的模板语法易于理解和学习,可以快速构建交互式的web应用程序,同时,Vue的生命周期钩子和自定义指令等功能,使得Vue可以满足各种复杂的需求,另外Vue还提供了Vuex,Vue Router等官方组件,可以进一步扩展Vue的功能。
  • Vue的响应式数据绑定机制是Vue最核心的特性之一,通过对数据进行劫持和监听,可以实现数据的双向绑定,即数据变化会自动更新视图,同时视图的变化也会反映到数据上。这种机制使得Vue的数据流非常清晰和可预测,同时也减少了开发的工作量。
  • 总之,我认为Vue是一个优秀的JavaScript框架,它简单易用,功能性强,扩展性好,并且有着极佳的性能表现,对于前端开发人员来说,Vue是一个值得深入学习和使用的框架。

Vue父子组件传值的方式

  • Props
    • 通过像子组件传递属性的方式实现数据传递,在父组件中通过v-bind绑定子组件属性,子组件中通过Props接收父组件传递的数据,这是一种单项数据流的方式,父组件可以向子组件传递数据,但是子组件不能直接修改传递过来的数据,需要触发事件的方式通知父组件进行修改。
  • 事件
    • 父组件通过$emit方式触发子组建的自定义事件,子组件通过$on监听事件并接收参数,从而实现数据的传递,这也是一种单向数据流的方式,父组件通过事件向子组件传递数据,子组件可以通过触发事件的方式通知父组件进行修改。
  • $parent/$children
    • 通过访问父组件或子组件的实例属性来实现数据的传递,但是这种方式不够直观,且容易出错,因为父组件或子组件的实例属性可能会在不同的组件结构中发生变化。
  • $refs
    • 通过父组件中使用ref属性来获取子组件的实例,从而可以直接访问子组建的属性和方法,这种方式也不够直观,且容易出现问题,因为在组件结构复杂的情况下,$ref可能会变得混乱。

Vue的组件加载和渲染顺序

  • Vue中的组件加载和渲染顺序是先加载父组件,再递归加载子组件,然后按照深度优先遍历的方法渲染子组件,再依次向上渲染父组件。

Vue的数据绑定机制是如何进行的

  • Vue的数据绑定机制是通过数据劫持和发布/订阅模式实现的,当数据发生变化时,会自动更新视图,并通过虚拟DOM对比算法来提高性能。这个机制可以有效地简化开发过程,提高代码的可维护性和可读性。
  • 在Vue中,每个组件实例都有一个对应的Watcher对象,Watcher对象订阅响应式数据对象的变化。当响应式数据对象发生变化时,Watcher对象会接收到通知,并更新组件的视图。Watcher对象通过发布/订阅模式实现,即Watcher对象订阅响应式数据的变化,响应式数据在发生变化时发送通知,通知订阅者进行更新
  • 当一个组件的数据发生变化时,Vue会通过虚拟DOM对比算法来找到变化的部分,然后更新对应的DOM节点。由于虚拟DOM对比算法只会更新变化的部分,因此可以有效地提高性能。

Vue的computed和watch的区别

  • Vue中的computed和watch都是用来监听数据变化并作出相应的操作的,但它们的使用场景和功能有所不同。
  • computed属性是通过计算已有的属性值得出的一个新值。computed属性可以依赖于其他的响应式数据,当这些数据发生变化时,computed属性的值会被缓存,只有在依赖数据发生变化时才会重新计算,这样可以避免重复计算和提高性能。computed属性可以看作是一个缓存的属性,它不会直接修改数据,只是对已有数据的计算和处理。
  • watch属性用于监听数据的变化,并在数据变化时执行一些逻辑。watch属性可以监听单个数据或者一个数据组,当数据发生变化时,watch属性会执行对应的回调函数。watch属性可以用来处理一些异步操作或者需要对数据进行复制处理的逻辑。与computed属性不同的是,watch属性不会缓存计算结果,它会在每次数据发生变化时都执行回调函数。
  • 总的来说,computed属性适用于根据已有的数据进行计算和处理的场景,而watch属性适用于需要对数据变化做出响应或者执行异步操作的场景。当需要根据已有数据计算一个新值时,使用computed属性可以提高性能。而当需要监听数据变化并执行一些逻辑时,使用watch属性可以更加灵活和方便。

说一下Vue的keep-alive

  • 在Vue中,keep-alive是一个抽象组件,它可以将其包裹的组件进行缓存,从而在切换组件时可以避免重复创建和销毁,提高页面性能和用户体验。
  • 当一个组件被包裹在keep-alive中时,该组件会被缓存起来,而不是被销毁。当这个组件再次被使用时,它会被从缓存中取出来并重新挂载到页面上。keep-alive提供了两个钩子函数:actived和deactived,用来在组建被激活或停用时执行一些逻辑,比如在组件被激活时执行一些数据初始化或异步操作。
  • keep-alive提供一些配置属性,包括include、exclude、max和min等。其中,include和exclude用于指定需要缓存或排除的组件名称;max和min用于指定缓存的最大和最小数量。
  • 使用keep-alive可以有效地提高网页性能和用户体验,特别是在页面中包含大量组件的情况下。但是,需要注意的是,由于keep-alive会缓存组件,因此在使用keep-alive时需要注意数据的更新和组件的生命周期,以免出现不必要的问题。

vue nextTick()原理

  • 在vue中,当我们对数据进行修改时vue.js会异步执行DOM更新,在某些情况下,我们需要在DOM更新完成后执行一些操作,这时就需要使用Vue.nextTick()方法。
  • Vue nextTick()方法的实现原理是基于浏览器的异步任务队列,采用微任务优先的方式。当我们修改数据时,Vue.js会将DOM更新操作放到一个异步任务队列中,等待下一次事件循环执行。而nextTick()方法则是将一个回调函数推入到异步任务队列中,等待DOM更新完成后执行。

vue diff算法原理

  • Vue.js的Virtual DOM实现了一种高效的diff算法,能过快速比较两个虚拟DOM树的差异,然后只更新有必要更新的部分,从而提高渲染性能。
  • diff算法的实现原理是从根节点开始逐层遍历新旧两个虚拟DOM树,比较节点的类型、属性和子节点等内容,如果节点有差异,则记录该差异,并将其添加到一个差异队列中。在比较完成后,对于存在差异的节点,根据其类型进行相应的操作,比如替换节点,修改属性,移动节点位置等。
  • 为了提高diff算法的性能,现代前端框架往往采用一些优化技巧,比如只比较同层级的节点,使用key值进行优化等,从而进一步提高渲染性能。
  • vue.js的diff算法实现如下:
    • 首先比较新旧节点的标签名,如果不同,直接替换成新节点。
    • 如果标签名相同,则比较节点的属性和事件,如果不同,直接修改成新节点
    • 如果节点相同,则比较节点的子节点,如果子节点有不同,则继续比较子节点,直到所有子节点比较完成。
    • 如果子节点也相同,则不需要更新,直接退出比较。
  • 在进行比较时,Vue.js使用了两个指针来遍历新旧节点树,分别为新节点的开始指针和旧节点的开始指针,分别向右移动比较。如果新节点的开始指针在旧节点的开始指针的左侧,则新节点需要插入到旧节点的前面。如果新节点的开始指针在旧节点的开始指针的右侧,则说明旧节点需要删除。如果两个指针指向的节点相同,则说明节点不需要更新,直接跳过比较。在比较完成后,Vue.js会生成一份差异表,记录哪些节点需要更新、删除、插入等操作,然后根据差异表进行DOM更新。
  • 总之,Vue.js的diff算法通过比较两个虚拟DOM树的差异,能够快速确定哪些部分需要更新,从而提高了渲染性能。

vue在渲染列表的时候,为什么不建议用数组的下标当作列表的key值。

  • 因为要保证渲染列表的性能和正确性
  • 在Vue渲染列表时,每个元素需要一个唯一的key值来标记自己,这个key值会被用来判断列表中哪些元素需要更新、删除或新增。如果使用数组下标作为key值,虽然可以满足每个元素key值唯一的需求,但是由于Vue的更新机制是基于diff算法实现的,使用数组下标作为key值会导致Vue无法正确地判断列表中元素的变化情况。
  • 具体来说,如果将数组下标作为key值,那么当列表发生变化时,可能会导致key值发生变化,从而引发不必要的组件重新渲染,甚至会导致性能问题。例如,当删除列表中某个元素时,其后面的所有元素的下标都会发生变化,导致Vue重新渲染整个列表。
  • 为了避免这个问题,我们需要为每个元素提供一个稳定的、与其内容相关的唯一key值,例如使用元素的id属性作为key值。这样,当列表中某个元素的内容发生变化时,其对应的key值也会发生变化,从而告诉Vue需要更新该元素。
  • 总之,为了保证Vue渲染列表的性能和正确性,我们应该尽量避免使用数组下标作为key值。

谈一谈对Vuex的理解

  • Vuex是一个专门为Vue.js开发的状态管理库,它提供了一个集中式的状态管理机制,用于管理Vue应用中的所有组件的共享状态。Vuex的核心思想是将组件的共享状态抽离出来,以单独的状态树的形式存储,然后通过定义一系列的mutations、actions、getters来操作这个状态数。
  • Vuex的核心概念包括:state、mutations、actions和getters。其中,state是应用状态,而mutations用于修改state中的状态。actions则用于处理异步操作或批量的同步操作,最终通过mutations来改变state。getters则用于对state中的数据进行计算或过滤。
  • 在Vuex中,数据流的流向是单向的,即从state到组件,再从组件到mutations/actions。这种单向数据流的机制使得数据的流动更加清晰,同时也更容易进行调试和维护。而Vuex还提供了一些辅助函数,比如mapState、mapGetters、mapActions和mapMutations等,用于方便地访问和操作状态数。
  • 总之,Vuex是Vue.js生态中的一个非常重要的插件,适用于中大型的Vue.js应用。它通过提供集中式的状态管理机制,帮助我们更好地管理数据流,提高应用的可维护和可扩展性。同时,Vuex还有一些高级特性,比如模块的状态管理机制和插件机制,能够进一步提高我们的开发效率。

vue-router有哪几种导航钩子

  • Vue Router提供了多种导航钩子,可以在导航过程中执行相应的操作。下面是Vue Router中常用的导航钩子。
  • beforeEach:在每次路由跳转之前执行,可以用来进行用户身份验证、路由拦截等操作。
  • beforeResolve:在导航被确认前,同时在所有组件内守卫和异步路由组件被解析之后执行。
  • afterEach:在每次路由跳转之后执行,可以用来进行路由跳转后的操作,比如页面滚动、统计PV等操作。
  • beforeEnter:在进入路由之前执行,与全局beforeEach的区别是它可以针对某个具体路由进行设置。
  • beforeRouterUpdate:在路由更新时执行,比如路由参数发生变化时。
  • beforeRouterLeave:在离开当前路由时执行,可以用来进行页面数据的保存或弹出提示灯操作。
  • 这些导航钩子提供了灵活的路由跳转控制机制,可以方便地实现各种复杂的路由跳转需求。同时,Vue Router还提供了一些其他的导航钩子和高级特性,比如路由元信息,动态路由,命名路由等,可以进一步提高开发效率和应用的可维护性。

vue-router的核心原理

  • Vue-Router是Vue.js官方提供的一款路由管理器,它通过监听URL变化,匹配路由规则,展示对应的组件内容,从而实现单页应用的路由控制。
  • Vue Router的核心原理包括以下几个方面
    • 路由匹配
      • Vue Router通过定义路由规则来匹配URL路径,并根据匹配结果展示对应的组件内容。路由匹配可以使用路径、参数、查询参数等多种方式进行定义,同时支持嵌套路由和命名路由等高级特性。
    • 路由模式
      • Vue Router支持两种路由模式,分别是Hash模式和History模式。在Hash模式下,路由信息会被保存在URL的Hash部分,通过监听Hash变化来进行路由控制;在History模式下,路由信息会被保存在浏览器的History API中,通过修改浏览器历史记录来进行路由控制。
    • 路由导航
      • Vue Router中的导航钩子可以监听路由变化,进行路由拦截、身份验证等操作。导航钩子包括全局导航钩子和组件内导航钩子,可以在路由跳转前,跳转后、路由更新等不同阶段执行相应的逻辑。
    • 路由组件
      • Vue Router通过组件的动态加载来实现异步路由组件,可以根据需要动态加载路由组件,从而提高应用的性能和用户体验。同时,Vue Router还支持路由懒加载,路由元信息等高级特性,可以进一步提高应用的灵活性和可维护性。
  • 总之,Vue Router是实现Vue.js单页应用路由控制的核心组件之一,它通过路由匹配、路由模式、路由导航、路由组件等多个方面实现了完整的路由控制逻辑,为开发者提供了强大的路由控制能力。

Vue Router History模式上线需要主要什么事项

  • Vue Router的History模式相比于默认的Hash模式来说,能够更好地模拟传统的多页面应用的URL地址,让用户体验更加自然。但是,使用History模式需要注意以下几点事项:
  • 后端配置:使用History模式需要后端对所有可能的路由路径都进行处理,以避免在刷新或直接输入URL时出现404错误。后端配置的方式取决于后端服务器的类型,如Apache、Nginx等,都要在服务器上进行相关配置。
  • 安全性:使用History模式会暴露出服务器上的文件路径,因此需要特别注意安全性。在部署时需要仔细检查服务器配置,确保不会因为恶意请求而导致安全问题。
  • 兼容性:History模式需要支持HTML5的history.pushState API,因此在一些较老的浏览器上可能会存在兼容性问题。需要在开发时做好相关的测试和兼容性处理。
  • 打包发布:在使用Webpack等工具打包发布时,需要配置正确的publicPath,保证HTML中引用的资源路劲正确。同时需要注意,如果项目使用了多个子路由,需要在打包时将所有的子路由都配置到publicPath中。
  • 总之,使用History模式需要对后端进行相关配置,并且需要特别注意安全性和兼容性问题,同时在打包发布时需要正确配置publicPath,确保页面资源路径正确。

Vue Router history 模式为什么刷新出现404

  • 原因是因为浏览器在刷新页面时会向服务器发生GET请求,但此时服务器并没有相应的资源来匹配这个请求,因为在History模式下,所有路由都是在前端路由中实现的,并没有对应的后端资源文件。
  • 为了解决这个问题,我们需要在服务器端进行相关配置,让所有的路由都指向同一个入口文件(比如index.html),由前端路由来处理URL请求,返回对应的页面内容。具体的配置方式取决于服务器类型,常见的有Apache、Nginx等。

Proxy对于Object.defineProperty()的优点

  • Proxy可以监听到更多的操作,包括对属性的读取和删除等操作,而Object.defineProperty()只能监听属性的读取和赋值操作。
  • Proxy可以监听整个对象而不是对象的单个属性,因此可以避免在对象中添加或删除属性时需要重新定义它们的情况。
  • Proxy可以监听数组的变化,并且可以像普通函数一样使用push()、pop()、shift()等方法,而Object.defineProperty()只能监听到length属性的变化,而不是数组元素的变化。
  • Proxy可以通过Reflect对象进行操作,从而可以访问所有内置的对象和函数,而Object.defineProperty()不支持Reflect。
  • Proxy可以通过has()和deleteProperty()等方法处理不存在的属性,而Object.defineProperty()不能处理这些情况。

Vue3 相比 Vue2 具有以下优点:

  • 更快的渲染速度
    • Vue3采用了模板编译优化和一些性能优化技巧,例如基于Proxy的响应式系统、静态树提升等,提升了引用的性能。
  • 更好的TypeScript支持
    • Vue3采用了TypeScript重写,具有更好的类型推导和错误提示,增强了代码的可维护性和健壮性。
  • 更灵活的组合式API
    • Vue3提供了新的组合式API,使得组件逻辑可以更清晰、更灵活的组织。同时,Vue3将Options API转换成了组合式API,使得编写代码更加方便。
  • 更小的体积
    • Vue3底层核心库体积更小,打包后的文件大小更小,减少了应用的加载时间。
  • 更好的支持Web Components
    • Vue3对Web Components的支持更加完善,可以更方便的将Vue3应用嵌入到其他应用中。
  • 更好的开发体验
    • Vue3提供了更好的开发工具支持,例如Vue CLI、Devtools等,使得开发体验更加顺畅。
  • 更好的文档和社区支持
    • Vue3的官方文档和社区支持更加完善,使得学习和使用Vue3更加容易。

pinia对比vuex

  • Vue3支持新的响应式API,Pinia使用了这些新的API,而Vuex没有。
  • 在Pinia中,状态存储是通过Vue3中提供的reactive和computed实现的,而Vuex中是使用对象的方式来存储状态。
  • Pinia允许你创建多个Store实例,这样你就可以将状态存储在不同的store中,而Vuex只允许创建一个store实例。
  • Pinia提供了一些内置的辅助函数,例如,mapActions,mapState和mapGetters等,在Vuex中,这些辅助函数必须手动编写。
  • 在Pinia中,所有的状态变更都是同步的,在Vuex中,你可以使用action来进行异步操作。
  • 总的来说,Pinia相对于Vuex提供了更加灵活和简单的状态管理方案,同时利用了Vue3中的新特性,能够提供更高的性能和更好的开发体验,但是,由于Pinia相对较新,生态系统和文档还不如Vuex完善。
前端性能优化八股文复习
SuHanqin
SuHanqin
一个普通的干饭人🍚
公告
type
status
date
slug
tags
category
icon
password
🎉NotionNext 4.0即将到来🎉
-- 感谢您的支持 ---
👏欢迎更新体验👏