<template>
<h1>{{count}}</h1>
<h1>{{double}}</h1>
<button @click="increase">+1</button>
</template>
import { ref } from "vue"
setup() {
// ref 是一個(gè)函數(shù)拆火，它接受一個(gè)參數(shù)导梆，返回的就是一個(gè)神奇的 響應(yīng)式對(duì)象 淹禾。我們初始化的這個(gè) 0 作為參數(shù)包裹到這個(gè)對(duì)象中去哀托，在未來(lái)可以檢測(cè)到改變并作出對(duì)應(yīng)的相應(yīng)。
const count = ref(0)
const double = computed(() => {
return count.value * 2
})
const increase = () => {
count.value++
}
return {
count,
increase,
double
}
}
import { ref, computed, reactive, toRefs } from 'vue'
interface DataProps {
count: number;
double: number;
increase: () => void;
}
setup() {
const data: DataProps = reactive({
count: 0,
increase: () => { data.count++},
double: computed(() => data.count * 2)
})
const refData = toRefs(data)
return {
...refData
}
}
使用 ref 還是 reactive 可以選擇這樣的準(zhǔn)則
第一，就像剛才的原生 javascript 的代碼一樣，像你平常寫(xiě)普通的 js 代碼選擇原始類型和對(duì)象類型一樣來(lái)選擇是使用 ref 還是 reactive卓缰。
第二，所有場(chǎng)景都使用 reactive，但是要記得使用 toRefs 保證 reactive 對(duì)象屬性保持響應(yīng)性征唬。
