唐门-Vue总纲 2022vue面试题 2022vue3.0面试题
一、什么是MVVM?
MVVM是 Model-View-ViewModel的缩写,
Model代表数据模型,定义数据操作的业务逻辑。
View代表视图层,负责将数据模型渲染到页面上。
ViewModel控制,通过双向绑定把View和Model进行同步交互,不需要手动操作DOM的一种设计思想。
二、Vue的双向数据绑定原理是什么?或者说 Vue 的响应式原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
三、Vue3.0的新特性
1、增加了composition api
2、虚拟DOM重写
3、优化slots的生成
4、基于Proxy的响应式系统
5、TypeScript + 模块化
四、Vue.js 3.0 放弃defineProperty, 使用Proxy的原因
1、监控到数组下标的变化时,开销很大。所以Vue.js放弃了下标变化的检测;
2、Object.defineProperty只能劫持对象的属性,而Proxy是直接代理对象。
3、Object.defineProperty需要遍历对象的每个属性,如果属性值也是对象,则需要深度遍历。而 Proxy 直接代理对象,不需要遍历操作。
4、Object.defineProperty对新增属性需要手动进行Observe。vue2时需要使用 vm.$set 才能保证新增的属性也是响应式
5、Proxy支持13种拦截操作,这是defineProperty所不具有的
6、Proxy 作为新标准,长远来看,JS引擎会继续优化 Proxy,但 getter 和 setter 基本不会再有针对性优化
五、生命周期是什么
Vue实例从创建到销毁的过程,就是生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom -> 渲染、更新->渲染、卸载等一系列过程,我们称这是Vue的生命周期。
六、vue生命周期总共有几个阶段?
总共可以分8个阶段:创建前/后、载入前/后、更新前/后、销毁前/后
生命周期的钩子函数:有8个常规钩子和2个额外的钩子 = 10个
第一次页面加载会触发哪几个钩子?
第一次页面加载时会触发beforeCreate、created、beforeMount、mounted这几个钩子
七,简述每个周期具体适合哪些场景?
1、beforeCreate:创建前,此阶段为实例初始化之后,this指向创建的实例,此时的数据观察事件机制都未形成,不能获得DOM节点。
data,computed,watch,methods 上的方法和数据均不能访问。
读法(D-Fo-kriˈeɪtɪd)
2、created:创建后,此阶段为实例已经创建,完成数据(data、props、computed)的初始化导入依赖项。一般初始化事件和异步请求放在这里调用
3、beforeMount:挂载前,虽然得不到具体的DOM元素,但vue挂载的根节点已经创建,下面vue对DOM的操作将围绕这个根元素继续进行。
beforeMount这个阶段是过渡性的,一般一个项目只能用到一两次。
4、mounted:挂载完成创建vue实例,和双向绑定,挂载DOM和渲染,可在mounted钩子函数中对挂载的DOM进行操作。
5、beforeUpdate:数据更新前,数据驱动DOM。在数据更新后虽然没有立即更新数据,但是DOM中的数据会改变,这是vue双向数据绑定的作用。
可在更新前访问现有的DOM,如手动移出添加的事件监听器。
6、updated:数据更新后,完成虚拟DOM的重新渲染和打补丁。组件DOM已完成更新,可执行依赖的DOM操作。
注意:不要在此函数中操作数据(修改属性),会陷入死循环。
7、beforeDestroy:销毁前,可做一些删除提示,如:您确定删除xx吗?
8、destroyed:销毁后,当前组件已被删除,销毁监听事件,组件、事件、子实例也被销毁。这时组件已经没有了,无法操作里面的任何东西了。
9、额外的钩子:activated:在使用vue-router时有时需要使用来缓存组件状态,这个时候created钩子就不会被重复调用了。
如果我们的子组件需要在每次加载的时候进行某些操作,可以使用activated钩子触发。
10、额外的钩子:deactivated:组件被移除时使用。
八、父子组件的生命周期
1、执行顺序:
1)父组件开始执行到beforeMount 然后开始子组件执行,最后是父组件mounted。
2)如果有兄弟组件,父组件开始执行到beforeMount,然后兄弟组件依次执行到beforeMount,然后按照顺序执行mounted,最后执行父组件的mounted。
2、完成流程顺序
1)加载渲染过程:父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
2)子组件更新过程:父beforeUpdate->子beforeUpdate->子updated->父updated
3)父组件更新过程:父beforeUpdate->父updated
4)销毁过程:父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
3、概念:
1)当子组件挂载完成后,父组件才会挂载。
2)当子组件完成挂在后,父组件会主动执行一次beforeUpdated/updated钩子函数(仅首次)
3)父子组件在data变化中是分别监控的,但是更新props中的数据是关联的。
4)销毁父组件时,先将子组件销毁后才会销毁父组件。
5)兄弟组件的初始化(mounted之前)是分开进行,挂载是从上到下依次进行
6)当没有数据关联时,兄弟组件之间的更新和销毁是互不关联的
九。Vue2.0 和 Vue3.0 生命周期发生了什么变化
1、最大的改变就是setUp,setUp这个生命周期发生在beforeCreate和created之前。 两种形式的生命周期函数是可以共存,它们都会被执行。
2、其他都是大同小异,只不过换了写法前面加上了on 都写在setUp里面,在使用时需要按需引入函数
十、你怎么理解vue中的diff算法?
diff算法是虚拟DOM技术的必然产物:通过新旧虚拟DOM作对比,将变化的地方更新在真实DOM上;另外,也需要diff高效的执行对比过程,从而降低时间复杂度为0(N).
比较两组子节点是算法的重点,首先假设头尾节点可能相同做4次比对尝试;
如果没有找到相同节点才按照通用方式遍历查找,查找结束再按情况处理剩下的节点;
借助key通常可以非常准确的找到相同节点,因此整个patch过程非常高效。
十一、什么是vdom
vdom是一种使用js对象来描述真实DOM的技术,通过这种技术,们能精确知道哪些真实DOM改变了,从而尽量减少DOM操作的性能开销。
十二、Vue中 Computed 和Watch、Method的区别
computed:计算属性只有在相关的数据发生变化时才会改变要计算的属性,当相关数据没有变化是,它会读取缓存。
一个数据受多个数据影响
1、支持缓存,只有依赖数据发生改变,才会重新进行计算
2、不支持异步,当computed内有异步操作时无效,无法监听数据的变化
watch:当需要在数据变化时执行异步或开销较大的操作时,一个数据影响多个数据
1、 不支持缓存,数据变直接会触发相应的操作;
2、watch支持异步;
methods:调用总会执行该函数,每次都会重新计算
十三、请你说说nextTick
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新
十四、的作用是什么?
答:keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。 比如说把某一个列表滑动到第100条位置,切换到一个组件后这次切换回该组件还会保持在100条的位置。
十五、vue-loader是什么?使用它的用途有哪些?
答:vue文件的一个加载器,将template/js/style转换成js模块。
用途:js可以写es6、style样式可以scss或less、template可以加jade等
十六、for循环为什么使用key? 不写会怎么样
答:需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟DOM。 不写key 会导致所有列表DOM重新渲染,大大降低性能,同时编辑器也会报错。
十七、watch怎么深度监听对象变化?
答:当设置deep:true时,就可以深度监听到对象到内部值的变化。
十八、请你说一下v-modal
答:v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:v-bind绑定一个value属性;v-on指令给当前元素绑定input事件。
十九、delete和Vue.delete删除数组的区别
答:delete只是被删除的元素成了空项,其他的元素键值还是不变。 Vue.delete 直接删除了数组,改变了数组的键值。
二十、组件传值方式有哪些
1、父传子:子组件通过props['xx'] 来接收父组件传递的属性 xx 的值 写法 :key="数据"
2、子传父:子组件通过 this.$emit('fn',value) 来传递,父组件通过接收 fn 事件方法来接收回调 写法 :@ 提交的事件 = 接收的函数
3、Vuex
二十一、vuex是什么?怎么使用?哪种功能场景使用它?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是:应用遇到多个组件共享状态时,使用vuex。
场景:多个组件共享数据或者是跨组件传递数据时
vuex的流程:页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation,mutation会修改state中对应的值。最后通过getter把对应值跑出去,在页面的计算属性中,通过,mapGetter来动态获取state中的值
二十二、vuex有哪几种属性
有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)
1、state:vuex的基本数据,用来存储变量
2、geeter:从基本数据(state)派生的数据,相当于state的计算属性
3、mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。
4、action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。
5、modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
二十三、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
1、如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。
2、如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用,并包装成promise返回,在调用处用async await处理返回的数据。如果不要复用这个请求,那么直接写在vue文件里很方便
二十四、vue-router相关题目
1、vue-router 是什么?它有哪些组件?
答:vue用来写路由一个插件。有router-link、router-view, 重定向:redirect
2、vue-router 怎么定义动态路由? 怎么获取传过来的值?怎么获取当前的路由信息?
答:1)定义动态路由:在router目录下的index.js文件中,对path属性加上/:id。
2)获取传过来的值:使用router对象的params.id。
3)获取当前路由信息:使用this.$router获取当前的路由信息。 Vue 3.0 中通过 getCurrentInstance 方法获取当前组件的实例,然后通过 ctx 属性获得当前上下文,ctx.$router 是 Vue Router 实例,currentRoute 可以获取到当前的路由信息
3、vue-router钩子函数有哪些?都有哪些参数?有哪些作用?
答:1)全局前置守卫:beforeEach((to, from, next)=>{}), 它接收3个参数,分别是 to:即将进入的路由对象。form:当前导航正要离开的路由。next():进行管道中的下一个钩子
2)全局后置钩子:afterEach((to,form)=>{})
3)全局解析守卫:beforeResolve((to, from, next)=>{})
4)组件内导航钩子:beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不能获取组件实例 this// 因为当守卫执行前,组件实例还没被创建},
5)组件内导航钩子:beforeRouteUpdate (to, from, next) {// 在当前路由改变,但是该组件被复用时调用。// 可以访问组件实例 this},
6)组件内导航钩子:beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用 //可以访问组件实例 this}。
作用:vue-router提供的导航钩子主要用来拦截导航,让它完成跳转或取消。
4、vue中router与route区别
router:对象是全局路由的实例,是router构造方法的实例。比如 this.$router.push。 英标:[ˈruːtər , ˈraʊtər] 低音
route:对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。 英标:[ruːt] 重音
5、vue-router的两种模式的区别
答:1)hash模式:地址栏后面带有#号,当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作,做到单页面无刷新
2)history模式:主要使用HTML5的pushState()和replaceState()这两个api来实现的,pushState()可以改变url地址且不会发送请求,replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改
他们最大的区别:
hash模式的hashchange,只能改变#后面的url片段。
history模式则会将URL修改的就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理,则会返回404错误
6、vue-router实现路由懒加载( 动态加载路由 )的方式有哪些?
1、vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
2、路由懒加载(使用import)。
3、webpack提供的require.ensure()
7、vue-router 传参
Params:只能使用name,不能使用path,参数不会显示在路径上,浏览器强制刷新参数会被清空。
// 传递参数 this.$router.push({ name: Home, params: { number: 1 , code: '999' } }) // 接收参数 const p = this.$route.params
Query:参数会显示在路径上,刷新不会被清空name 可以使用path路径
// 传递参数 this.$router.push({ name: Home, query: { number: 1 , code: '999' } }) // 接收参数 const q = this.$route.query
Vue.js 是什么
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,易于上手,还便于与第三方库或有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。