Day_15 : 让 Vite 来开启你的Vue 之 Setup

Hi Dai Gei Ho~ 我是Winnie～

在今天的内容中，我们要来说的是 Composition API 的 Setup()

Setup()

setup函式 为 Composition API 启动元件的初始入口位置，而在其函式内通常 会包含 生命周期hook、状态资料 计算属性 等。最後 再将模板需要使用 的 状态及功能 回传出来给template就可以了。

其中 在元件内的 功能逻辑与资料状态 其实 不一定 要全写在setup内，可以依照 情境需求 适时地抽出来，当需要使用时 再import进来使用即可， 而这样做的好处 主要是可以让元件内的 setup函式减少变成 面条程序码 的机率，更利於 程序码阅读及维护。

面条程序码是什麽 ？
简单来说 就是 程序码 像面条一样杂乱交错，完全无法看出程序的脉络。

setup中的参数 props/context

当元件启动时，在setup函式中会分别带入 props 与 context两个参数。

props

props 是什麽？相信应该到这边大家都蛮熟的了，如果不熟的捧由 可以看看官网文件或是 指路 Kuro大大 的008 Vue props 的这篇

那在setup中要如何使用呢？再指路..喂 不对，回来

以下程序码为例：

export default {
  props: {
    name: String
  },
  setup(props) {
  //const { name } = props 不可以这样喔！
    console.log(props.name)
  }
}

从上我们可以看到，因为没有this可以使用，所以 setup 透过 参数传递 props物件 来供内部 函式使用。

而这边注意的是 由於props中的资料是响应式的，所以要取出props内的资料不能直接使用ES6解构， 这样会造成 props 的 响应消失，如需要解构使用，我们可以透过 Vue3新增的 API toRefs方法来完成此目的。(之後文章会介绍 什麽是 toRefs)

context

而 setup 函数传递的第二个参数就是 context物件，而在Context物件内含有 attrs、slots、emitAPI，而与props不同地方的是，因为 context 只是一个普通的JS 物件，不是响应式的，所以针对其 可以ES6解构来进行使用

export default {
  props: {
    name: String
  },
  setup(props,{attrs,slots,emit}) {
  //const { name } = props 不可以这样喔，需透过toRefs！
    console.log(props.name) 
    .... 略
  }
}

生命周期 Hook

从上生命周期hook 对照图我们可以发现，在 过去的 created 与 beforeCreate 被 setup 所取代了，这是为什麽呢？

针对这个疑问，文件是这样说明的：

在新式setup 函数执行时机 主要是 介於 beforeCreate、created 两者之间，因此就不需要再特地来定义他们，直接由 setup 来取代即可。而这也表示，在 created 之後的 生命周期钩子(onMounted、onUpdated 等) 都应该在 setup()中来编写。

另外 需注意的地方，相较於过去 生命周期hooks的写法，在Composition API 部分 生命周期钩子名称有所更改，在部分前方加上 on 来使用 (如：updated ----> onUpdated)

而其用法如下：

import { onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {  // 使用的方式改为函数式的方式来使用
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  }
}

以上 就是关於 Composition API Setup函式 使用的介绍，而预告下篇将会(硬要 江蕙？)来介绍 Vue3 中的 ref() 是什麽 及 如何使用。 谢谢大家，如有问题欢迎各位多多指教。