Vue3 Computed Properties & Watchers

前言
这礼拜被这两个搞得晕头转向，因为是有样学样，不是扎实的学术派，所以一开始我只会到处watch，但在向别人提问后，不只1人说你这应该用computed比较好喔！我开始好奇这两个到底有什么不同？功能看起来都一样啊！本来不想直面这个问题，先求能用就好，谁都好，但困扰了好几天，实在受不了了，决定来快速笔记爬梳一下，看是否有新的收穫？（进度还没赶完...火烧屁股了只能快速）结果写了一大篇好像废话的东西，觉得毫无所获，很不满意，坐在位子上发呆，想着这週可能发不出文来了，于是转头问了旁边的同学这个问题，突然茅塞顿开，果断按了delete，至于如何实作跟举例，建议大家去看官网，会比看我写的文章好很多，就不赘述，也姑且不深究底层如何处理，因为我能力不足XD。决定以另外一种方式来表达，如果把这两个东西拟人化，当成我的朋友的话，角色设定如下：Computed Properties: 是个极其平凡的正常普通人，生活稳定，遇到事情就是以过去经验来处理，发现事情似乎无法类比过去经验时，才会重新思考该如何作反应，简而言之，输入有变动，才会重新输出，输入无变动，直接提取经验，倾向用快思慢想中快思那端处理大部分事物，所以处理的事情也相对单纯。Watcher: 是个极度神经质的会计师，中心思想就是数据一定有错，以这个大前提来看待所有财务报表，就算暂时找不出任何错误，他还是会一直钻牛角尖不间断地持续监听，这种病态的执着，让他经常处于焦虑状态超级耗能，虽然因此压力山大，却也同时得以在会计领域表现杰出，佔有一席之地，没有困难的问题难得了他。用很简单的方法来证明两个人的个性，我在computed跟watch里放了一模一样的程式码，再用console.log印出字样，实际看他们各自执行的次数。在我什么都没动的情况下，watch就硬生生的多了两次。所以如果你有这两个朋友，一般来说，若不是什么非常重大或困难的问题，你应该不会想要请求Ｗatcher的协助吧！与其向他请教徒增困扰，不如询问Computed Properties会让事情简单许多。但真的天要塌下来的时候，投靠Watcher会是更明智的选择。结论
希望透过这样的形容，提供跟我一样对于他们傻傻分不清楚的新手菜鸟一些画面，比较容易记忆，未来在选择该用什么方式实作时，有更明确的方向。