Vue VS React ,Vue2-＞Vue3

目录

一、Vue VS React

1.1概况

1.2比较

二、Vue2 VS Vue3

2.1基础回答

2.2加分回答

2.3进阶回答

一、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基础回答

1. 因为改成组合式api故而没有this
2. 生命周期没有create,setup等同于create,卸载改成unmount
3. vue3中v-if高于v-for的优先级
4. 根实例的创建从new app变成了createApp方法
5. 一些全局注册，比如mixin，注册全局组件，use改成了用app实例调用，而不是vue类调用
6. 新增了传送门teleport组件
7. template模板可以不包在一个根div中

2.2加分回答

1. 响应式原理改成了用proxy，解决了数组无法通过下标修改，无法监听到对象属性的新增和删除的问题。也提升了响应式的效率
2. 可以额外叙述vue3并不是完全抛弃 了defineProperty，通过reactive定义的响应式数据使用proxy包装出来，而 ref 还是用的defineProperty去给一个空对象，定义了一个value属性来做的响应式
3. 组合式api的写法下，源码改成了函数式编程，方便按需引入，因为tree-shaking功能必须配合按需引入写法。所以vue3更好地配合tree-shaking能让打包体积更小
4. 性能优化，增加了静态节点标记。会标记静态节点，不对静态节点进行比对。从而增加效率。（可以说静态节点怎么标记的，什么情况标1，什么情况标2...）

2.3进阶回答（超体现水平，但需深入了解其原理）

1. vue3不推荐使用mixin进行复用逻辑提取，而是推荐写成hook
2. v-model应用于组件时，监听的事件和传递的值改变
3. ts更好地配合

冲冲冲！