笔者就直入正题:相信大家都知道什么是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对象中进行管理
<script>
export default {
name: 'app',
data() {
return {
samplePasta: samplePasta,
orders: {}
}
},
methods: {
handleOrder: function (key) {
if (!this.orders.hasOwnProperty(key)) {
this.$set(this.orders, key, {count: 0});
}
this.orders[key].count += 1;
}
}
}
</script>
对于管理大型应用中的状态这一话题而言,Vue.js的作者尤雨溪曾说过,(Vue的)解决方案适用于小型应用,但对于对于大型应用而言不太适合。
---------------------
作者:饮冰十年
来源:CSDN
原文:https://blog.csdn.net/weixin_39654784/article/details/78471947
版权声明:本文为博主原创文章,转载请附上博文链接!