vue3 toRef() 和toRefs的使用,代码模版
toRef()代码模版
<template>
<h3>{{ name }}</h3>
<h3>{{ age }}</h3>
<h3>{{ jobType }}</h3>
<button @click="changePerson">修改person中的值</button>
</template>
<script>
import { reactive,toRef } from "@vue/reactivity";
export default {
setup() {
let person = reactive({
name: "Ulrich",
age: 22,
job: {
type: "front-end engineer",
},
});
function changePerson(){
person.name = 'Vichien'
person.age = 18
}
return {
name:toRef(person,'name'),
age:toRef(person,'age'),
jobType: toRef(person.job, "type"),
changePerson
};
},
};
</script>
toRefs()代码模版
<template>
<h3>{{ name }}</h3>
<h3>{{ age }}</h3>
<h3>{{ job.type }}</h3>
<button @click="changePerson">修改person中的值</button>
</template>
<script>
import { reactive, toRefs } from "@vue/reactivity";
export default {
setup() {
let person = reactive({
name: "Ulrich",
age: 22,
job: {
type: "front-end engineer",
},
});
function changePerson() {
person.name = "Vichien";
person.age = 18;
}
return {
...toRefs(person),
changePerson,
};
},
};
</script>