1.在setup中普通聲明的變量，並返回時該變量不是響應式的，即改變該變量的值不會刷新頁面。
<template>
<div class="home">
{{num}}
<br>
<button @click="add()">change</button>//這里點擊的時候在方法中即使改變了num的值，頁面上還是num的初始值，因為它不是響應式的
</div>
</template>
<script>
export default {
setup() {
let num = 0;
function add(){
num++;
console.log(num);
}
return { num ,add};
},
};
</script>
2.使用ref()可以聲明響應式的變量
<template>
<div class="home">
{{num}}//在這里用num的值時不用寫num.value
<br>
<button @click="add()">change</button>
</div>
</template>
<script>
import{ref}from 'vue'
export default {
setup() {
let num = ref(0);//這里num就是一個響應式的變量了
function add(){
num.value++;//用ref聲明后在setup中訪問或者改變num的值時要用num.value。但是在template中使用時直接可以使用num
console.log(num.value);
}
return { num ,add};
},
};
</script>
3.ref()不能聲明響應式的對象，要聲明響應式的對象用reactive()
<template>
<div class="home">
{{user.age}}
<br>
<button @click="add()">change</button>
</div>
</template>
<script>
import{ref,reactive}from 'vue'
export default {
setup() {
let user = reactive({
name:'tom',
age:0
});
function add(){
user.age++;//使用reactive聲明響應式對象后不用像ref那樣用.value來訪問或者修改，直接像正常變量那樣使用就可以
console.log(user.age);
}
return { user ,add};
},
};
</script>
4.使用readonly將響應式變量變為只讀的，這樣就可以將一個響應式變量變為非響應式不可更改的變量
<template>
<div class="home">
{{u.age}}
<br>
<button @click="add()">change</button>
</div>
</template>
<script>
import{ref,reactive,readonly}from 'vue'
export default {
setup() {
let user = reactive({
name:'tom',
age:0
});
let u = readonly(user);
function add(){
u.age++;
console.log(u.age);
}
return { u ,add};
},
};
</script>
5.解構返回reactive聲明的對象中的屬性時，該屬性不是響應式的
<template>
<div class="home">
{{age}}
<br>
<button @click="add()">change</button>
</div>
</template>
<script>
import{ref,reactive,readonly}from 'vue'
export default {
setup() {
let user = reactive({
name:'tom',
age:0
});
function add(){
user.age++;
console.log(user.age);
}
return { ...user ,add};//...user表示解構返回user對象中的沒個屬性，這里表示返回一個name和age變量，但這樣返回后name和age不是響應式的
},
};
</script>
6.為了解決5所示的問題，可以使用toRefs來將一個reactive聲明的對象的屬性解構為響應式的變量返回
<template>
<div class="home">
{{age}}
<br>
<button @click="add()">change</button>
</div>
</template>
<script>
import{ref,reactive,readonly,toRefs}from 'vue'
export default {
setup() {
let user = reactive({
name:'tom',
age:0
});
function add(){
user.age++;
console.log(user.age);
}
return { ...toRefs(user) ,add};//使用toRefs后返回name和age變量就是響應式的了
},
};
</script>