React vs Vue 特性总结

waltr 发布于2019-08-23 13:45 / 565人阅读

摘要：使用组件当成标签的形式放在结构中，例如或。子组件通知父组件给子组件传递一个回调函数，在子组件中执行时，填入实参。生命周期钩子函数挂载更新销毁。组件内部的状态监听数据变化导航守卫全局组件内路由独享。给子组件定制结构不能给子组件定制结构。

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

React

模板：JSX 把结构直接写在 js 中。

插值：{表达式}，例如：

{abc}

。

循环列表：[].map((obj) => 结构);

判断：三元运算符或者 if else。

定义组件：函数组件、类组件。

使用组件：当成标签的形式放在结构中，例如：或。

给子组件传递数据：通过 props 向子组件定制数据。

子组件通知父组件：给子组件传递一个回调函数，在子组件中执行时，填入实参。

事件系统：写在行间，驼峰命名法，如果需要传实参，则把方法放在函数体里。

生命周期钩子函数：挂载、更新、销毁。

组件内部的状态：this.state = {};

监听数据变化：componentWillRecieveProps(nextProps){}，推荐使用 getDerivedStateFromProps(nextProps, prevState)

导航守卫：react-router 4.0之后没有导航守卫。

给子组件定制结构：写在组件标签对中，子组件用 this.props.children 拿到。

Vue

模板：写在中。

插值：{{表达式}}

。

循环列表：v-for

判断：v-if 或者 v-show。

定义组件：.vue 文件。

使用组件：当成标签的形式放在结构中

给子组件传递数据：通过 props 向子组件定制数据。

子组件通知父组件：通过 $emit 子组件传给父组件数据。

事件系统：写在行间，通过 v-on（简写：@）绑定事件，事件名全小写，如果需要传参直接写小括号，不会立即执行，默认第一个参数是事件对象。

生命周期钩子函数：构建、挂载、更新、销毁。

组件内部的状态：data(){return {};}

监听数据变化：watch: {}

导航守卫：全局、组件内、路由独享。

给子组件定制结构：不能给子组件定制结构。

云服务器 GPU云服务器新特性总结 react _React React 源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99502.html

Reactjs vs. Vuejs

摘要：上图是二月份前端框架排名，位居第一，排名第三。我们认为前端模板和组件代码是紧密相连的。直到最近看了文档，才发现另有蹊跷。欢迎大家关注腾讯云技术社区-segmentfault官方主页，我们将持续在博客园为大家推荐技术精品文章哦~ 纪俊，从事Web前端开发工作，2016年加入腾讯OMG广告平台产品部，喜欢研究前端技术框架。这里要讨论的话题，不是前端框架哪家强，因为在 Vue 官网就已经...

AaronYuan 2019-08-20 16:24 评论0 收藏0
2017年3月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 03月份前端资源分享 1. Javascript 175453545 Redux compose and middleware 源码分析深入 Promise(二)——进击的 Promise Effective JavaScript leeheys blog -...

ermaoL 2019-06-27 16:30 评论0 收藏0
2017年3月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 03月份前端资源分享 1. Javascript 175453545 Redux compose and middleware 源码分析深入 Promise(二)——进击的 Promise Effective JavaScript leeheys blog -...

kamushin233 2019-08-29 12:34 评论0 收藏0
2017年3月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 03月份前端资源分享 1. Javascript 175453545 Redux compose and middleware 源码分析深入 Promise(二)——进击的 Promise Effective JavaScript leeheys blog -...

yy736044583 2019-08-20 16:31 评论0 收藏0