pure component

在写 Vue.js 或 React 的过程，一定都会听过这个名词。
并不是所有的 component 都必须 pure ，不是这样的，是有时候会需要 pure 有时候不需要，重点是开发者是不是可以掌握「我现在要不要 pure」而不是靠本能 pure。

快速复习 pure function 的重点

在 pure function 这个专有名词中，我们获得两个重点

1. 输出只和输入有关
2. 没有 side effect

也就是说，如果 component 也可以做到一样的效果，不是 pure 至少也要「等效 pure」。

输出输入

Vue.js 在 component 的语法中，我认为输入可以指 props，输出可以指 event。

• components props
• components custom events

从这个角度切入的话，要符合「输出只和输入有关」可以翻译成「event 只和 prop 有关」(请画重点。XDD)

而且在纯 FP 的情况之下 ，是不会宣告变数的，所以尽可能的在 pure component 里面，不要使用 data ，虽然大多数的情况之下，都是可以用 computed 来取代不被修改的 data，但还是有画面逻辑需要的例外状况。

重点:

1. event 只和 prop 有关
2. 用 computed 来取代不被修改的 data

就算你用 slot 这个定义依然没有矛盾。因为 slot 的 props 会接到另一个 component 的 props。

Side effect

一般来说，就是不使用 props ，但可以取得资料的做法。

基本的常见情况

• 在 component 里直接存取 vuex 的资料。 -> Side effect
• 在 component 里打 API 取得资料。 -> Side effect
• 在 compenent 里存取 cookie、localStorage。 -> Side effect
• 在 compenent 里存取档案。 -> Side effect

有些较难判断的

• 在 compenent 里存取 $route -> 算是全域变数 Side effect
• 在 compenent 里存取 import 进来的可变资料 -> 通常是 Singleton 算是全域变数 Side effect
• 在 compenent 里 (使用 $ref) 存取 DOM 上的资讯当资料 -> 算是存取文件 Side effect

相信还有很多其它的状况，像是使用 canvas 还是 maps 都是很难判断的情况，所以一开始不要用这个来练习。

谁该 pure

在 vue-cli 工具帮我们建置好的专案目录中，有一个 views 和 component 两个地方可以放 .vue 档。初学的时候，只知道要放重复使用的 component，其实真正的意思是放「pure component」唯有 pure 才「好用 (方便重复使用)」，但也因为 pure 不适合由这个 component 决定资料是谁。

反而是由另一个目录 views 的 .vue 档来决定要载什麽资料，在 views 里的 .vue 档，引用 pure component 决定「要怎麽处理、呈现资料」，什麽 type 的资料，就选用相对应的 component 处理 (重要！要画重点)。

万一不 pure

其实就不 pure 而已，并不是一定要遵守这个原则，只是照着严格理论有它的优点，但并不是要记教条。没有 pure 其实就没有而已。哈哈~~ 维护上麻烦一点，写的时候小心就可以了。

但是，要是有一丝丝的可能，可以完美的接近严格理论，我愿意遵守。