江苏龙网

  1. 首页 > 人文 > >

【源码时代】用Vue和React构建相同应用程序，区别在哪？


在工作中使用了 Vue 之后 ， 我已经对它有了相当深入的了解 。 同时 ， 我也对 React 感到好奇 。 我阅读了 React 的文档 ， 也看了一些教程视频 ， 虽然它们很棒 ， 但我真正想知道的是 React 与 Vue 有哪些区别 。 这里所说的区别 ， 并不是指它们是否都具有虚拟 DOM 或者它们如何渲染页面 。 我真正想要做的是对它们的代码进行并排比较 ， 并搞清楚在使用这两个框架开发应用时究竟有哪些差别 。
我决定构建一个标准的待办事项应用程序 ， 用户可以添加和删除待办事项 。 我分别使用它们默认的 CLI（React 的 create-react-app 和 Vue 的 vue-cli）来创建这个应用 。 先让我们看一下这两个应用的外观：
【源码时代】用Vue和React构建相同应用程序，区别在哪？
本文插图
两个应用程序的 CSS 代码几乎完全相同 ， 但代码存放的位置存在差别 。
【源码时代】用Vue和React构建相同应用程序，区别在哪？
本文插图
它们的结构也几乎完全相同 ， 唯一的区别是 React 有三个 CSS 文件 ， 而 Vue 则没有 。 这是因为 React 组件需要一个附带的文件来保存样式 ， 而 Vue 采用包含的方式 ， 将样式声明在组件文件中 。
从理论上讲 ， 你可以使用老式的 style.css 文件来保存整个页面的样式 ， 这完全取决于你自己 。 不管怎样 ， 还是展示一下.vue 文件中的 CSS 代码长什么样：
【源码时代】用Vue和React构建相同应用程序，区别在哪？
本文插图
看完样式方面的问题 ， 现在让我们深入了解其他细节！
如何改变数据？
我们说“改变数据”（mutate data） ， 实际上就是指修改已经保存好的数据 。 比如 ， 如果我们想将一个人的名字从 John 改成 Mark ， 我们就要“改变数据” 。 这就是 React 和 Vue 的关键区别之一 。 Vue 创建了一个数据对象 ， 我们可以自由地更新数据对象 ， 而 React 创建了一个状态对象 ， 要更新状态对象 ， 需要做更多琐碎的工作 。 下面是 React 的状态对象和 Vue 的数据对象之间的对比：
React 的状态对象：
【源码时代】用Vue和React构建相同应用程序，区别在哪？
本文插图
Vue 的数据对象：
【源码时代】用Vue和React构建相同应用程序，区别在哪？
本文插图
从图中可以看到 ， 我们传入的是相同的数据 ， 它们只是标记的方式不一样 。 但它们在如何改变这些数据方面却有很大的区别 。
假设我们有一个数据元素 name:'Sunil' 。
在 Vue 中 ， 我们通过 this.name 来引用它 。 我们也可以通过 this.name='John'来更新它 ， 这样会把名字改成 John 。
在 React 中 ， 我们通过 this.state.name 来引用它 。 关键的区别在于 ， 我们不能简单地通过 this.state.name='John'来更新它 ， 因为 React 对此做出了限制 。 在 React 中 ， 我们需要使用 this.setState({name:'John'}) 的方式来更新数据 。
在了解了如何修改数据之后 ， 接下来让我们通过研究如何在待办事项应用中添加新项目来深入了解其他细节 。
如何创建新待办事项？
React：createNewToDoItem = () => {this.setState( ({ list, todo }) => ({list: [...list,{todo}],todo: ''})); };
Vue：createNewToDoItem() {this.list.push({'todo': this.todo});this.todo = ''; }
React 是怎么做到的？
在 React 中 ， input 有一个叫作 value 的属性 。 我们通过几个与创建双向绑定相关的函数来自动更新 value 。 React 通过为 input 附加 onChange 函数来处理双向绑定 。


推荐阅读


上一篇：【zol中关村在线】新iPad Pro发布 网友：文案走“阴阳怪气”风

下一篇：新浪科技：特斯拉宣布美国两工厂临时停产