vue(33)vue中CompositionAPI中setup响应式变量的声明
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>
