理解 Vue.js 中的 Mixins #5776

Reaper622 · 2019-05-14T08:53:17Z

译文翻译完成，resolve #5766

理解 Vue.js 中的 Mixins

JaxNext · 2019-05-14T16:34:34Z

认领校对

fanyijihua · 2019-05-14T16:34:39Z

@baddyo 好的呢 🍺

jilanlan · 2019-05-15T02:57:20Z

认领校对

fanyijihua · 2019-05-15T02:57:21Z

@jilanlan 妥妥哒 🍻

JaxNext

校对完成。@Reaper622 @leviding
辛苦了！

JaxNext · 2019-05-14T16:46:03Z

TODO1/understanding-mixins-in-vue-js.md


-A useful introduction to Mixins in Vue, why they are important and how to use them in your workflow.
+这是一篇对 Vue 中的 Mixins 的重要性以及如何在工作流程中使用它们的十分实用的介绍。


【这是一篇对 Vue 中的 Mixins 的重要性以及如何在工作流程中使用它们的十分实用的介绍。=>【本文是针对 Vue 中的 Mixins 的实用性介绍，探讨了 Mixins 为何重要，以及如何在工作流中使用。】

JaxNext · 2019-05-14T16:51:42Z

TODO1/understanding-mixins-in-vue-js.md


 ![Photo by [Augustine Fou](https://unsplash.com/@augustinefou?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/12000/0*gtfwEvDVwDgHMv7L)

-## What are Mixins?
+## 什么是混入？


【什么是混入？】=>【什么是 Mixins？】

JaxNext · 2019-05-15T08:04:12Z

TODO1/understanding-mixins-in-vue-js.md


-Mixins in Vue JS are basically a chunk of defined logic, stored in a particular prescribed way by Vue, which can be re-used over and over to add functionality to your Vue instances and components. So Vue mixins can be shared between multiple Vue components without the need to repeat code blocks. Anyone who has used the CSS pre-processor called SASS has a good idea of mixins.
+Vue JS 中的 Mixins 基本上就是一堆定义的逻辑，它们以 Vue 规定的特殊方式存储，它们可以反复使用来为 Vue 实例和组件添加功能。因此，Vue mixins 可以在多个 Vue 组件之间共享，而不需要重复写代码块。如果你之前用过 Sass 这个 CSS 预处理器，那么你会对 mixins 有很好的理解。


【基本上就是一堆定义的逻辑，】=>【基本上就是一段定义好的逻辑代码，】

JaxNext · 2019-05-15T08:10:12Z

TODO1/understanding-mixins-in-vue-js.md


-This post is suited for intermediate frontend developers that use Vue JS, and so being conversant with beginner concepts and installation processes is assumed. Here are a few prerequisites you should already have before you start to use Vue CLI 3 through this article.
+这篇文章更适合于使用 Vue JS 开发的中级前端工程师，因此你需要先熟悉基础概念以及安装过程。在开始使用 Vue CLI 3 之前，你应该先满足一个必要条件。


【你应该先满足一个必要条件。】=>【你最好已经掌握了这些预备知识。】

JaxNext · 2019-05-15T08:13:14Z

TODO1/understanding-mixins-in-vue-js.md


-* A code editor: Visual Studio Code is highly recommended. ([here’s why](https://blog.bitsrc.io/a-convincing-case-for-visual-studio-code-c5bcc18e1693?source=your_stories_page---------------------------))
+- 一个代码编辑器：高度推荐 Visual Studio Code 。 ([推荐理由](https://blog.bitsrc.io/a-convincing-case-for-visual-studio-code-c5bcc18e1693?source=your_stories_page---------------------------))


【高度推荐 Visual Studio Code 。】=>【高度推荐 Visual Studio Code。】

句号前后各多了一个空格。

JaxNext · 2019-05-15T09:31:22Z

TODO1/understanding-mixins-in-vue-js.md

@@ -234,7 +233,7 @@ export default {
 </script>
 ```

-If you followed through from the start, your application components should be like it is below:
+如果你从一开始就跟着我说的写，那么你的应用组件应该向下面这样：


【那么你的应用组件应该向下面这样：】=>【那么你的应用组件应该像下面这样：】

JaxNext · 2019-05-15T09:35:20Z

TODO1/understanding-mixins-in-vue-js.md


-2. **Global Mixins:** This is a different type of mixin that is defined in the Main.js file of any Vue project. It affects all Vue components in an application so the Vue team advises that it be used with caution. A definition of a global mixin looks like this:
+1. **局部 Mixins：** 这就是我们在这篇文章中所处理的类型。它的范围仅局限于导入和注册的组件。局部 mixin 的影响由引入它的组件所决定。


【局部 mixin 的影响由引入它的组件所决定。】=>【局部 mixin 的影响范围由引入它的组件所决定。】

JaxNext · 2019-05-15T09:38:17Z

TODO1/understanding-mixins-in-vue-js.md


-In the hierarchy of things in a Vue application, inside a component mixins are applied first by default. The component is applied second, so that it can override the mixin in any case. So it is important to always remember that when there is a kind of conflict of authority, the Vue component will always have the final say and overriding powers.
+在 Vue 应用中的事务层结构中，组件内部应默认优先应用 mixins。组件应该是二次应用，这样它可以在任意情况下重写覆盖 mixin。所以要始终记得当出现各种各样的权限冲突是，Vue 组件拥有有最终的解释和覆盖权。


【组件应该是二次应用，】=>【组件的应用顺序次之，】

JaxNext · 2019-05-15T09:40:30Z

TODO1/understanding-mixins-in-vue-js.md


-In the hierarchy of things in a Vue application, inside a component mixins are applied first by default. The component is applied second, so that it can override the mixin in any case. So it is important to always remember that when there is a kind of conflict of authority, the Vue component will always have the final say and overriding powers.
+在 Vue 应用中的事务层结构中，组件内部应默认优先应用 mixins。组件应该是二次应用，这样它可以在任意情况下重写覆盖 mixin。所以要始终记得当出现各种各样的权限冲突是，Vue 组件拥有有最终的解释和覆盖权。


【所以要始终记得当出现各种各样的权限冲突是，】=>【因此务必谨记，当出现某种权限冲突时，】

JaxNext · 2019-05-15T09:42:42Z

TODO1/understanding-mixins-in-vue-js.md


-You have been introduced to the concept of mixins in Vue, the types and how they are used with a sample demonstration. It is important you also remember to stick to local mixins and only use global mixins in rare cases when you really need it. Happy coding!
+现在你已经了解了 Vue 中 mixins 的概念，类型以及一些通过实例演示的使用方法。同样重要的是要坚持使用局部 mixins，并且只在一些极少的必须用到的情况下使用全局 mixins。编码愉快！


【现在你已经了解了 Vue 中 mixins 的概念，类型以及一些通过实例演示的使用方法。】=>【通过一个简单的示例，本文介绍了 Vue mixin 的概念、类型和使用方法。】

【现在你已经了解了 Vue 中 mixins 的概念，类型以及一些通过实例演示的使用方法。】=>【本文通过一个简单的示例，介绍了 Vue mixin 的概念、类型和使用方法。】

jilanlan

校对完成。@Reaper622 @leviding
辛苦了！

jilanlan · 2019-05-15T03:09:33Z

TODO1/understanding-mixins-in-vue-js.md


 ![Photo by [Augustine Fou](https://unsplash.com/@augustinefou?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/12000/0*gtfwEvDVwDgHMv7L)

-## What are Mixins?
+## 什么是混入？


此处Mixins是专有名词，不应该翻译为中文「混入」

jilanlan · 2019-05-15T03:46:54Z

TODO1/understanding-mixins-in-vue-js.md


-Mixins in Vue JS are basically a chunk of defined logic, stored in a particular prescribed way by Vue, which can be re-used over and over to add functionality to your Vue instances and components. So Vue mixins can be shared between multiple Vue components without the need to repeat code blocks. Anyone who has used the CSS pre-processor called SASS has a good idea of mixins.
+Vue JS 中的 Mixins 基本上就是一堆定义的逻辑，它们以 Vue 规定的特殊方式存储，它们可以反复使用来为 Vue 实例和组件添加功能。因此，Vue mixins 可以在多个 Vue 组件之间共享，而不需要重复写代码块。如果你之前用过 Sass 这个 CSS 预处理器，那么你会对 mixins 有很好的理解。


『Vue JS 中的 Mixins 基本上是定义一大堆逻辑的地方』这样翻译更容易理解吧

jilanlan · 2019-05-15T05:50:16Z

TODO1/understanding-mixins-in-vue-js.md


-This post is suited for intermediate frontend developers that use Vue JS, and so being conversant with beginner concepts and installation processes is assumed. Here are a few prerequisites you should already have before you start to use Vue CLI 3 through this article.
+这篇文章更适合于使用 Vue JS 开发的中级前端工程师，因此你需要先熟悉基础概念以及安装过程。在开始使用 Vue CLI 3 之前，你应该先满足一个必要条件。


『你应该满足以下几个必要条件』 a few翻译错了应该为几个

jilanlan · 2019-05-15T06:05:11Z

TODO1/understanding-mixins-in-vue-js.md

@@ -139,18 +131,18 @@ export default {
 </script>
 ```

-So you can clearly see that we are repeating the click method code block in the both components and this is not very ideal as it is not an efficient way to handle memory resources and it also goes against the DRY principle.
+至此你可以很明显地看到我们在重复点击方法的代码块在两个组件中并且这并不是很理想，因为他不是处理内存资源的有效方法，同时也违反了 DRY 的原则。


『至此，你可以明显感受到，在两个组件中出现相同的点击功能代码块，并不是理想状态』可以翻译成这样原翻译有点绕口

jilanlan · 2019-05-15T06:06:33Z

TODO1/understanding-mixins-in-vue-js.md

@@ -139,18 +131,18 @@ export default {
 </script>
 ```

-So you can clearly see that we are repeating the click method code block in the both components and this is not very ideal as it is not an efficient way to handle memory resources and it also goes against the DRY principle.
+至此你可以很明显地看到我们在重复点击方法的代码块在两个组件中并且这并不是很理想，因为他不是处理内存资源的有效方法，同时也违反了 DRY 的原则。


『因为他不是...』这句中的『他』应改为它

jilanlan · 2019-05-15T06:07:55Z

TODO1/understanding-mixins-in-vue-js.md


-4. They are a great platform for code reusability.
+## mixins 帮助我们解决了什么问题


这里的 mixins 首字母建议大写

jilanlan · 2019-05-15T07:34:05Z

TODO1/understanding-mixins-in-vue-js.md


-2. With Vue mixins, you also get a great option of flexibility, a mixin object contains options for Vue components so there is a mixing of both mixin and component options.
+1. 使用 Vue mixins， 你可以十分简单地在编程中遵循 DRY 原则(译者注: Don't Repeat Yourself)，他会确保你不会重复自己的代码。


『他会确保...』中应改为它

jilanlan · 2019-05-16T05:59:57Z

TODO1/understanding-mixins-in-vue-js.md


-You have been introduced to the concept of mixins in Vue, the types and how they are used with a sample demonstration. It is important you also remember to stick to local mixins and only use global mixins in rare cases when you really need it. Happy coding!
+现在你已经了解了 Vue 中 mixins 的概念，类型以及一些通过实例演示的使用方法。同样重要的是要坚持使用局部 mixins，并且只在一些极少的必须用到的情况下使用全局 mixins。编码愉快！


【现在你已经了解了 Vue 中 mixins 的概念，类型以及一些通过实例演示的使用方法。】=>【本文通过一个简单的示例，介绍了 Vue mixin 的概念、类型和使用方法。】

根据 Baddyo 的校对建议进行修改

根据 jilanlan 的建议进行修改

Reaper622 · 2019-05-16T06:28:28Z

修改完成 @leviding
同时感谢两位 @baddyo @jilanlan 的校对。 : )

leviding

Good

leviding · 2019-05-17T12:27:51Z

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

文章发布时，标题前面那个大图，你可以在上传掘金的时候作为题图使用，然后在文中删除那个图就行啦。

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

Reaper622 · 2019-05-17T12:46:35Z

@leviding 已经发布链接 https://juejin.im/post/5cdeac5851882525f52cf662

Reaper622 added 2 commits May 14, 2019 16:46

理解 Vue.js 中的 Mixins

06795df

理解 Vue.js 中的 Mixins

理解 Vue.js 中的 Mixins

bb7908d

理解 Vue.js 中的 Mixins

fanyijihua added the 校对认领 label May 14, 2019

fanyijihua mentioned this pull request May 14, 2019

理解 Vue.js 中的 Mixins #5766

Closed

leviding added the 前端 label May 14, 2019

fanyijihua added the 正在校对 label May 14, 2019

fanyijihua removed the 校对认领 label May 15, 2019

JaxNext reviewed May 15, 2019

View reviewed changes

jilanlan reviewed May 16, 2019

View reviewed changes

leviding added the enhancement 等待译者修改 label May 16, 2019

Reaper622 added 2 commits May 16, 2019 14:20

根据 Baddyo 的校对建议进行修改

4b1f54a

根据 Baddyo 的校对建议进行修改

根据 jilanlan 的建议进行修改

eecaa48

根据 jilanlan 的建议进行修改

leviding added 标注待管理员 Review and removed enhancement 等待译者修改 labels May 16, 2019

格式优化

f3f3b07

leviding approved these changes May 17, 2019

View reviewed changes

leviding merged commit f0b3673 into xitu:master May 17, 2019

leviding added 翻译完成 and removed 标注待管理员 Review 正在校对 labels May 17, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

理解 Vue.js 中的 Mixins #5776

理解 Vue.js 中的 Mixins #5776

Reaper622 commented May 14, 2019

JaxNext commented May 14, 2019

fanyijihua commented May 14, 2019

jilanlan commented May 15, 2019

fanyijihua commented May 15, 2019

JaxNext left a comment

JaxNext May 14, 2019

JaxNext May 14, 2019

JaxNext May 15, 2019

JaxNext May 15, 2019

JaxNext May 15, 2019

JaxNext May 15, 2019

JaxNext May 15, 2019

JaxNext May 15, 2019

JaxNext May 15, 2019

JaxNext May 15, 2019

jilanlan May 16, 2019

jilanlan left a comment •

edited

Loading

jilanlan May 15, 2019

jilanlan May 15, 2019

jilanlan May 15, 2019

jilanlan May 15, 2019

jilanlan May 15, 2019

jilanlan May 15, 2019

jilanlan May 15, 2019

jilanlan May 16, 2019

Reaper622 commented May 16, 2019

leviding left a comment

leviding commented May 17, 2019

Reaper622 commented May 17, 2019


		A useful introduction to Mixins in Vue, why they are important and how to use them in your workflow.
		这是一篇对 Vue 中的 Mixins 的重要性以及如何在工作流程中使用它们的十分实用的介绍。


		Mixins in Vue JS are basically a chunk of defined logic, stored in a particular prescribed way by Vue, which can be re-used over and over to add functionality to your Vue instances and components. So Vue mixins can be shared between multiple Vue components without the need to repeat code blocks. Anyone who has used the CSS pre-processor called SASS has a good idea of mixins.
		Vue JS 中的 Mixins 基本上就是一堆定义的逻辑，它们以 Vue 规定的特殊方式存储，它们可以反复使用来为 Vue 实例和组件添加功能。因此，Vue mixins 可以在多个 Vue 组件之间共享，而不需要重复写代码块。如果你之前用过 Sass 这个 CSS 预处理器，那么你会对 mixins 有很好的理解。


		This post is suited for intermediate frontend developers that use Vue JS, and so being conversant with beginner concepts and installation processes is assumed. Here are a few prerequisites you should already have before you start to use Vue CLI 3 through this article.
		这篇文章更适合于使用 Vue JS 开发的中级前端工程师，因此你需要先熟悉基础概念以及安装过程。在开始使用 Vue CLI 3 之前，你应该先满足一个必要条件。


		* A code editor: Visual Studio Code is highly recommended. ([here’s why](https://blog.bitsrc.io/a-convincing-case-for-visual-studio-code-c5bcc18e1693?source=your_stories_page---------------------------))
		- 一个代码编辑器：高度推荐 Visual Studio Code 。 ([推荐理由](https://blog.bitsrc.io/a-convincing-case-for-visual-studio-code-c5bcc18e1693?source=your_stories_page---------------------------))


		2. Global Mixins: This is a different type of mixin that is defined in the Main.js file of any Vue project. It affects all Vue components in an application so the Vue team advises that it be used with caution. A definition of a global mixin looks like this:
		1. 局部 Mixins：这就是我们在这篇文章中所处理的类型。它的范围仅局限于导入和注册的组件。局部 mixin 的影响由引入它的组件所决定。


		In the hierarchy of things in a Vue application, inside a component mixins are applied first by default. The component is applied second, so that it can override the mixin in any case. So it is important to always remember that when there is a kind of conflict of authority, the Vue component will always have the final say and overriding powers.
		在 Vue 应用中的事务层结构中，组件内部应默认优先应用 mixins。组件应该是二次应用，这样它可以在任意情况下重写覆盖 mixin。所以要始终记得当出现各种各样的权限冲突是，Vue 组件拥有有最终的解释和覆盖权。


		You have been introduced to the concept of mixins in Vue, the types and how they are used with a sample demonstration. It is important you also remember to stick to local mixins and only use global mixins in rare cases when you really need it. Happy coding!
		现在你已经了解了 Vue 中 mixins 的概念，类型以及一些通过实例演示的使用方法。同样重要的是要坚持使用局部 mixins，并且只在一些极少的必须用到的情况下使用全局 mixins。编码愉快！


		4. They are a great platform for code reusability.
		## mixins 帮助我们解决了什么问题


		2. With Vue mixins, you also get a great option of flexibility, a mixin object contains options for Vue components so there is a mixing of both mixin and component options.
		1. 使用 Vue mixins，你可以十分简单地在编程中遵循 DRY 原则(译者注: Don't Repeat Yourself)，他会确保你不会重复自己的代码。

理解 Vue.js 中的 Mixins #5776

理解 Vue.js 中的 Mixins #5776

Conversation

Reaper622 commented May 14, 2019

JaxNext commented May 14, 2019

fanyijihua commented May 14, 2019

jilanlan commented May 15, 2019

fanyijihua commented May 15, 2019

JaxNext 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

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jilanlan left a comment • edited Loading

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

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

Reaper622 commented May 16, 2019

leviding left a comment

Choose a reason for hiding this comment

leviding commented May 17, 2019

Reaper622 commented May 17, 2019

jilanlan left a comment •

edited

Loading