用 React 和 Vue 创建了两个完全相同的应用后，发现了这些差异 #4236

jonjia · 2018-08-01T11:49:28Z

译文翻译完成，resolve #4230

jonjia · 2018-08-01T11:53:54Z

TODO1/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences.md

 > * 校对者：

-# I created the exact same app in React and Vue. Here are the differences.
+# 用 React 和 Vue 创建了两个完全相同的应用后，发现了这些差异


用 React 和 Vue 创建了两个完全相同的应用后，发现了这些差异

用 React 和 Vue 创建了一个完全相同的应用后，发现了这些差异
3.。。。

SSShooter · 2018-08-01T12:59:04Z

校对认领

fanyijihua · 2018-08-01T12:59:07Z

@SSShooter 好的呢 🍺

SSShooter · 2018-08-02T01:17:48Z

TODO1/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences.md


-But I couldn’t find anything that tackled this. So I came to the realisation that I’d have to go ahead and build this myself in order to see the similarities and differences. In doing so, I thought I’d document the whole process so that an article on this will finally exist.
+但我找不到任何解决这个问题的资源。所以我意识到必须靠自己来解决这个问题以便看到它们之间的相似之处和不同之处。在这样做时，我想我会记录整个过程，所以最终就有了这样一篇文章。


必须靠自己来解决这个问题以便看到它们之间的相似之处和不同之处 =>
为了了解他们之间的异同，必须自己动手搭建工程

SSShooter · 2018-08-02T01:24:11Z

TODO1/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences.md


-Ultimately, they both achieve the same thing, and there is nothing to say that you can’t go ahead and structure your CSS differently in React or Vue. It really comes down to personal preference - you’ll hear plenty of discussion from the dev community over how CSS should be structured. For now, we’ll just follow the structure laid out in both CLIs.
+最终，它们都达到了同样目的，也没有什么会阻止你在 React 或 Vue 中以不同方式构建自己的 CSS。这完全取决于个人便好 - 你会听到社区中关于如何构建 CSS 的大量讨论。现在，我们会遵循两个 CLI 中列出的结构。


也没有什么会阻止你在 React 或 Vue 中以不同方式构建自己的 CSS =>
你也可以在 React 或 Vue 中以不同方式构建自己的 CSS

SSShooter · 2018-08-02T01:27:19Z

TODO1/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences.md


-In Vue, we reference this by calling **this.name**. We can also go about updating this by calling **this.name** **= ‘John’**. This would change my name to John. I’m not sure how I feel about being called John, but hey ho, things happen! :)
+在 Vue 中，我们通过 `this.name`** 来引用它。也可以通过 `this.name = '爱贝睿'` 来更新它。这会把我们的名字改为「爱贝睿」。正是我们公司的名字，但修改确实成功了。:)


this.name** 漏了加粗

SSShooter · 2018-08-02T01:29:24Z

TODO1/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences.md


-In Vue, we reference this by calling **this.name**. We can also go about updating this by calling **this.name** **= ‘John’**. This would change my name to John. I’m not sure how I feel about being called John, but hey ho, things happen! :)


另外塞私货好不好是个问题，本来变量完全可以不翻译

SSShooter · 2018-08-02T01:39:33Z

TODO1/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences.md


-We firstly pass the function down to the child component by referencing it as a prop in the place where we call the child component. We then add the call the function on the child by whatever means, such as an **onClick**, by referencing **this.props.whateverTheFunctionIsCalled**. This will then trigger the function that sits in the parent component. We can see an example of this entire process in the section _‘How do we delete from the list’._
+我们首先将函数传递给子组件，方法就是在使用子组件的位置将其作为prop 传递。然后在形如 **onClick** 方法中通过 **this.props.whateverTheFunctionIsCalled** 引用这个函数。这将触发位于父组件中定义的函数。可以在**如何从列表中删除 Todo 项**一节中看到整个过程的一个示例。


在使用子组件的位置将其作为prop 传递 =>
在使用子组件时将其作为 prop 传入

SSShooter · 2018-08-02T01:40:07Z

@jonjia 校对完毕

Jasminehyz · 2018-08-02T08:48:50Z

校对认领

fanyijihua · 2018-08-02T08:48:55Z

@huangyuanzhen 妥妥哒 🍻

Jasminehyz

you are so cool, guy. only a little problems.

Jasminehyz · 2018-08-02T09:33:19Z

TODO1/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences.md


-Ultimately, they both achieve the same thing, and there is nothing to say that you can’t go ahead and structure your CSS differently in React or Vue. It really comes down to personal preference - you’ll hear plenty of discussion from the dev community over how CSS should be structured. For now, we’ll just follow the structure laid out in both CLIs.
+最终，它们都达到了同样目的，也没有什么会阻止你在 React 或 Vue 中以不同方式构建自己的 CSS。这完全取决于个人便好 - 你会听到社区中关于如何构建 CSS 的大量讨论。现在，我们会遵循两个 CLI 中列出的结构。


这完全取决于个人便好 =>这完全取决于个人偏好

你会听到社区中关于如何构建 css 的大量讨论 => 你会在开发社区中听到大量有关 css 构建的讨论

Jasminehyz · 2018-08-03T01:20:14Z

TODO1/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences.md


-Having used Vue at my current workplace, I already had a fairly solid knowledge of how it all worked. However, I was curious to know what the grass was like on the other side of the fence — the grass in this scenario being React.
+在工作中使用 Vue 一段时间后，对它的工作原理有了相当深入的了解。然而，我很想知道篱笆另一边的草地是什么样 - React。


然而，我想知道篱笆另一边的草地是什么样 - React => 然而，我想知道篱笆另一边的草地是什么样 - 同样的情形放在 React 上会如何。

Jasminehyz · 2018-08-03T01:23:13Z

TODO1/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences.md


-We’ve looked at how we add, remove and change data, pass data in the form of props from parent to child, and send data from the child to the parent in the form of event listeners. There are, of course, lots of other little differences and quirks between React and Vue, but the hopefully the contents of this article has helped to serve as a bit of a foundation for understanding how both frameworks handle stuff 🤓
+我们研究了如何添加、删除和更改数据，以 prop 形式从父组件到子组件传递数据，以及通过事件侦听器形式将数据从子组件发送到父组件。当然，在 React 和 Vue 之间还存在许多其它小差异，但希望本文的内容对你理解两个框架如何处理问题打下一个好的基础 🤓


以 prop 形式从父组件到子组件传递数据 => 以 prop 的形式将数据从父组件传递到子组件

Jasminehyz · 2018-08-03T01:38:03Z

@jonjia 校对完毕

jonjia · 2018-08-03T03:44:18Z

@leviding @SSShooter @huangyuanzhen 修改完毕，谢谢大家认真校对。

leviding · 2018-08-04T01:16:06Z

@jonjia 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

jonjia · 2018-08-06T09:54:20Z

@leviding 已经发布了，地址：https://juejin.im/post/5b63f50a5188253128337110

leviding · 2018-08-16T10:50:11Z

翻译的很棒，校对也很棒

jonjia added 18 commits December 26, 2017 18:29

finish translate

7723e1e

remove .idea

f59d335

remove .idea

b406dfd

syncing the fork

3f3af93

Merge remote-tracking branch 'upstream/master'

cfd4dbf

Merge remote-tracking branch 'upstream/master'

b680bb7

Merge remote-tracking branch 'upstream/master'

d4adb76

Merge remote-tracking branch 'upstream/master'

fd13fe6

Merge remote-tracking branch 'upstream/master'

ffc27dd

Merge remote-tracking branch 'upstream/master'

69391d6

Merge remote-tracking branch 'upstream/master'

a8471e7

Merge remote-tracking branch 'upstream/master'

22a0824

ignore .vscode

3e742cd

Merge remote-tracking branch 'upstream/master'

1ae71e0

Merge remote-tracking branch 'upstream/master'

d6bd9a7

Merge remote-tracking branch 'upstream/master'

9641ef8

finish translate

912b2a4

fix

e3b4f7a

fanyijihua added the 校对认领 label Aug 1, 2018

jonjia closed this Aug 1, 2018

jonjia reopened this Aug 1, 2018

jonjia commented Aug 1, 2018

View reviewed changes

fanyijihua added the 正在校对 label Aug 1, 2018

leviding added the 前端 label Aug 1, 2018

leviding mentioned this pull request Aug 1, 2018

用 React 和 Vue 创建了两个完全相同的应用后，发现了这些差异 #4230

Closed

SSShooter reviewed Aug 2, 2018

View reviewed changes

fanyijihua removed the 校对认领 label Aug 2, 2018

Jasminehyz reviewed Aug 2, 2018

View reviewed changes

Jasminehyz reviewed Aug 3, 2018

View reviewed changes

finish modify according to proofreader

6508cfb

leviding added the 标注待管理员 Review label Aug 3, 2018

leviding approved these changes Aug 4, 2018

View reviewed changes

leviding merged commit 334c941 into xitu:master Aug 4, 2018

leviding added 翻译完成 and removed 标注待管理员 Review 正在校对 labels Aug 4, 2018

jonjia deleted the i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences branch October 7, 2018 14:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

用 React 和 Vue 创建了两个完全相同的应用后，发现了这些差异 #4236

用 React 和 Vue 创建了两个完全相同的应用后，发现了这些差异 #4236

jonjia commented Aug 1, 2018 •

edited

Loading

jonjia Aug 1, 2018

SSShooter commented Aug 1, 2018

fanyijihua commented Aug 1, 2018

SSShooter Aug 2, 2018

SSShooter Aug 2, 2018

SSShooter Aug 2, 2018

SSShooter Aug 2, 2018

SSShooter Aug 2, 2018

SSShooter commented Aug 2, 2018

Jasminehyz commented Aug 2, 2018

fanyijihua commented Aug 2, 2018

Jasminehyz left a comment

Jasminehyz Aug 2, 2018

Jasminehyz Aug 2, 2018

Jasminehyz Aug 3, 2018

Jasminehyz Aug 3, 2018

Jasminehyz commented Aug 3, 2018

jonjia commented Aug 3, 2018

leviding commented Aug 4, 2018

jonjia commented Aug 6, 2018

leviding commented Aug 16, 2018


		But I couldn’t find anything that tackled this. So I came to the realisation that I’d have to go ahead and build this myself in order to see the similarities and differences. In doing so, I thought I’d document the whole process so that an article on this will finally exist.
		但我找不到任何解决这个问题的资源。所以我意识到必须靠自己来解决这个问题以便看到它们之间的相似之处和不同之处。在这样做时，我想我会记录整个过程，所以最终就有了这样一篇文章。


		Ultimately, they both achieve the same thing, and there is nothing to say that you can’t go ahead and structure your CSS differently in React or Vue. It really comes down to personal preference - you’ll hear plenty of discussion from the dev community over how CSS should be structured. For now, we’ll just follow the structure laid out in both CLIs.
		最终，它们都达到了同样目的，也没有什么会阻止你在 React 或 Vue 中以不同方式构建自己的 CSS。这完全取决于个人便好 - 你会听到社区中关于如何构建 CSS 的大量讨论。现在，我们会遵循两个 CLI 中列出的结构。


		In Vue, we reference this by calling this.name. We can also go about updating this by calling this.name = ‘John’. This would change my name to John. I’m not sure how I feel about being called John, but hey ho, things happen! :)
		在 Vue 中，我们通过 `this.name`** 来引用它。也可以通过 `this.name = '爱贝睿'` 来更新它。这会把我们的名字改为「爱贝睿」。正是我们公司的名字，但修改确实成功了。:)


		We firstly pass the function down to the child component by referencing it as a prop in the place where we call the child component. We then add the call the function on the child by whatever means, such as an onClick, by referencing this.props.whateverTheFunctionIsCalled. This will then trigger the function that sits in the parent component. We can see an example of this entire process in the section _‘How do we delete from the list’._
		我们首先将函数传递给子组件，方法就是在使用子组件的位置将其作为prop 传递。然后在形如 onClick 方法中通过 this.props.whateverTheFunctionIsCalled 引用这个函数。这将触发位于父组件中定义的函数。可以在如何从列表中删除 Todo 项一节中看到整个过程的一个示例。


		Having used Vue at my current workplace, I already had a fairly solid knowledge of how it all worked. However, I was curious to know what the grass was like on the other side of the fence — the grass in this scenario being React.
		在工作中使用 Vue 一段时间后，对它的工作原理有了相当深入的了解。然而，我很想知道篱笆另一边的草地是什么样 - React。


		We’ve looked at how we add, remove and change data, pass data in the form of props from parent to child, and send data from the child to the parent in the form of event listeners. There are, of course, lots of other little differences and quirks between React and Vue, but the hopefully the contents of this article has helped to serve as a bit of a foundation for understanding how both frameworks handle stuff 🤓
		我们研究了如何添加、删除和更改数据，以 prop 形式从父组件到子组件传递数据，以及通过事件侦听器形式将数据从子组件发送到父组件。当然，在 React 和 Vue 之间还存在许多其它小差异，但希望本文的内容对你理解两个框架如何处理问题打下一个好的基础 🤓

用 React 和 Vue 创建了两个完全相同的应用后，发现了这些差异 #4236

用 React 和 Vue 创建了两个完全相同的应用后，发现了这些差异 #4236

Conversation

jonjia commented Aug 1, 2018 • edited Loading

Choose a reason for hiding this comment

SSShooter commented Aug 1, 2018

fanyijihua commented Aug 1, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SSShooter commented Aug 2, 2018

Jasminehyz commented Aug 2, 2018

fanyijihua commented Aug 2, 2018

Jasminehyz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jasminehyz commented Aug 3, 2018

jonjia commented Aug 3, 2018

leviding commented Aug 4, 2018

jonjia commented Aug 6, 2018

leviding commented Aug 16, 2018

jonjia commented Aug 1, 2018 •

edited

Loading