{%hackmd BJrTq20hE %}
###### tags: `Vue` `composition API` `Vite`
# 從composition API 開始VUE的生活-Composition API 起手式
Vue是由資料決定畫面，所以決定資料才能決定畫面。
先綁定畫面與資料。如果不使用ref資料也會出現在畫面，不過資料更動的時候畫面的資料也不會跟著改變。

<template>
  <h2>{{myName}}</h2>
</template>

<script setup>
import { ref } from 'vue'
  const myName = ref('Jack')
</script>

這樣子畫面就會出現Jack了

## 使用ref的目的與注意事項
1.需要出現在畫面上的資料才需要使用ref。

2.強烈建議使用const宣告ref的變數，因為Vue3是使用proxy作為響應式，所以要把資料寫入ref，畫面能渲染到資料。

3.在composition API中使用ref的好處，與option API相比，在看到變數.value時就知道這個變數與資料渲染有關，option API的this.變數，則看不出來有沒有關係。

## script標籤內的setup是語法糖
1.用來簡化export default{} 、 return{變數名稱,函式名稱}、prop、emit、import的component
2.只能在vite的環境使用

## composition API與 option API強烈不建議混寫
除了prop、emit、import的component還是與option API的寫法相同。

## 寫一些簡單的功能

好用套件
---
### 1.volar
用來分割視窗，分為template、scritp、style
如何安裝?
1.點開VScode左側延伸模組
2.輸入volar

### 2.unplugin-vue-components
會自動import composition API所使用的功能。
例如當你輸入ref時就會自動importref
如何安裝?
在打開開發的資料夾中的VScode按ctrl+\`並輸入

npm i unplugin-vue-components -D

參考資料
---
[Vue3 + Vite 快速上手 Get Startrd EP1 - 初探 Vite 專案 / Vue3 初學者應該要先知道的東西 / 剛開始寫 Composition API 會犯的錯誤 !](https://www.youtube.com/watch?v=rNQIA0Fe9KQ&lc=UgyqD7KRj_fR9ucomzN4AaABAg.9dBNDjhrFaj9dD6z6gxDvg)