Day_13 : 让 Vite 来开启你的Vue 之 Option API 与 Mixins

Hi Dai Gei Ho~ 我是Winnie～

在昨天的文章中，我们有简单的提到 Composition API 的出现 是为了解决 过去Vue 在 编写功能上 难以被重复利用 的问题 ，但这边还是要提一下 虽然出现了Composition API 的用法，但 Option API 的用法目前还是可以在 Vue3 中使用的。

而到这边，我猜你一定会想问， 既然Option API都还可以使用 我干嘛要冒险 换成Composition API 啊？

嗯我懂你的感觉，这就好比当我们习惯的日常，突然被发现了问题但它不影响生活时，就不敢随意更改怕破坏这个日常，所以只好先放着了。 就像下图：

但别担心， 我们先来听听 以下 Option API的写法 会碰到的问题，您日後再来决定是否要跟进

Option API:

<script>

export default {
  components: {
    
  },
  data() {
    return {
      //资料状态A
      //资料状态B
    };
  },
  computed: {
    //功能Ａ
    //功能B
  },
  methods: {
    //功能Ａ
    //功能B
    
  },
  watch:{
     //功能Ａ
    //功能B
  }
  //略...
};
</script>

从以上 Option API 程序范例中，我们可以看到 程序结构 主要会以属性 来做切分，像是资料状态 可以放进 data中，事件方法会放进methods里等，而这样 分门别类的用法在初期 似乎 可以有效的管理程序码，感觉很棒，

但是你知道的，随着时间的增长，专案因为需求变更也会变得复杂，而其中明明是相同操作逻辑，却散落在元件的个地方，导致对应属性的程序码有所增长 （示意如上图），这样时间久了不仅不利於程序码维护，而之後想再使用某功能，却因为资料状态依赖关系 也无法重复使用了。

解决程序功能与逻辑的 重复使用

而针对 Option API 难以被重复使用的缺点，在当时Vue有提供几种方式来解决 像是 自定义指令directive、Mixins 等（以上Vue3目前都支援）。

虽然以上几种方式，目前 在Vue3 还是支援使用的，但其中 Mixins 是较爲不建议使用的了，为什麽呢？

Mixins

Mixins 主要功能 是用来提供不同元件内的属性重复使用，

而用法如下：

首先，我们先自订mixins物件:

 const sayHiMixins ={
 methods:{
    sayHi(){
        console.log('Hi')
    }
 },
 created(){
     this.sayHi()
 }
 }

要使用的时候，在元件加上mixins属性来引入 sayHiMixins:

//component winnie
app.component('component-wu',{
 mixins:[sayHiMixins]
})

//component winnie
app.component('component-hsu',{
 mixins:[sayHiMixins]
})

而在 两个子元件中，分别就有 hello()与 created 的功能了，有没有感觉很方便？但是事情没有那麽简单啊

当今天一样因为时间累积，需求不停变更，同时累积了许多子子孙孙的mixins，这时身为後代的你就是痛苦的开始，为什麽呢？

让我们来看看以下例子：当今天有好几个 mixins

 // mixins sayHi
 const winnieSayHi ={
 methods:{
    data(){
      return{
       name: 'winnie',
      }
    },
    methods:{
      sayHi(){
        return console.log(this.name +'say Hi')
      }
   },  
 }
 
const wuSayHi ={
 methods:{
    data(){
      return{
       name: 'Wu',
      }
    },    
 }
 
 const everyBody ={
 methods:{
    data(){
      return{
       name: 'Name',
      }
    }, 
    
    methods:{
      sayHi(){
        return console.log(this.name +'say Hi')
      }
   },
 }
 

今天 三个 mixins 同时要在 两个元件中被使用 会出现什麽结果？

//component winnie
app.component('component-wu',{
 mixins:[wuSayHi,everyBody]
})

//component hsu
app.component('component-hsu',{
 mixins:[winnieSayHi],
 data(){
 return name: hsu
 }
})

对的，你想得没错，因为在不知道 component 内部的状态与资料 ，当功能一多，很容易就会造成 功能先後执行的错误讯息 与 命名的冲突，同时 当 mixins 越写越多时，要找出问题，也就会变得困难。

所以後来 针对以上针对以上Vue2所有产生的问题， 在Vue3中 就出现 Composition api的 用法。

而究竟Composition api 是如何解决的，我们就留在下篇文章来回答罗！以上就是今天的文章 如有问题 再请大家多多指教 谢谢。