ref 函数可以将对象里面的属性值变成响应式的数据，修改响应式数据，是不会影响到源数据，但是视图层上的数据会被更新
代码案例如下
<template>
<h>{{name1}}</h>
<button @click="click">点击</button>
</template>
<script>
import {reactive,toRefs,ref,toRef} from "vue"
import test1 from "./Test1.vue"
export default {
name: "Test2",
setup(){
let name="yu";
const name1=ref(name)
const click=()=>{
name1.value="zhang"
console.log(name)
console.log(name1)
}
return{
name1,
click
}
}
}
</script>toRef 函数会与源数据交互，修改响应式数据会造成源数据的修改，但是他的修改不会造成视图层数据的更新。
<template> <div style="text-align: center;padding-left: 50px"> <h>{{name1}}</h> <br> <br> <button @click="click">点击</button> </div></template><script> import {reactive,toRefs,ref,toRef} from "vue" import test1 from "./Test1.vue" export default { name: "Test2", setup(){ const name={ name1:"hh" } const name1=toRef(name,"name1") const click=()=>{ name1.value="zhang" console.log(name.name1) console.log(name1.value) } return{ name1, click } } }</script>toRefs 函数与原始数据相交互，修改响应式数据会影响到源数据，但是不会更新视图层。
toRefs 函数还可以与其他响应式数据相交互，更加方便处理视图层数据。
<template>
<div style="text-align: center;padding-left: 50px">
<h>{{name1.name2}}</h>
<br>
<br>
<button @click="click">点击</button>
</div>
</template>
<script>
import {reactive,toRefs,ref,toRef} from "vue"
import test1 from "./Test1.vue"
export default {
name: "Test2",
setup(){
const name={
name1:"hh",
name2:"jj"
}
const name1=toRefs(name)
const click=()=>{
name1.name2.value="kk"
console.log(name.name2)
console.log(name1.name2.value)
}
return{
name1,
click
}
}
}
</script>toRefs配合reactive可以实现修改响应数据会更新视图层
<template>
<div style="text-align: center;padding-left: 50px">
<h>{{name2}}</h>
<br>
<br>
<button @click="click">点击</button>
</div>
</template>
<script>
import {reactive,toRefs,ref,toRef} from "vue"
import test1 from "./Test1.vue"
export default {
name: "Test2",
setup(){
const name=reactive({
name2:"hh"
})
const click=()=>{
name.name2="k"
}
return{
...toRefs(name),
click
}
}
}
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/197070.html
