---
# System prepended metadata

title: '[Vue3]基本介紹'

---

# [Vue3]基本介紹

ref、reactive、readonly
===
```javascript=
let param1 = ref(0);
let param2 = ref('text');
```
ref用來存單一值，若需操作則使用param1.value來取得ref值

```java=
let param1 = reactive([
            { name: "nini", show: true , select:false},
            { name: "yun", show: false , select: false},]
```
reactive用來存陣列或物件
使用param1.name
param1[0]

readonly可存任意值，但不可被修改


v-for
===
將listArr陣列用for語法，以item取出，index為idx，可搭配v-show判斷陣列內值是否顯示
若使用v-for，須設定key
key為陣列中唯一值，若有設定，當陣列值改變時不會重新渲染整個陣列，只會渲染被改變的item
```htmlembedded=
<li v-for='(item,idx) in listArr' v-bind:key="item.name" v-show='item.select && !item.show'>
  {{item.name}}
</li>
```



v-show 、 v-if
===
params為布林值，true/false
```htmlembedded=
v-show="params"
```
v-show根據params來判斷該元件是否增加display:none

```htmlembedded=
v-if="params"
```
v-if根據params來判斷是否顯示該元件

使用時機：
若需類似切換tab大量操作顯示與否，建議使用v-show
若為權限設定是否出現，建議使用v-if




v-model綁定
===
將v-model綁定在input上，且綁定text，若input中的text改變，h1的text會同時改變

```htmlembedded=
<h1>{{text}}</h1>
<input type="text" v-model="text" />
```

v-bind
===
v-bind可綁定html元件屬性
根據listArr中status的值，去塞入在class中
也可綁定在src等各種屬性上
縮寫 v-bind:class => :class
```htmlembedded=
<li v-for="(list, idx) in listArr" v-bind:key="list.name" v-bind:class="list.status">
{{idx + 1}}. {{list.name}}
</li>
```


computed 、 methods
===
computed會緩存，只可改變現有資料
ex:ajax的回傳值
methods(即function)不會緩存，會根據傳入參數改變
依照是否需傳入參數決定使用時機




