Vue与React的区别

 阅读前提:对Vue,React.js有一定的了解

 

1.改变数据改变视图的方式

 

vue 通过 this.obj.a = 'aa' 直接赋值或者 this.$set(this.obj, 'a', 'aa')

react 通过 this.setState({a: 'aa'})  更加的统一化明显,易于查找

 

2.React.js把页面的改变当作一帧一帧的动画对待

 

3.React.js的事件需要自己绑定this值,Vue已经绑定好

 

4.React.js对于表单原件没有v-model的双向绑定语法糖

 

5.React.js更贴近原生JS,利用原生JS去实现v-for指令

 

6.React.js统一父组件自上而下的数据流清晰,bug覆盖面低,易于差错

 

7.React.js中利用props.children实现Vue slot功能

 

8.React.js组件名开头字母必须大写

 

           看了React的Tic Tac Toe,为了对比两个框架,遂用Vue实现了一遍

           整个流程,按照循序渐进的方式分为5个demo

           01demo 主要用来实现9个小格都显示相应数字数字,主要利用了 slot

           02demo 实现小格可以填写X,利用v-for快速生成模版

           03demo 实现小格可以切换X或O,并且有提示下一个填写X或O

           04demo 实现了计算胜利者

           05demo 实现了时光穿梭,可以记录每一步,数组类型的值要进行浅层复制,否则会导致每一次的数据都一样

           欢迎star:  github地址

           大家可以自己动手做一遍,总结下React和Vue差别

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值