如果问我toRefs是什么？
上结论: toRefs为了使 “解构“ 后的数据不丢失“响应式“的作用，专业一点说 “延续原先数据的响应式“ 要知道 “响应式“ 在vue中是多么重要。
解释: 通常情况下在取数据时，都会使用下例这种方法。然而数据一多就会显得冗余重复。 于是 toRefs 来了。
案例分析:
<template>
name: <h1>{{ state.name }}</h1>
age:<h1>{{ state.age }}</h1>
</template>
<script>
import { reactive } from "vue"
export default {
name: "test-toRefs",
setup() {
const state = reactive({
name: "cumin",
age: 18,
})
return {
state
}
}
}
</script>
这种情况下， state. 的次数过多就会显得代码过于冗余。
要是我们使用 解构 (...)展开运算符 呢
<template>
name:
<h1>{{ name }}</h1>
age:
<h1>{{ age }}</h1>
</template>
<script>
import { reactive } from "vue"
export default {
name: "ToRefs",
setup() {
const state = reactive({
name: "cumin",
age: 18,
})
return {
...state,
}
}
}
</script>
(...)展开运算符 会使得原先state数据的响应式失效，
知道 “响应式“ 在vue中是多么重要。嘻嘻哈哈
这该怎么办，这不行那不行的，最后我找尤雨溪商量了下，这不行的啊，赶紧想个办法。好了，它来了，它来了 toRefs
toRefs用法: toRefs(参数:将失去响应式的数据)
可以撒，一句话说明白了。
最终:
<template>
name:
<h1>{{ name }}</h1>
age:
<h1>{{ age }}</h1>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
name: "ToRefs",
setup() {
const state = reactive({
name: "cumin",
age: 18,
});
setTimeout(()=>{
state.name = 'shirly'
},1000)
return {
...toRefs(state)
};
},
};
</script>
最终代码也可以使用解构了。响应式又不丢失，是这个样子哒。
结印
