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>
