浅谈Vue 与React 区别:

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 [typesetType] = 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绝对是您的选择。

上一篇:Docker学习笔记之搭建Docker运行环境


下一篇:jquery跨域访问解决方案