ref和toRef区别:
ref->复制, 修改响应式数据不会影响原始数据 toRef->引用, 修改响应式数据会影响原始数据 ref->数据发生改变, 界面就会自动更新 toRef->数据发生改变, 界面也不会自动更新
所以如果想让响应式数据和以前的数据关联起来,并且想在更新响应式数据的时候不更新UI,那么就使用toRef
用法:
<template >
名字:{{silen.name}}
<br>
<br>
年龄:{{toref_age}}
<br>
旧爱好:{{toref_favorite.before}}
<br>
新爱好:{{toref_favorite.now}}
<br>
<button @click="change">change</button>
</template>
<script>
import { reactive, toRefs, toRef } from "vue";
// 引入自定义hooks
export default {
setup() {
let silen = reactive({
name: "小璃",
age: "22",
favorite: {
before: ["吃吃吃", "玩玩玩", "喝喝喝"],
now: ["打代码", "打代码", "打代码"],
},
});
//把age变成ref 把favorite变成torefs
let toref_age=toRef(silen,"age")
let toref_favorite=toRefs(silen.favorite)
function change() {
toref_age.value++
toref_favorite.now.value[0]="臭美臭美"
}
return {
change,
silen,
toref_age,
toref_favorite
// age:toRef(silen,age)
};
},
};
</script>
<style>
</style>