目录
一、Vue VS React
1.1概况
如果面试遇到“VUE和React有什么区别”这种问题,那么意味着在面试中已经具有优势,此问题应该属于面试后阶段的问题。
两者作为前端都要学习,React比Vue更难一点,国外偏向于React,国内偏向于Vue,大厂前端更偏向于React一些。
Vue设计理念是简单易懂,更符合传统的前端开发模式,template、style、script分离开来,层次鲜明,而React的出现便是颠覆传统的前端开发模式。
1.2比较
共同点:(宏观上)
- 组件化
- 单向数据流,数据驱动视图
- Virtual DOM + Diff算法 操作DOM
- 社区成熟,都支持SSR
不同点:
- Vue使用模板拥抱html,React使用JSX拥抱JS(all in js)
- Vue"自动挡",React"手动挡"(api和生态)
总结:Vue对新手更友好,简单易懂,能自动检测数据改变,从而改变视图,官方文档很全面;React涉及很多原生js,需要setState()去“手动”的更新视图,还需要手动做一些优化等等。故而所得,Vue比React更易于进行前端开发工作。
那么,为什么大公司更喜欢使用React呢?
React比起Vue上限更高、下限更低,更易于控制、优化,比如js变量绑定到css之中,大公司倾向于使用一个更加厉害的框架进行开发。
二、Vue2 VS Vue3
此板块为vue2到vue3的变化以及怎样才能在面试时回答此问题更具水平?
2.1基础回答
- 因为改成组合式api故而没有this
- 生命周期没有create,setup等同于create,卸载改成unmount
- vue3中v-if高于v-for的优先级
- 根实例的创建从new app变成了createApp方法
- 一些全局注册,比如mixin,注册全局组件,use改成了用app实例调用,而不是vue类调用
- 新增了传送门teleport组件
- template模板可以不包在一个根div中
2.2加分回答
- 响应式原理改成了用proxy,解决了数组无法通过下标修改,无法监听到对象属性的新增和删除的问题。也提升了响应式的效率
- 可以额外叙述vue3并不是完全抛弃 了defineProperty,通过reactive定义的响应式数据使用proxy包装出来,而 ref 还是用的defineProperty去给一个空对象,定义了一个value属性来做的响应式
- 组合式api的写法下,源码改成了函数式编程,方便按需引入,因为tree-shaking功能必须配合按需引入写法。所以vue3更好地配合tree-shaking能让打包体积更小
- 性能优化,增加了静态节点标记。会标记静态节点,不对静态节点进行比对。从而增加效率。(可以说静态节点怎么标记的,什么情况标1,什么情况标2...)
2.3进阶回答(超体现水平,但需深入了解其原理)
- vue3不推荐使用mixin进行复用逻辑提取,而是推荐写成hook
- v-model应用于组件时,监听的事件和传递的值改变
- ts更好地配合
冲冲冲!