vue 3 響應式狀態聲明

在vue2中我們使用data() {..}來傳遞數據，而在vue3中則有特殊的函數用來名響應式狀態

在vue3中會使用到ref()以及reactive()，這兩種函數來聲明

ref

在一開始我們需要先import

import { ref } from 'vue'

ref裡面可以接受number,string,list等等

const count = ref(0)
const initial= ref(" ")
const firstList= ref([ ])

返回的數據需要用 .value

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

在template中不需要加上.value可以直接聲明

<div>{{ count }}</div>

reactive

使用方式跟ref有點差異，reactive會使對象本身具響應性

import { reactive } from 'vue'

const state = reactive({ count: 0 })

使用限制

• reactive只能用於對象類型(map,object,數組..)無法用於原始型別(string,number,boolean)
• 不能替換整個對象

https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html