vue面试小结

2021-07-08 本文已影响0人 lvyweb

请简单描述一下vue的生命周期

beforeCreate、实例了Vue但还没进行数据初始化与响应式处理

created（此时需说明可以在created中首次拿到data中定义的数据）数据已被初始化和响应式处理，在这里可以访问到数据，也可以修改数据

beforeMount、render函数在这里被调用，生成虚拟DOM，但是还没有转成真实的DOM并替换到el

mounted（此时需说明dom树渲染结束，可访问dom结构）、在这里，真实DOM挂载完毕
beforeUpdate、数据更新后，新的虚拟DOM生成，但还没跟旧虚拟DOM对比打补丁
updated、新旧虚拟DOM对比打补丁后，进行真实的DOM的更新
activated：被keep-alive缓存的组件被激活时调用
deactivated：被keep-alive缓存的组件停用时调用
beforeDestroy、实例销毁之前调用，在这一步，依然可以访问数据
destroyed：实例销毁后调用，该钩子被调用后，对应Vue实例的所有指令都被解绑，所有的监听器被移除，所有的子实例也都被销毁

请阐述一下你所理解的MVVM模式

vue是采用数据劫持配合发布者-订阅者模式的方式，通过Object.definerproperty()来劫持各个属性的setter和getter，在数据变动时，发布消息给依赖收集器，去通知观察者，做出对应的回调函数，去更新视图。
详细的说一说，MVVM作为绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听model数据变化表通过compile来解析编译模板指令，最终利用Wather搭起Observer，Compile之间的通信桥梁，达到数据变化更新视图；视图交互变化—>数据model变更的双向绑定效果。

v-if和v-show的区别

v-if:

v-if会控制这个DOM节点的存在与否
v-if是通过控制dom元素的删除和生成来实现显隐，每一次显隐都会使组件重新跑一遍生命周期，因为显隐决定了组件的生成和销毁
如果在运行时条件很少改变，则使用v-if比较好

v-show:

v-show是通过控制dom元素的css样式来实现显隐，不会销毁
v-show仅仅控制元素的显示方式，通过display的属性none
当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销

vue-router的hash和history的区别

hash 是根据页面锚点实现跳转
history是通过浏览器API实现锚点

Vue组件如何通信？

父传子：props
子传父：#emit $on
兄弟之间通信 eventBus vuex
获取父组件实例的方式 $parent,$ children
使用$refs获取组件实例，进而获取数据
使用vueX进行状态管理
+使用浏览器本地缓存，例如localStorage

$nextTick用过吗，有什么作用

在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM（官网）
解决的问题：有些时候在改变数据后立即要对dom进行操作，此时获取到的dom仍是数据刷新前的dom，无法满足需要，这个时候就用到了$nextTick

为何Vue采用异步渲染？

理解：vue是组件级更新
如果不采用异步更新，那么每次更新数据都会对当前组件进行渲染，所以为了性能考虑，vue会在本轮数据更新后，再去异步更新视图

什么场景下是必须用watch

父传子的时候

双向数据绑定双层数组不能绑定？？

使用$set来设置属性

v-model的原理

v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。
其核心就是，一方面modal层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值。
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值

vue中v-html会导致哪些问题

可能会导致xxs攻击
v-html会替换掉标签内部的子元素

什么是作用域插槽？

1、插槽

创建组件虚拟节点时，会将组建的儿子的虚拟节点保存起来，当初始化组件时，通过插槽属性将儿子进行分类{a:[vnode],b:[vnode]}
渲染数组时会拿对应的slot属性的节点进行替换操作（插槽的作用域为父组件）
2、作用域插槽
作用域插槽在解析的时候，不会作为组建的孩子节点，会解析成函数，当子组件渲染时，会调用此函数进行渲染（插槽的作用域为子组件）

谈谈你对keep-alive的了解？

理解：keep-alive 可以实现组件的缓存，当组件切换时不会对当前组件进行卸载，常用的两个属性include/exclude，2个生命周期activated，deactivated LRU算法

如何使用Promise来同时请求多个数据

将所有的异步请求的结果放入一个数组
使用 Promise.all 来处理
加 .then ,将成功或是失败的结果都 return 出去
失败的结果处理一下再return

Vue和JQuery的区别在哪里？为什么放弃JQuery用Vue？

1、JQuery是直接操作DOM，Vue不直接操作DOM，Vue的数据与视图是分开的，Vue只需要操作数据即可
2、JQuery的操作DOM是频繁的，而Vue利用虚拟DOM技术，大大提高了更新DOM时的性能
3、Vue中不提倡直接操作DOM，开发者只需要把大部分精力放在数据层面上
4、Vue集成的一些库，大大提高开发效率，比如Vuex、router等

为什么data是一个函数并且返回一个对象呢？

data之所以是一个函数，是因为一个组件可能会多处调用，而每一次调用就会执行data并返回新的数据对象，这样，可以避免多处调用之间的数据污染。

路由有哪些模式呢？又有什么不同呢？

hash模式：通过#号后面的内容梗概，触发hashchange事件，实现路由切换
history模式：通过pushState和replaceState切换url，触发popstate事件，实现路由切换，需要后端配合

computed和watch有何区别？

computed是依赖已有的变量来计算一个目标变量，大多数情况都是多个变量凑在一起计算出一个变量，并且computed具有缓存机制，依赖值不变的情况下其会直接读取缓存进行复用，computed不能进行异步操作
watch是监听某一个变量的变化，并执行相应的回调函数，通常是一个变量的变化决定多个变量的变化，watch可以进行异步操作
简单记就是：一般情况下computed是多对一，watch是一对多

直接arr[index] = xxx无法更新视图怎么办，为什么，怎么办？

原因：Vue没有对数组进行Object.defineProperty的属性劫持，所以直接arr[index] = xxx 是无法更新视图的
使用数组的splice方法 arr.splice(index，1，item)
使用Vue.$set(arr,inde,value)