1.从思路上区分React与Vue
react和vue都是做组件化的,整体的功能都类似,但是他们的设计思路是有很多不同的。使用react和vue,主要是理解他们的设计思路的不同。
React:react的思路是all in js,通过js来生成html,所以设计了jsx,还有通过js来操作css;理解JSX语法并不困难,简单一句话,遇到{}符号内部为解析JS代码,遇到成对的<>符号内部为解析HTML代码。
Vue:vue是把html,css,js组合到一起,趋向于传统web开发,用各自的处理方式,vue有单文件组件,可以把html、css、js写到一个文件中,html提供了模板引擎来处理;(<template>、<script>、<style>)
2.监听数据变化的实现原理不同:
Vue监听数据变化是通过getter/setter以及一些函数的劫持,能过获取到数据的精确变化;
React是默认通过引用diff进行的,如果不优化可能会导致大量不必要的DOM重新渲染;React是无法进行精确的数据监听,因为最初Vue与React设计的理念就不同,Vue强调的是可变数据,而React强调的是数据不可变;因此,Vue上手更简单,而React更适合用于构建大型项目
3.渲染过程的不同
Vue在渲染过程中,会跟踪每个组件的依赖,所以可以快速的计算处Virtual DOM 的差异,而React 在应用中状态发生改变时,全部的子组件都会重新渲染;如果应用中交互复杂,需要处理大量的UI变化时,使用Vue是个不错的选择,但是更新元素并不频繁,那么vue的操控性能不如React来的稳定;
4.Vuex和Redux的区别
vuex和redux都属于状态管理库,专门用于单独管理状态的,不同的是vuex是要专门配合vue使用,而 redux是一个范用的库,可以单独使用;
vuex和Redux 都是通过store来作为全局状态存储对象;另外vue中的mutation和redux 中的reducer两者都是改变store的直接方法来进行同步操作;
不同的是,vuex只有展示组件(通过全局根部植入直接访问store),而redux中展示组件是要通过容器组件连接store再进行访问;另外vuex自带module化功能,而redux是没有的。在vuex中消除了action的概念,并且只能配合vue使用,而redux可以配合任何框架。 vuex中的异步操作也只能在action中进行,redux中是没有特别的为异步操作创建一个方法。
5.从实际开发角度中一些代码区别:
列表渲染:
Vue中使用v-for进行 循环渲染数据,React 通过 js 的数组语法 map,将数据对象映射为 DOM 对象。
条件渲染:
Vue中使用v-if或者v-show进行条件渲染,其中v-if可以配合v-else进行渲染 ,v-show则是通过控制css中display来控制元素是否展示
<template>
<Button v-if="type === 'A'" @click="say('hi')">备选项</Button>
</template>
<script>
export default {
data() {
return {
type: 'A'
};
}
methods: {
say(val) {
console.log(val);
}
}
};
</script>
React只需使用js 三目运算符语法即可完成条件渲染的功能,或者使用 && 逻辑。
const demo = (props) => {
const [type, setType] = useState('A');
const say = (val) => {
console.log(val);
};
return (
<div>
{type === 'A' ? (
<Button onClick={() => {say('hi');}}/>
) : ('')}
</div>
)};
export default demo;
事件处理:
Vue注册点击事件:
<template>
<Button @click="say('hi')">备选项</Button>
</template>
<script>
export default {
data() {
return {
checked: true
};
}
methods: {
say(val) {
console.log(val);
}
}};
</script>
React注册点击事件:
const demo = (props) => {
const say = (val) => {
console.log(val);
};
return (
<Button onClick={() => {say('hi')}}/>
)};
export default demo;
组件通信:
Vue 使用props 向子组件通信,使用 events 向父组件通信。
React 通过props 传递数据和回调函数进行父子组件间通信6
组件嵌套:
Vue 使用slot 标签来实现组件嵌套,而 React 通过将需要嵌套的组件当做props 传给子组件的方式来实现嵌套。
一直以来,围绕着Vue与React相关优缺点的话题络绎不绝,其实两个框架都没有相当大的差异,主要还是根据开发者的要求,这个决定是非常主观的。如果您想将前端JavaScript框架集成到现有应用程序中,Vue.js是更好的选择,如果您想使用JavaScript构建移动应用程序,React绝对是您的选择。