# [Vue3]基本介紹

ref、reactive、readonly
===

let param1 = ref(0);
let param2 = ref('text');

ref用來存單一值，若需操作則使用param1.value來取得ref值

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

<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

v-show="params"

v-show根據params來判斷該元件是否增加display:none

v-if="params"

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

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

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

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

v-bind
===
v-bind可綁定html元件屬性
根據listArr中status的值，去塞入在class中
也可綁定在src等各種屬性上
縮寫 v-bind:class => :class

<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)不會緩存，會根據傳入參數改變
依照是否需傳入參數決定使用時機