Vue和React的区别
笔者就直入正题:相信大家都知道什么是vue和react;那么我们从数据双向绑定、组件及数据流、路由、状态管理等方面来分别对比一下怎样去使用Vue和React。数据双向绑定何为数据双向绑定:View层和Model层的数据相互影响。View层的表单操作、触发事件可能会引起数据变动;ajax请求也可能会引起数据变动,某一数据变动引起另外关联数据的改变Vue
笔者就直入正题:相信大家都知道什么是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>
<ul className="pasta-list"> { Object.keys(this.state.pastadishes).map(key => <PastaItem index={key} key={key} details={this.state.pastadishes[key]} } /> ) } </ul>
状态管理 vs 对象属性:
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的)解决方案适用于小型应用,但对于对于大型应用而言不太适合。
更多推荐
所有评论(0)