共计 3498 个字符，预计需要花费 9 分钟才能阅读完成。
如果你只会应用 Vue 或者 React，那么这篇文章适宜你。
本文不深刻聊原理，只比照根底性能的应用，先看上面这份数据，百度搜寻指数，很显著 Vue 搜寻指数显著高于 React 以及 Angular。
从简略学起没问题，你认为的技术之路这样的
其实你是这样的
想想本人除了 Vue，你还有什么？写此文的目标就是让大家领悟到应用框架的办法和技巧。
上面是截取 react 与 vue 官网文档目录，共通的根底性能至多蕴含 9 项
- 数据绑定
- 模板
- 条件
- 列表
- 表单绑定
- 事件处理
- 生命周期
- 组件
以上蕴含了当下风行框架根本必备性能，先不去想框架具体实现细节，就以上七个性能，在不手动操作 DOM 的状况下如何实现？
三大框架都借助 MVVM 的思维，其劣势就是解脱手动操作 DOM 及节点数据获取带来的低效问题，往下看
MVVM
MVVM 旨在利用数据绑定函数，通过 ViewModal 主动去更新 DOM 的状态，进而从视图层中简直删除所有 GUI 代码。
既然大家都受到 VM 思维的启发，且根底性能都大抵类似，咱们逐个比照 Vue 及 React 的根底性能
数据绑定
vue 双向绑定，react 单向绑定，代码比拟
// vue
// 该对象被退出到一个 Vue 实例中
var vm = new Vue({data: { a: 1},
created: function () {this.a = 2;},
});
// react
var data = {a: 1};
class HelloWorld extends React.Component {constructor(props) {super(props);
this.state = {a: 1};
}
componentDidMount() {
// 须通过办法触发
this.setState({a: 2,});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
</div>
);
}
}
ReactDOM.render(<HelloWorld />, document.getElementById("root"));模板
-
表达式
JSX 用{}，vue 用{{}}，代码比拟// vue <template> <div> <span>{{name}}</span> <span>{{name + 'abc'}}</span> <span>{{`${name}abc`}}</span> <span>{{isShow?'abc':'efg'}}</span> <span>{{()=>{return 'abc'})}}</span> </div> </template> // react <div> <span>{name}</span> <span>{name + 'abc'}</span> <span>{`${name}abc`}</span> <span>{isShow?'abc':'efg'}</span> <span>{()=>{return 'abc'})}</span> </div> -
指令
vue 指令
v-if、v-else-if、v-else、v-show、v-modal
react 无指令代码比拟
// vue <template> <div> <p v-if="isA"> 我是 A </p> <p v-else-if="isB"> 我是 B </p> <p v-else> 我是 C </p> <p v-show="isShow"> 大魔王现世了 </p> <input type="text" v-model="inputText"/> <ul> <li v-for="(item, i) in list" :key="item.id">{{item.text}}</li> </ul> </div> </template> // react <div> { isA ? <p> 我是 A </p> : isB ? <p> 我是 B </p> : <p> 我是 C </p> } <p style={{display: isShow ? 'block' : 'none'}}> 大魔王现世了 </p> <input type="text" onChange={val => () => {this.setState({inputText:val})} value={this.state.inputText}/> <div className='btn' style={{marginLeft:'10px'}}></div> <ul> {list.map((item, i) => <li key={item.id}>{item.text}</li>) } </ul> </div>有没有发现 react 中透漏着表达式的芳香，这也是我集体喜爱 react 的起因
-
属性
绑定也就相当于组件传参，不便把须要自定义的参数传递到子组件中，常见的绑定有：属性绑定、class、style代码比拟
// vue // 认真看了文档才看懂什么意思，active 是 class, isActive 是判断条件，<div v-bind:class="{active: isActive}"></div> <div class="static" v-bind:class="{active: isActive,'text-danger': hasError}" ></div> <div v-bind:style="{color: activeColor, fontSize: fontSize +'px'}"></div> // react <div className={`static ${isActive?:'active':''}`}></div> <div style={{color: activeColor, fontSize: fontSize + 'px'}}></div>细品，表达式的芳香
表单绑定
vue 用 v-modal，react 用 onChange, 代码比拟
// vue
<input v-model="userName" />
<input v-bind:value="userName" v-on:input="userName = $event.target.value" />
第一行的代码其实只是第二行的语法糖。input 元素自身有个 oninput 事件，这是 HTML5
新减少的，相似 onchange，每当输入框内容发生变化，就会触发 oninput。// react
<input value={userName} onChange={($event=>this.setState({userName:
$event.target.value}))}>事件处理
vue 通过 v-on:*,react 通过 on*, 代码比拟
// vue
<div id="example-2">
<!-- `greet` 是在上面定义的办法名 -->
<button v-on:click="greet">Greet</button>
</div>
var example = new Vue({
el: "#example",
data: {name: "Vue.js",},
// 在 `methods` 对象中定义方法
methods: {greet: function (event) {
// `this` 在办法里指向以后 Vue 实例
alert("Hello" + this.name + "!");
// `event` 是原生 DOM 事件
if (event) {alert(event.target.tagName);
}
},
},
});
//react
class example extends Component {constructor(props) {super(props);
this.state = {name: "React.js"};
}
greet(event) {
// `this` 在办法里指向以后 Vue 实例
alert("Hello" + this.state.name + "!");
// `event` 是原生 DOM 事件
if (event) {alert(event.target.tagName);
}
}
render() {<button onClick={this.greet}>Greet</button>
}
}生命周期
生命周期的存在，也是为了在适合的机会执行各自的操作，再加上应用 virtual DOM 的机制，须要把握好组件挂载的机会，生命周期钩子就显得十分有必要了。
不论是 vue 还是 react, 生命周期都会经验以下阶段：
- 初始化阶段
- 运行阶段
- 销毁阶段
vue
react（v16.3 版本之前，之后版本生命周期有所调整）
组件
组件的复用的高效显而易见，组件设计、组件划分，也是一门学识
vue 组件的介绍，花色很多
react 组件
总结
通过对两大框架根底性能的比照，不难发现实现思路大同小异，只是在细节上各有各的思考，其中 Vue 自定义了很多 api，而 react 则通过表达式玩出了新花样，跳出框架自身，置信你对前端框架会看的更加透彻。