Vue和React的区别

最新推荐文章于 2022-09-23 11:05:28 发布

浪里白条那片海

最新推荐文章于 2022-09-23 11:05:28 发布

阅读量220

点赞数

分类专栏： js

js 专栏收录该内容

50 篇文章

订阅专栏

笔者就直入正题：相信大家都知道什么是vue和react;

那么我们从数据双向绑定、组件及数据流、路由、状态管理等方面来分别对比一下怎样去使用Vue和React。

数据双向绑定
何为数据双向绑定：View层和Model层的数据相互影响。

View层的表单操作、触发事件可能会引起数据变动；ajax请求也可能会引起数据变动，某一数据变动引起另外关联数据的改变

Vue的数据双向绑定
React中的数据双向绑定
相似之处
React与Vue存在很多相似之处，专注于创造前端的富应用。

React与Vue只有骨架，其他的功能如路由、状态管理等是框架分离的组件。

Virtual DOM
Virtual DOM是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，
那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。

当有变化产生时，一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。

之后这些差别会应用在真实的DOM上。

Vue在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

React每当应用的状态被改变时，全部子组件都会重新渲染。这可以通过shouldComponentUpdate这个生命周期方法来进行控制。

组件化：
React与Vue推荐使用组件化，看看单页面的组件化：

vue单页面组件：

goodSwiper.vue

<template>
<div class="swiper-container">
<div class="swiper-wrapper wrap">
<a class="swiper-slide sildetab active" href="#">全部</a>
<a class="swiper-slide sildetab " href="#">大牌特惠</a>
<a class="swiper-slide sildetab" href="#">下午茶不贵</a>
<a class="swiper-slide sildetab" href="#">商场百货</a>
<a class="swiper-slide sildetab" href="#">生鲜水果</a>
<a class="swiper-slide sildetab" href="#">鲜花蛋糕</a>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
mounted(){
const swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 4,
paginationClickable: true,
spaceBetween: 30,
freeMode: true
})
}
}
</script>
<style scoped>
@import '../../assets/css/shoppingclass.css';
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './assets/js/jquery-1.8.3.min.js'
import './assets/js/swiper.min.js'
import './assets/css/swiper.min.css'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import goodSwiper from 'goodSwiper.vue'
Vue.use(Router)

export default new Router({
routes: [
{
name:'goodSwiper',
path: '/goodSwiper',
component: goodSwiper

},

]
})

react单页面组件

World.jsx

import React from "react";
export default class World extends React.Component{
render(){
return <div><h1>world this is world component</h1></div>
}
}
Hello.jsx

import React from "react";
export default class Hello extends React.Component{
render(){
return <div><h1>hello this is hello component</h1></div>
}
}
App.jsx

import React from "react";
import Hello from "./Hello"
import World from "./World";
import {BrowserRouter as Router,Route,Link} from "react-router-dom";

export default class App extends React.Component{
render(){
return <Router>
<div>
<ul>
<li><a href="/">hello</a></li>
<li><Link to="/w">world</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Hello}/>
<Route path="/w" component={World}/>
</div>
</Router>
}
}
mainjs

import React from 'react';
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App/>,document.querySelector("#app"))

构建工具
React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。两个工具都能让你得到一个根据最佳实践设置的项目模板。·

由于CRA有很多选项，使用起来会稍微麻烦一点。这个工具会逼迫你使用Webpack和Babel。而vue-cli则有模板列表可选，能按需创造不同模板，使用起来更灵活一点。

主要区别：
模板 vs JSX
v-for
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
<ul>
<pasta-item v-for="(item, key) in samplePasta" :item="item" :key="key" ></pasta-item>
</ul>

react.js的循环
<ul className="pasta-list">
{
Object.keys(this.state.pastadishes).map(key =>
<PastaItem index={key} key={key} details={this.state.pastadishes[key]} } />
)
}
</ul>
状态管理 vs 对象属性：
· react在state状态管理存储数据的，不能修改数据，修改数据在Setstate中

class World extends React.Component{
constructor(props){
super(props);
this.state = {
a:1,
books:[
{title:"react",record:0},
{title:"angular",record:0}
]
};
this.Add = this.Add.bind(this);
}
Add(){
return this.setState({
a:2
})
}
在Vue中，state对象并不是必须的，数据由data属性在Vue对象中进行管理

if (!this.orders.hasOwnProperty(key)) {
this.$set(this.orders, key, {count: 0});
}

this.orders[key].count += 1;
}
}
}
</script>

对于管理大型应用中的状态这一话题而言，Vue.js的作者尤雨溪曾说过，（Vue的）解决方案适用于小型应用，但对于对于大型应用而言不太适合。
---------------------
作者：饮冰十年
来源：优快云
原文：https://blog.youkuaiyun.com/weixin_39654784/article/details/78471947
版权声明：本文为博主原创文章，转载请附上博文链接！