Administrator
Administrator
Published on 2025-04-14 / 3 Visits
0
0

Vue面试点

vue的基本原理

vue的设计思想为MVVM分为model、view、viewmodel层,model层用于存储数据,VM层用于处理另两层的变化,如果V层变化,则会通过VM层中的逻辑修改Model层,若model层发生变化,则会通过VM中的逻辑对View层进行更新。

双向数据绑定的原理

vue的双向数据绑定主要使用的是订阅者-发布者模式,vue2通过defineProperty()设置对象的setter和getter,将对象转化为响应式对象。通过数据劫持,在getter时对依赖进行收集,setter时通知所有依赖。vue3中使用的是Proxy进行代理,能够拦截对象的更多操作。在通知依赖时,vue会对视图进行更新,同时,若视图中用户的操作导致视图发生变化,也会在依赖中对数据进行修改。

MVVM、MVC、MVP的区别

MVVM分为三层Model、View、ViewModel层,ViewModel层主要用于处理业务逻辑,处理Model层和View层的变化,Model层用于存储数据,发生变化会通知VM进行处理。View层为视图层,用于展示,当View层发生变化,会通知VM层进行处理。

MVC分为三层Model、View、Controller层,这三者为一个三角关系,model用于处理数据逻辑,view用于处理显示逻辑,当用户操作view层时,会通知controller层,controller层会操作model让其改变view。

MVP分为三层Model、View、Presenter层,和MVC接近,但是Presenter层中只有Mode层的接口,所以Presenter层只能使用model层中的逻辑而不能修改model层。

computed和methods的区别

computed为计算属性,methods为方法,计算属性是根据依赖进行缓存的,只有依赖的数据变化时才会执行,而methods则是调用就会执行。

v-if和v-show的区别

v-if和v-show都达到了让元素不显示的目的。v-show是通过简单的css样式操作display:none对元素进行隐藏,v-if则是直接对元素进行删除。

v-if有一个局部编译卸载的过程,它会将子节点全部删除,会引发重排。无论什么情况v-show总会执行,而v-if只有为真时才会执行。v-if对于性能的要求更高,v-show对首次渲染的性能要求更高。

data为什么是一个函数而不是一个对象

因为在vue中可能不止有一个实例,所以如果data为一个对象,那么全局都只能有一个对象,如果是函数,那么每个实例都能有自己的data。

vue单页面和多页面的区别

单页面是指只有一个页面,只加载一次css、js等资源,所有的操作都在这一个页面上切换。而多页面则是每切换一个页面就要加载一次css、js资源。单页面容易做过渡动画,容易做数据持久化、数据共享、切换快只需要局部渲染,多页面过渡动画不太好做,共享数据也较为麻烦,切换较慢,每次切换都要重新加载资源,路由很麻烦只能用链接跳转,SEO较好。

vue的优点

资源丰富:由于vue是国人开发的框架,社区对于中国的学习者非常友好。

数据驱动:vue框架关注数据,只需要关注数据的变化就能实现,而不需要去关注繁杂的具体实现。

双向数据绑定:通过双向数据绑定后,不需要去关注model层和view层的同步问题,极大提升了效率。

速度快:vue引入了虚拟DOM节点,打包速度相当快

组件化:vue引入了组件,能够相对独立开发每个组件

对spa单页的理解,它的优缺点是什么

spa,单页面应用,只需要加载一次js、css资源,所有操作都在一个页面,在进行功能切换时只需要局部更新部分内容,切换较快,路由直接通过hash/history模型进行路由,数据持久化也更加便利,过渡可以通过vue提供的transition标签进行过渡。只是不利于SEO,也可以通过SSR来解决。初次加载较慢。

简单说一下vue的生命周期

beforecreate:创建之前,组件中的data、methods等没有读取,模板没有解析,虚拟DOM未生成

created:创建后,data、methods读取,模板没有解析,虚拟DOM未生成

beforemount:挂载之前,data、methods读取,模板解析,虚拟DOM生成,真实DOM未生成挂载

mounted:挂载之后,data、methods读取,模板解析,虚拟DOM生成,真实DOM生成挂载

beforedestroy:卸载之前,data、methods读取,模板解析,虚拟DOM生成,真实DOM生成挂载

destroyed:卸载后,什么都没有了

beforeupdate:更新之前,数据已经更新,但是真实DOM没有更新

updated:更新后,数据已经更新,真实DOM已经更新

组件的通讯方式有哪些

1.props

2.全局事件总线

3.provide、inject

4.ref

5.emit

6.piana\vuex

路由hash和history的区别

hash模式会在地址后加上#,不太美观,同时hash模式请求后端时是将#后的地址传递给后端,若后端没有做好路由的处理,也不会返回404。

history模式没有#会更加美观,但是history模式需要自己设置pushstate、replacestate,这样才能进行浏览器的前进后退等等操作,如果刷新后没有对应的路由或是资源则会直接报404。

对前端路由的理解

spa应用在进行切换时,进行刷新后页面又会回到第一个页面,这样体验非常差。所以前端路由诞生了,前端路由自动记录用户的前进后退等等操作,将视图和url一一对应,在刷新时只需要对对应的url进行请求即可。在vue中路由拥有相当多的路由守卫。

vuex的原理和自己的理解

vuex分为actions、mutations、state分别用于提交动作、修改store、存储数据。组件中dispatch触发actions中的方法,actions通过commit提交到mutations,mutations修改state中的数据。actions中可以进行异步操作,mutations中只能进行同步操作。

vuex中action和mutation的区别

redux和vuex的区别,它们共同的思想

vue3有什么更新

defineProperty和Proxy的区别

对虚拟Dom的理解

DIFF算法的原理


Comment