程式碼的複用

本來今天要幫以前的Side Project搬家，但箱子都還沒拆，
先來看一下Vue3重要的概念之一：重複使用吧！

以前Vue2的時候，我們都要使用Mixin 幫未來可能再用到的程式碼包裝，
現在Vue3的好處就是，使用相似的程式碼，就可以export再利用囉。
官方管這種重複使用的方式叫做composable(可組合的)

自己的經驗是，腦袋不用再裝Mixin的用法，清出一點空間。
不過這篇後面我們也會解釋Composable解決的問題。

看官方文檔：Composables

環遊非洲第09天：非洲101 之Q

猜猜哪個國家在2006年合法化同性婚姻？(比台灣還早！)
A. 南非
B. 奈及利亞
C. 肯亞
D. 迦納

Composables vs. Mixin

Vue3 Composition API可以簡單複用，

Options API 使用Mixin:

//import common from './assets/scripts/common'
const mixins = {
    methods: {
        $_isMobile(){
          let width = window.innerWidth ||
                    document.documentElement.clientWidth ||
                    document.body.clientWidth
          return width <= 768
        }
      }
}

//掛載在入口點成為全域共用
//main.js
export default mixins;

import { createApp } from 'vue'
import App from './App.vue'
import './assets/styles/common.css'

createApp(App).use(i18n).use(store).use(router).mixin(common).mount('#app')

使用Composable

composable/common.js

export function $_isMobile(){
    let width = window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth
    return width <= 768
}

//直接使用
import {$_isMobile} from '@/composables/common.js';

const isMobile = computed(() => {
    return $_isMobile();
})

Composables解決的問題

1. 命名衝突
   在舊有的Mixin模式下，直接使用，容易造成命名衝突問題，因為是直接使用Mixin

而Composables需要引入，也解決了命名衝突，直接來個警告給你。

2. 互相依賴的問題
   Mixin和被引入的檔案之間主客關係不明，如果Mixin會使用在同一個檔案的變數：Myvariables
   被引入的檔案也有一個變數Myvariables
   就容易造成混亂

但Composables引入的檔案裡面，就只能使用被引入檔案的變數。

TODO: 補上案例

引用自:
How the Vue Composition API Replaces Vue Mixins

環遊非洲第09天：非洲101 之A

不好意思，如果你選擇B~D，在那些國家同性戀可是會被關的！
在全世界禁止同性婚姻的69個國家裡面，有33個國家來自非洲。
這篇文章說這是殖民留下來的法條，
但我目前觀察，大部分的非洲國家在婚姻這塊還是偏保守，也是原因之一。

　而自稱［彩虹國度］的南非（代表容納各族群人種的顏色）
　也是非洲國家第一個合法化同性婚姻的國家。
　很多在其他非洲國家的LGBT者，也會因此來到南非生活。
　不過南非境內還是有些人觀念偏保守，儘管已經合法化十多年，
　新聞還是時常出現攻擊LGBT的消息。
　當然有攻擊者，就有維護者，南非境內的LGBT團體也積極為自己發聲。

Progress and Setbacks on LGBT Rights in Africa — An Overview of the Last Year
5 Countries in Africa That Have Legalized Same-Sex Relationships in the Past 10 Years

以上!

又是偷懶的一篇？