React vs Vue 特性总结

用 react 和 vue 开发过项目后，我有一点儿心得，对二者的特性进行一个对比，能够发现一些同异之处。这是我在思否写的第一篇文章，如果哪里写得不对，请各位大佬纠正。虽然我还是个“小白”，但是如果我的总结能够给比我更白的小小白一点儿帮助，那也是极好的~

React

1. 模板：JSX 把结构直接写在 js 中。
2. 插值：{表达式}，例如：<h2>{abc}</h2>。
3. 循环列表：[].map((obj) => 结构);
4. 判断：三元运算符或者 if else。
5. 定义组件：函数组件、类组件。
6. 使用组件：当成标签的形式放在结构中，例如：<News /> 或 <News></News>。
7. 给子组件传递数据：通过 props 向子组件定制数据。
8. 子组件通知父组件：给子组件传递一个回调函数，在子组件中执行时，填入实参。
9. 事件系统：写在行间，驼峰命名法，如果需要传实参，则把方法放在函数体里。
10. 生命周期钩子函数：挂载、更新、销毁。
11. 组件内部的状态：this.state = {};
12. 监听数据变化：componentWillRecieveProps(nextProps){}，推荐使用 getDerivedStateFromProps(nextProps, prevState)
13. 导航守卫：react-router 4.0之后没有导航守卫。
14. 给子组件定制结构：写在组件标签对中，子组件用 this.props.children 拿到。

Vue

1. 模板：写在 <template></template> 中。
2. 插值：{{表达式}} <h2>{{abc}}</h2>。
3. 循环列表：v-for
4. 判断：v-if 或者 v-show。
5. 定义组件：.vue 文件。
6. 使用组件：当成标签的形式放在结构中 <vue-markdown></vue-markdown>
7. 给子组件传递数据：通过 props 向子组件定制数据。
8. 子组件通知父组件：通过 $emit 子组件传给父组件数据。
9. 事件系统：写在行间，通过 v-on（简写：@）绑定事件，事件名全小写，如果需要传参直接写小括号，不会立即执行，默认第一个参数是事件对象。
10. 生命周期钩子函数：构建、挂载、更新、销毁。
11. 组件内部的状态：data(){return {};}
12. 监听数据变化：watch: {}
13. 导航守卫：全局、组件内、路由独享。
14. 给子组件定制结构：不能给子组件定制结构。