阅读前提:对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差别