vue面试题

一、什么是虚拟DOM

        虚拟DOM是js的抽象数据结构，浏览器直接操作DOM是比较昂贵的，频繁的操作DOM会出现性能上的问题，当响应式数据发生变化时，会对前后新旧虚拟DOM进行对比，尽可能少的更新真实DOM，达到优化性能的目的。

二、虚拟DOM的实现原理

        1、虚拟DOM的实质是js的对象，对真实DOM的抽象

        2、状态变更时，记录新旧数的差异

        3、最后把差异更新到dom中

三、vue2和vue3的区别

vue2	vue3
object.definproperty	proxy
选项式API	组合式API
	打包体积小，tree shaking
	ts
	重构虚拟DOM，静态标记提升
遍历对象，监听属性	监听对象和数组

四、为什么出现vue3的compotion API

        minxis过多找不到对应method,computed

        代码组织问题

五、vue的模版渲染

        首先html无法解析template

        1、解析template为抽象语法字符串（AST）

        2、静态标记（提高diff算法的性能）

        3、AST转换为render函数的字符串

六、vuex和winodws下的数据管理

        windows静态，手动修改，全局变量太多，变量污染

        vuex=>mutation,action修改，层次划分明确，便于管理

七、vuex通过什么方式提供响应式数据的？

        通过new vue(),利用vue来监听state下的数据变化，给状态添加getter,setter

八、nextTick的原理

        vue修改数据后，视图不会立即更新，等一个视图中的所有数据变化完成后，再统一修改视图

        nextTick的回调函数等到同步任务完成后，dom更新后才触发

九、vue中data为什么不是一个对象？

        因为data是一个对象，一个对象引用的一个内存地址，修改其中一个数据就会影响另外一个数据

十、vue中如何通讯

props/$emit

evenbus

vuex

inject/provide

$attrs/$listeners

十一、v-if和v-show的区别

        v-if: dom被销毁

        v-show：display:none/block,相对更友好，减少也卖弄回流

十二、key属性的作用

        key的主要作用是更新组件时判断两个节点是否相同，相同就复用，不相同就删除旧的创建新的，这样更新虚拟DOM

        如果使用数组下标作为key可能会影响性能。因为当数组内容发生变化时，Vue会根据key来判断哪些元素需要更新、移动或删除。如果使用下标作为key，每次数组发生变化时，Vue可能会因为下标的变化而重新渲染整个列表，而不是只更新变化的部分，这会导致性能下降。

十三、数据的双向绑定怎么做到的？

        采用发布者和订阅者模式，通过缺齿Object.defineproperty的getter和setter属性，当这个属性发生变化时，会发布消息给订阅者，出发相应的回调

        1、通过Observe类给对象添加可监听属性(递归遍历)

        2、通过defineReactive添加dep属性，通过Object.defineProperty的 getter和setter收集对应的watcher,当属性变化后通知自己对象watcher去更新

十四、watch和computed

        

watch	computed
监听动作	计算属性
数据发生变化执行	属性发生变化执行
×	缓存
一个数据影响对个数据	多个数据影响一个数据
imediate/deep

十五、vue生命周期

vue2		vue3
beforeCreat	初始化实例	setup
created	method，data，实例初始完成，开始编译模版	setup
beforeMount	模版编译完成，未挂载到dom上	onbeforeMount
mounted	模版挂载到dom，页面渲染完成	onMounted
beforeupdate	更新前	onBeforeUpdate
updated	更新后	onUpdated
beforedestory	销毁前	onBeforeUnmount
destoryed	销毁后	onUnmounted
keep-alve=>beforeactive,activted		onActivated、onDeactivated

十六、slot是什么？

        插槽，是vue的内容分发机制，由标签显示由父组件决定

        具名插槽，默认插槽，作用域插槽

十七、react和vue的区别

相同点	不同点
虚拟DOM	vue是双向绑定，react单项数据流
props,组件间数据传递	react jsx语法
组件化开发

十八、vue的优点？

        1、轻量、只关注视图层

        2、双向数据绑定

        3、虚拟dom

十九、vue组件化的理解？

        1、组件化开发大幅提高开发效率，复用性

        2、组件分为页面组件，业务组件和通用组件

        3、单项数据流原则

        4、高内聚 低耦合

二十、路由的hash和history模式？

        hash: 带#，onhashchange

        history: pushstate,replacestate

二十一、vuex和localstorage的区别？

        

vuex	localstorage
内存中	存储在本地
响应式数据管理	对象，json.stringify,json.parse
刷新会消失	刷新不会丢失

二十二、为什么用vuex?

        解决多层嵌套传值的问题，组件共享状态抽取出来，易于维护

二十三、虚拟DOM的更新过程？

        1、对DOM解析转化为js对象

        2、当页面发生变化生成js对象

        3、对比新旧对象，把油差异的地方更新dom上

二十四、diff算法的原理？

        1、判断节点是否同一节点，不是，删除，创建新的节点

        2、相同节点 

                无children,更新

                有children,递归对比子节点

二十五、key的作用？

        diff算法的标识，是否为同一节点，提高diff算法性能

二十六、webpack 和vite的区别？

        

	webpack	vite
开发模式	编译更新，对所有模块进行打包	采用ES module开发服务器，需要时编译对应模块，大大提升相应速度
打包效率	对所有模块打包	采用ES module，只打包缓存实际改动的模块
插件生态	非常丰富	逐渐丰富
配置	相对复杂	开箱即用，更友好
热更新	所有模块打包更新，速度慢	改动模块更新，速度快